[ { "path": ".eslintignore", "content": "**/demo/**\n**/grunt/**\n**/build/**\n**/third_party/**\n**/tmp/**\nGruntfile.js\n**/intl-tel-input/utils.js\nsite/static/js/highlight.min.js\nsite/static/js/silktide-consent-manager.js\nsite/src/examples/js/*_display_code*\nplaywright-report/\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n root: true,\n env: {\n browser: true,\n es2021: true,\n node: true,\n \"jest/globals\": true,\n },\n extends: [\n \"eslint:recommended\",\n \"plugin:@typescript-eslint/recommended\",\n \"plugin:react/recommended\",\n \"plugin:react-hooks/recommended\",\n ],\n parser: \"@typescript-eslint/parser\",\n parserOptions: {\n \"ecmaVersion\": \"latest\",\n \"sourceType\": \"module\",\n },\n plugins: [\n \"@typescript-eslint\",\n \"react\",\n \"jest\",\n ],\n globals: {\n goog: true,\n i18n: true,\n require: true,\n },\n rules: {\n semi: [\"error\", \"always\"],\n \"comma-dangle\": [\"error\", \"always-multiline\"],\n quotes: [\"error\", \"double\"],\n \"no-unused-vars\": \"off\",\n \"no-prototype-builtins\": \"off\",\n \"class-methods-use-this\": \"error\",\n \"@typescript-eslint/explicit-function-return-type\": \"off\",\n \"@typescript-eslint/no-unused-vars\": [\"error\", {\n \"argsIgnorePattern\": \"^_\",\n \"varsIgnorePattern\": \"^_\",\n \"caughtErrorsIgnorePattern\": \"^_\",\n \"ignoreRestSiblings\": true,\n }],\n \"@typescript-eslint/no-var-requires\": \"off\",\n \"@typescript-eslint/no-explicit-any\": \"off\",\n \"@typescript-eslint/no-require-imports\": \"off\",\n },\n overrides: [{\n files: [\".eslintrc.{js,cjs}\"],\n env: { \"node\": true },\n parserOptions: { \"sourceType\": \"script\" },\n }],\n settings: {\n \"import/resolver\": {\n \"typescript\": {},\n },\n \"react\": {\n \"version\": \"detect\",\n },\n },\n};\n" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing\n\nI'm very open to contributions, big and small! For general instructions on submitting a pull request on GitHub, see these guides: [Fork A Repo](https://help.github.com/articles/fork-a-repo) and [Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/).\n\n## Table of Contents\n- [Changes to the plugin](#changes-to-the-plugin)\n- [Updating the flag images](#updating-the-flag-images)\n- [Adding a new translation](#adding-a-new-translation)\n\n## Changes to the plugin\n\n### Setup\n\nOnce you have [forked the repository](https://help.github.com/articles/fork-a-repo) and checked out your fork on your local machine, you need to initialise the submodules with `git submodule update --init --recursive`, then run `npm install`, and then `npm run build`. You should now be able to open the included demo.html in your browser and have a working plugin!\n\n### Making changes\n\nAny time you make changes, you’ll need to rebuild the plugin. You can run `npm run watch` to do this automatically. Else you can manually run one of the build commands below:\n\n- `npm run build` to build everything (slow)\n - Builds flag images, translations, CSS, and all of the JS (see below)\n- `npm run build:js` to build all of the JS (slow)\n - Builds utils script, main plugin module, TS type declaration files, react/vue/angular/svelte components and demo bundles\n- `npm run build:jsfast` to just build the JS needed for the demo/tests (fast)\n- `npm run build:css` to just build the CSS (fast)\n- And lots more - see [package.json \"scripts\" section](https://github.com/jackocnr/intl-tel-input/blob/master/package.json#L7-L29) for full list\n\n### Tests\n\nAfter building all the assets (`npm run build`) you can run `npm test` to run all the tests (Jest + Playwright). For Playwright, you may also need to install the browsers first with `npx playwright install`.\n\n## Updating the flag images\n\nWe get our flags from the [flag-icons](https://github.com/lipis/flag-icons) project. If there is a problem with the flags, you'll need to raise it with them. When there is an update in that project that you want to pull into this project, you can update the npm package with `npm install flag-icons@VERSION --save-dev`, and then rebuild the flag sprite images with `npm run build:img`. Once you've checked everything looks ok (by opening the included demo.html in your browser), you can then create a pull request on GitHub. _NOTE: since we removed the build files from the repo, the only changes you will be committing are in package.json and package-lock.json._\n\n## Adding a new translation\n\nNOTE: that country names are now translated automatically using the native `Intl.DisplayNames` (see `countryNameLocale` option), so there's no need to provide translations for these anymore.\n\nThe [provided translations](https://github.com/jackocnr/intl-tel-input/tree/master/src/js/intl-tel-input/i18n) are now just for the user interface strings (e.g. the country search placeholder). If we don't yet support a language you need, it's easy to contribute this yourself - you only need to provide a handful of strings (for example, see the [English translations](https://github.com/jackocnr/intl-tel-input/blob/master/src/js/intl-tel-input/i18n/en/index.ts)).\n\nThe translation files are located in src/js/intl-tel-input/i18n/. There is a directory for each language we support (e.g. \"en\" for English). Inside each of these directories, there is an index.ts, which contains the translations. All you need to do to add a new translation is create a new language directory, create the index.ts file and populate it with your translation strings, following the same pattern as the other languages.\n\nIf you haven't already, you will need to run `npm install` to install the project dependencies, and then you can run `npm run build:translations` to automatically add your new language to the root index.ts file. Once you have tested and confirmed that the new translations are working, you can create a pull request on GitHub.\n" }, { "path": ".github/FUNDING.yml", "content": "github: jackocnr\n" }, { "path": ".github/ISSUE_TEMPLATE/1_bug_report.yml", "content": "name: Bug Report\ndescription: Report a bug or issue with intl-tel-input\nlabels: [\"bug\"]\nbody:\n - type: checkboxes\n attributes:\n label: Prerequisites\n description: Take a couple of minutes to help our maintainers work faster.\n options:\n - label: I am using the latest version (v26.8.1) of both intl-tel-input and utils.js.\n required: true\n - label: This plugin uses libphonenumber for formatting, validation, and placeholder numbers. If my issue relates to one of these things, I confirm I have used their [test site](https://libphonenumber.appspot.com) to ensure the issue is not with them, and will provide a link to the test results page showing this. Else, I have [reported the issue](https://github.com/google/libphonenumber/blob/master/CONTRIBUTING.md) to them instead of here.\n required: true\n - label: I have searched the existing issues (including closed issues) to ensure this has not already been discussed.\n required: true\n - type: textarea\n id: current\n attributes:\n label: Current behaviour\n description: A concise description of what you're experiencing.\n validations:\n required: true\n - type: textarea\n id: expected\n attributes:\n label: Expected behaviour\n description: A concise description of what you expected to happen.\n validations:\n required: true\n - type: textarea\n id: steps\n attributes:\n label: Steps to reproduce\n description: How can we reproduce the issue? (e.g. provide a [Playground](https://intl-tel-input.com/playground) link with the right configuration)\n value: |\n 1.\n 2.\n 3.\n validations:\n required: true\n - type: textarea\n id: comments\n attributes:\n label: Anything else?\n description: Additional comments, screenshots/videos, initialisation options, browser/device info, etc.\n validations:\n required: false\n" }, { "path": ".github/ISSUE_TEMPLATE/2_feature_request.yml", "content": "name: Feature Request\ndescription: Suggest a new feature or improvement\nlabels: [\"enhancement\"]\nbody:\n - type: textarea\n id: description\n attributes:\n label: Description\n description: Describe the feature or improvement you'd like to see.\n validations:\n required: true\n - type: textarea\n id: use-case\n attributes:\n label: Use case\n description: Why do you need this feature? What problem does it solve?\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Ask the community\n url: https://github.com/jackocnr/intl-tel-input/discussions\n about: Ask questions and get help from the community\n" }, { "path": ".github/copilot-instructions.md", "content": "At the beginning of a chat, remind me to run `npm run watch`, so any changes get automatically built, meaning I can manually test them in the browser, and also when you run the tests, they will be running the latest code. Do not offer to run the build command yourself. Do not ever make changes to files in the build/ directories, e.g. the root ./build/ directory, or the component build/ directories (angular/build/, react/build/, svelte/build/ and vue/build/). These files are auto-generated, so do not update them.\n\nWhen making changes to the root src/ directory, do not touch any of the files in the component directories (angular/, react/, svelte/ and vue/). A lot of the files in those directories are just symlinks to the root src/ directory.\n\nWhen making changes to the root src/ code, make sure to also update the tests (in the root tests/ directory) if necessary, and run the tests to make sure they are passing.\n\nWhen making changes to the root src/ code, make sure to also update the website documentation and example pages if necessary. The documentation is located in the site/src/docs/ directory, and the examples are located in the site/src/examples/ directory. If you are not sure how to update the documentation or examples, just ask me.\n\nWhen writing code, prioritise clarity and brevity. Try to follow the existing code style as much as possible.\n\nWhen making changes in the root site/ directory, remember there are no tests for this, so don't bother running the tests. This also applies to the component directories (angular/, react/, svelte/ and vue/), as they also don't have tests.\n\nWhen making changes in the component directories (angular/, react/, svelte/ and vue/), note that the \"withUtils\" files are auto-generated, so do not update them. For example, when making changes to react/src/intl-tel-input/react.tsx, do not update react/src/intl-tel-input/react-withUtils.tsx, as it is auto-generated. The same applies to the other component directories." }, { "path": ".github/workflows/ci.yml", "content": "name: CI\n\non:\n push:\n branches: [ \"**\" ]\n pull_request:\n branches: [ \"**\" ]\n\npermissions:\n contents: read\n\njobs:\n build-and-test:\n name: Build and Test (Node ${{ matrix.node-version }})\n runs-on: ubuntu-latest\n strategy:\n fail-fast: false\n matrix:\n node-version: [20]\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n with:\n submodules: recursive\n fetch-depth: 0\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n\n - name: Build\n run: npm run build\n\n - name: Run JS tests\n run: npm run test:js -- --runInBand\n\n - name: Run e2e tests\n run: npm run test:e2e:linux\n\n - name: Upload Playwright artifacts\n if: failure()\n uses: actions/upload-artifact@v4\n with:\n name: playwright\n path: |\n playwright-report/\n test-results/\n" }, { "path": ".gitignore", "content": "/node_modules/\n/lib/*\n!/lib/libphonenumber\n/.sass-cache/\n/.grunt/\n/tmp/\n/vendor/\n/.idea/\n*.iml\n.DS_Store\n/build/\n/react/build/\n/svelte/build/\n/vue/build/\n/angular/build/\n/*/demo/*/*-bundle.js\n/test-results/\n/playwright-report/\n/.claude/" }, { "path": ".gitmodules", "content": "[submodule \"third_party/libphonenumber\"]\n\tpath = third_party/libphonenumber\n\turl = https://github.com/google/libphonenumber\n" }, { "path": ".node-version", "content": "v20.12.0\n" }, { "path": ".npmrc", "content": "# Jest uses the `vm` module, which does not have production ready module support\n# yet. This option lets us use dynamic imports.\nnode-options='--experimental-vm-modules'\n" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\n \"rvest.vs-code-prettier-eslint\",\n \"davidanson.vscode-markdownlint\",\n \"aaron-bond.better-comments\"\n ]\n}\n" }, { "path": ".vscode/settings.json", "content": "{\n \"editor.defaultFormatter\": \"rvest.vs-code-prettier-eslint\",\n \"editor.formatOnPaste\": false, //* required\n \"editor.formatOnType\": false, //* required\n \"editor.formatOnSaveMode\": \"file\", //* required to format on save\n \"vs-code-prettier-eslint.prettierLast\": false, //* set as \"true\" to run 'prettier' last not first\n \"typescript.tsdk\": \"node_modules/typescript/lib\",\n \"files.associations\": {\n \"LICENSE\": \"text\",\n },\n \"markdownlint.config\": {\n \"blanks-around-headings\": false,\n \"blanks-around-lists\": false,\n \"ul-style\": false,\n \"blanks-around-fences\": false,\n \"ol-prefix\": false,\n \"no-inline-html\": false,\n },\n \"cSpell.language\": \"en-GB\",\n \"cSpell.enabledLanguageIds\": [\n \"asciidoc\",\n \"c\",\n \"cpp\",\n \"csharp\",\n \"css\",\n \"dotenv\",\n \"go\",\n \"handlebars\",\n \"html\",\n \"ignore\",\n \"jade\",\n \"java\",\n \"javascript\",\n \"javascriptreact\",\n \"json\",\n \"jsonc\",\n \"latex\",\n \"less\",\n \"markdown\",\n \"php\",\n \"plaintext\",\n \"pug\",\n \"python\",\n \"restructuredtext\",\n \"rust\",\n \"scala\",\n \"scss\",\n \"text\",\n \"typescript\",\n \"typescriptreact\",\n \"yaml\",\n \"yml\",\n \"COBOL\",\n \"ACUCOBOL\"\n ],\n \"files.trimTrailingWhitespace\": true,\n \"[markdown]\": {\n \"files.trimTrailingWhitespace\": false\n }\n}\n" }, { "path": "CHANGELOG.md", "content": "See the Github Releases page for changelog: https://github.com/jackocnr/intl-tel-input/releases\n\nOr to view a specific version, e.g. v20.0.0, update the URL accordingly, e.g. https://github.com/jackocnr/intl-tel-input/releases/tag/v20.0.0\n\n## Breaking changes\n\n- v26.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v26.0.0\n- v25.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v25.0.0\n- v24.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v24.0.0\n- v23.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v23.0.0\n- v22.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v22.0.0\n- v21.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v21.0.0\n- v20.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v20.0.0\n- v19.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v19.0.0\n- v18.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v18.0.0\n- v17.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v17.0.0\n- v16.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v16.0.0\n- v15.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v15.0.0\n- v14.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v14.0.0\n- v13.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v13.0.0\n- v12.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v12.0.0\n- v11.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v11.0.0\n- v10.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v10.0.0\n- v9.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v9.0.0\n- v8.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v8.0.0\n- v7.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v7.0.0\n- v6.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v6.0.0\n- v5.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v5.0.0\n- v4.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v4.0.0\n- v3.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v3.0.0\n- v2.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v2.0.0\n- v1.0.0 https://github.com/jackocnr/intl-tel-input/releases/tag/v1.0.0\n" }, { "path": "Gruntfile.js", "content": "module.exports = function(grunt) {\n\n // load all tasks from package.json\n require('load-grunt-config')(grunt);\n require('time-grunt')(grunt);\n require('google-closure-compiler').grunt(grunt, {\n platfrom: 'native'\n });\n\n /**\n * BUILD TASKS\n */\n // build everything ready for a commit\n grunt.registerTask('build', [\n 'clean:allBuild',\n 'build:img',\n 'translations',\n 'build:js',\n ]);\n\n // build translations\n grunt.registerTask('build:translations', [\n 'clean:buildJs',\n 'clean:tmpIntermediates',\n 'translations',\n 'build:js',\n ]);\n\n // build utils\n grunt.registerTask('build:utils', [\n 'clean:utils',\n 'closure-compiler:utils',\n 'shell:checkLpnMetadata',\n ]);\n\n // just CSS\n grunt.registerTask('build:css', [\n 'clean:buildCss',\n 'sass',\n 'cssmin',\n ]);\n\n // just images (and CSS)\n grunt.registerTask('build:img', [\n 'clean:buildImg',\n 'generate-sprite',\n 'build:css',\n ]);\n\n // just javascript\n grunt.registerTask('build:js', [\n 'clean:buildJs',\n 'clean:tmpIntermediates',\n 'shell:eslint',\n 'closure-compiler:utils',\n 'shell:genTsDeclaration',\n 'shell:buildJs',\n 'build:components',\n ]);\n\n // just 4 components\n grunt.registerTask('build:components', [\n 'clean:reactBuild',\n 'clean:vueBuild',\n 'clean:angularBuild',\n 'clean:svelteBuild',\n 'build:react',\n 'build:vue',\n 'build:angular',\n 'build:svelte',\n ]);\n\n // Ensure build/js/utils.js exists (src/js/intl-tel-input/utils.js is a symlink to it).\n grunt.registerTask('ensure:utils', 'Build utils if missing', function() {\n if (!grunt.file.exists('build/js/utils.js')) {\n grunt.task.run('closure-compiler:utils');\n }\n });\n\n // fast version which only builds the main plugin JS files (see root build.js file for details)\n grunt.registerTask('build:jsfast', [\n 'clean:buildJsKeepUtils',\n 'clean:tmpIntermediates',\n 'ensure:utils',\n 'shell:buildJs',\n ]);\n\n // just react\n grunt.registerTask('build:react', [\n 'clean:reactBuild',\n 'replace:reactWithUtils',\n 'shell:genReactTsDeclaration',\n 'shell:buildReact',\n ]);\n\n // just vue\n grunt.registerTask('build:vue', [\n 'clean:vueBuild',\n 'replace:vueWithUtils',\n 'shell:buildVue',\n ]);\n\n // just angular\n grunt.registerTask('build:angular', [\n 'clean:angularBuild',\n 'replace:angularWithUtils',\n 'shell:genAngularTsDeclarationAndJs',\n 'shell:buildAngular',\n ]);\n\n // just svelte\n grunt.registerTask('build:svelte', [\n 'clean:svelteBuild',\n 'replace:svelteWithUtils',\n 'shell:buildSvelte',\n ]);\n\n /**\n * VERSIONING TASKS\n */\n // (1) build for tests, and run tests before allowing a version bump\n // (2) bump version number in package.json etc\n // (3) rebuild js to update version numbers in those files, as well as readme etc\n // (4) commit, tag and push\n grunt.registerTask('version', [\n 'build:jsfast',\n 'shell:test',\n 'bump-only',\n 'versionNumbers',\n 'bump-commit',\n ]);\n\n grunt.registerTask('version:minor', [\n 'build:jsfast',\n 'shell:test',\n 'bump-only:minor',\n 'versionNumbers',\n 'bump-commit'\n ]);\n\n grunt.registerTask('version:major', [\n 'build:jsfast',\n 'shell:test',\n 'bump-only:major',\n 'versionNumbers',\n 'bump-commit'\n ]);\n\n // update version numbers in docs etc\n grunt.registerTask('versionNumbers', [\n 'replace:siteDocs',\n 'replace:issueTemplate',\n 'replace:packageLockInner',\n ]);\n\n};\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2014-2016 Jack O'Connor\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# International Telephone Input\n[![CI](https://github.com/jackocnr/intl-tel-input/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/jackocnr/intl-tel-input/actions/workflows/ci.yml) \"version\"/ \"downloads\"/ [![NerdyData.com logo](https://badges.nerdydata.com/719de9d2-d0e7-4988-b02f-9f9d52687076)](https://www.nerdydata.com/reports/international-telephone-input/719de9d2-d0e7-4988-b02f-9f9d52687076)\n\nA JavaScript plugin for entering, formatting and validating international telephone numbers. Includes TypeScript definitions, plus React, Vue, Angular and Svelte components.\n\n[Explore docs »](https://intl-tel-input.com/docs/choose-integration)\n\n\n \n \n \"Plugin\n\n\n## Sponsored by\n\"Twilio\"/\n\nUse [Twilio's API to build phone verification, SMS 2FA, appointment reminders, marketing notifications and so much more](https://www.twilio.com/blog/international-telephone-input-twilio?utm_source=github&utm_medium=referral&utm_campaign=intl_tel_input). We can't wait to see what you build.\n\n## React, Vue, Angular and Svelte Components\nWe provide React, Vue, Angular and Svelte (beta) components alongside the regular JavaScript plugin. This readme is for the JavaScript plugin. View the [React Component](https://intl-tel-input.com/docs/react-component), the [Vue Component](https://intl-tel-input.com/docs/vue-component) the [Angular Component](https://intl-tel-input.com/docs/angular-component), or the [Svelte component](https://intl-tel-input.com/docs/svelte-component).\n\n## Docs and Examples\nWe have a newly updated website, where you can find [a full set of docs](https://intl-tel-input.com/docs/getting-started.html), a [live playground](https://intl-tel-input.com/playground/) where you can try out all of the options, as well as plenty of [examples](https://intl-tel-input.com/examples/validation-practical.html) of different setups.\n\n## Features\n* Automatically select the user's current country using an IP lookup\n* Automatically set the input placeholder to an example number for the selected country\n* Navigate the country dropdown by typing a country's name, or using the up/down keys\n* Automatically format the number as the user types\n* Optionally, only allow numeric characters and cap the number at the maximum valid length\n* The user types their national number, and the plugin gives you the full standardised international number\n* Number validation, including specific error types\n* High-resolution flag images\n* Accessibility provided via ARIA tags\n* Typescript type definitions included\n* Easily customise styles by overriding CSS variables, e.g. support dark mode\n* React, Vue, Angular and Svelte components also included\n* Translations provided in over 40 languages, as well as support for RTL layout and alternative numeral sets\n* Lots of initialisation options for customisation, as well as instance methods/events for interaction\n\n## Contributing\nSee the [contributing guide](https://github.com/jackocnr/intl-tel-input/blob/master/.github/CONTRIBUTING.md) for instructions on setting up the project and making changes, and also on how to update the flag images, or how to add a new translation.\n\n## Attributions\n* Flag images from [flag-icons](https://github.com/lipis/flag-icons)\n* Original country data from mledoze's [World countries in JSON, CSV and XML](https://github.com/mledoze/countries)\n* Formatting/validation/example number code from [libphonenumber](https://github.com/googlei18n/libphonenumber)\n\nUser testing powered by [BrowserStack Open-Source Program](https://www.browserstack.com/open-source) \n\nBrowser testing via \n" }, { "path": "angular/README.md", "content": "# IntlTelInput Angular Component\n\nAn Angular 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/angular/src/intl-tel-input/angular.ts).\n\n[Explore docs »](https://intl-tel-input.com/docs/angular-component)\n" }, { "path": "angular/build.js", "content": "const { build } = require(\"esbuild\");\nconst fs = require(\"fs\");\nconst packageJson = require(\"../package.json\");\n\nconst mainShared = {\n bundle: true,\n external: [\"@angular/core\", \"@angular/forms\"],\n logLevel: \"info\",\n minify: false,\n define: { \"process.env.VERSION\": `\"${packageJson.version}\"` },\n};\n\nasync function buildMain() {\n //* Angular Component - Default (ES Modules)\n await build({\n ...mainShared,\n entryPoints: [\"angular/build/temp/intl-tel-input/angular.js\"],\n format: \"esm\",\n outfile: \"angular/build/IntlTelInput.js\",\n });\n\n //* Angular Component With Utils - Default (ES Modules)\n await build({\n ...mainShared,\n entryPoints: [\"angular/build/temp/intl-tel-input/angularWithUtils.js\"],\n format: \"esm\",\n outfile: \"angular/build/IntlTelInputWithUtils.js\",\n });\n\n // remove temp folder after builds are complete\n fs.rmSync(\"angular/build/temp\", { recursive: true, force: true });\n}\n\nbuildMain().catch(console.error);\n\nconst demoShared = {\n bundle: true,\n define: { \"process.env.VERSION\": `\"${packageJson.version}\"` },\n format: \"iife\",\n};\n\nbuild({\n ...demoShared,\n entryPoints: [\"angular/demo/simple/main.ts\"],\n outfile: \"angular/demo/simple/simple-bundle.js\",\n});\n\nbuild({\n ...demoShared,\n entryPoints: [\"angular/demo/validation/main.ts\"],\n outfile: \"angular/demo/validation/validation-bundle.js\",\n});\n\nbuild({\n ...demoShared,\n entryPoints: [\"angular/demo/set-number/main.ts\"],\n outfile: \"angular/demo/set-number/set-number-bundle.js\",\n});\n\nbuild({\n ...demoShared,\n entryPoints: [\"angular/demo/toggle-disabled/main.ts\"],\n outfile: \"angular/demo/toggle-disabled/toggle-disabled-bundle.js\",\n});\n\nbuild({\n ...demoShared,\n entryPoints: [\"angular/demo/form/main.ts\"],\n outfile: \"angular/demo/form/form-bundle.js\",\n});" }, { "path": "angular/demo/form/form.component.ts", "content": "import { Component, OnInit, ViewChild } from \"@angular/core\";\nimport {\n FormControl,\n FormGroup,\n ReactiveFormsModule,\n Validators,\n} from \"@angular/forms\";\nimport { IntlTelInputComponent } from \"../../src/intl-tel-input/angularWithUtils\";\n\n@Component({\n selector: \"app-root\",\n template: `\n
\n \n \n
\n @if (phone?.errors?.[\"required\"] && phone?.touched) {\n Phone number is required.\n } @else if (phone?.errors?.[\"invalidPhone\"] && phone?.touched) {\n {{ phone?.errors?.[\"invalidPhone\"].errorMessage }}\n } @else if (isSubmitted && fg.valid) {\n Valid number: {{ telInput.getInstance()?.getNumber() }}\n }\n
\n \n `,\n standalone: true,\n imports: [IntlTelInputComponent, ReactiveFormsModule],\n})\nexport class AppComponent implements OnInit {\n @ViewChild(\"telInput\") telInput!: IntlTelInputComponent;\n\n fg: FormGroup = new FormGroup({\n phone: new FormControl(\"\", [Validators.required]),\n });\n\n isSubmitted = false;\n\n get phone() {\n return this.fg.get(\"phone\");\n }\n\n ngOnInit(): void {\n this.phone?.valueChanges.subscribe(() => {\n this.isSubmitted = false;\n });\n }\n\n handleSubmit(): void {\n this.phone?.markAsTouched();\n if (this.fg.valid) {\n this.isSubmitted = true;\n }\n }\n}\n" }, { "path": "angular/demo/form/index.html", "content": "\n\n\n\n \n \n \n \n Angular App - Form Validation Demo\n\n\n\n

Angular Form Validation Demo

\n

A simple Angular app using reactive forms with the IntlTelInput component for phone number entry and validation.

\n

Enter a phone number and click \"Validate\" to see form validation in action.

\n \n \n\n\n\n\n" }, { "path": "angular/demo/form/main.ts", "content": "import 'zone.js';\nimport \"@angular/compiler\";\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { AppComponent } from './form.component';\n\nbootstrapApplication(AppComponent)\n .catch((err) => console.error(err));" }, { "path": "angular/demo/set-number/index.html", "content": "\n\n\n\n \n \n \n \n Angular App - Set Number Demo\n\n\n\n

Angular App - Set Number Demo

\n

A simple Angular app, using the IntlTelInput component to handle phone number entry, calling setNumber and validation.

\n

Click \"Set Number\" then click \"Validate\" to check that the angular internals have updated correctly.

\n \n \n\n\n\n\n" }, { "path": "angular/demo/set-number/main.ts", "content": "import 'zone.js';\nimport \"@angular/compiler\";\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { AppComponent } from './set-number.component';\n\nbootstrapApplication(AppComponent)\n .catch((err) => console.error(err));" }, { "path": "angular/demo/set-number/set-number.component.ts", "content": "import { Component, ViewChild } from '@angular/core';\nimport { IntlTelInputComponent, PHONE_ERROR_MESSAGES } from '../../src/intl-tel-input/angularWithUtils';\n\n@Component({\n selector: \"app-root\",\n template: `\n
\n \n \n \n @if (notice) {\n
{{ notice }}
\n }\n
\n `,\n standalone: true,\n imports: [IntlTelInputComponent]\n})\nexport class AppComponent {\n @ViewChild('telInput') telInput!: IntlTelInputComponent;\n\n isValid: boolean | null = null;\n number: string | null = null;\n errorCode: number | null = null;\n notice: string | null = null;\n\n handleNumberChange(value: string): void {\n this.number = value;\n }\n\n handleValidityChange(value: boolean): void {\n this.isValid = value;\n }\n\n handleErrorCodeChange(value: number | null): void {\n this.errorCode = value;\n }\n\n handleSetNumber(): void {\n const instance = this.telInput?.getInstance();\n if (instance) {\n instance.setNumber('+14155552671');\n }\n }\n\n handleSubmit(): void {\n if (this.isValid) {\n this.notice = `Valid number: ${this.number}`;\n } else {\n const errorMessage = PHONE_ERROR_MESSAGES[this.errorCode || 0] || \"Invalid number\";\n this.notice = `Error: ${errorMessage}`;\n }\n }\n}" }, { "path": "angular/demo/simple/index.html", "content": "\n\n\n\n \n \n \n \n Angular App - Simple Demo\n\n\n\n

Angular App - Simple Demo

\n

A simple Angular app, using the IntlTelInput component to handle phone number entry.

\n \n \n\n\n\n\n" }, { "path": "angular/demo/simple/main.ts", "content": "import 'zone.js';\nimport \"@angular/compiler\";\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { AppComponent } from './simple.component';\n\nbootstrapApplication(AppComponent)\n .catch((err) => console.error(err));" }, { "path": "angular/demo/simple/simple.component.ts", "content": "import { Component } from '@angular/core';\nimport { IntlTelInputComponent } from '../../src/intl-tel-input/angularWithUtils';\n\n@Component({\n selector: \"app-root\",\n template: `\n \n `,\n standalone: true,\n imports: [IntlTelInputComponent]\n})\nexport class AppComponent {}" }, { "path": "angular/demo/toggle-disabled/index.html", "content": "\n\n\n\n \n \n \n \n Angular App - Toggle disabled prop Demo\n\n\n\n

Angular App - Toggle disabled prop Demo

\n

A simple Angular app, using the IntlTelInput component to show it toggle.

\n

Click the button to enable/disable component.

\n \n \n\n\n\n\n" }, { "path": "angular/demo/toggle-disabled/main.ts", "content": "import 'zone.js';\nimport \"@angular/compiler\";\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { AppComponent } from './toggle-disabled.component';\n\nbootstrapApplication(AppComponent)\n .catch((err) => console.error(err));" }, { "path": "angular/demo/toggle-disabled/toggle-disabled.component.ts", "content": "import { Component } from '@angular/core';\nimport { IntlTelInputComponent } from '../../src/intl-tel-input/angularWithUtils';\n\n@Component({\n selector: \"app-root\",\n template: `\n
\n \n \n
\n `,\n standalone: true,\n imports: [IntlTelInputComponent]\n})\nexport class AppComponent {\n isDisabled: boolean = false;\n\n toggleDisabled(): void {\n this.isDisabled = !this.isDisabled;\n }\n}" }, { "path": "angular/demo/validation/index.html", "content": "\n\n\n\n \n \n \n \n Angular App - Validation Demo\n\n\n\n

Angular App - Validation Demo

\n

A simple Angular app, using the IntlTelInput component to handle phone number entry and validation.

\n

Enter a phone number below and click \"Validate\".

\n \n \n\n\n\n\n" }, { "path": "angular/demo/validation/main.ts", "content": "import 'zone.js';\nimport \"@angular/compiler\";\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { AppComponent } from './validation.component';\n\nbootstrapApplication(AppComponent)\n .catch((err) => console.error(err));" }, { "path": "angular/demo/validation/validation.component.ts", "content": "import { Component } from '@angular/core';\nimport { IntlTelInputComponent, PHONE_ERROR_MESSAGES } from '../../src/intl-tel-input/angularWithUtils';\n\n@Component({\n selector: \"app-root\",\n template: `\n
\n \n \n @if (notice) {\n
{{ notice }}
\n }\n
\n `,\n standalone: true,\n imports: [IntlTelInputComponent]\n})\nexport class AppComponent {\n isValid: boolean | null = null;\n number: string | null = null;\n errorCode: number | null = null;\n notice: string | null = null;\n\n handleNumberChange(value: string): void {\n this.number = value;\n }\n\n handleValidityChange(value: boolean): void {\n this.isValid = value;\n }\n\n handleErrorCodeChange(value: number | null): void {\n this.errorCode = value;\n }\n\n handleSubmit(): void {\n if (this.isValid) {\n this.notice = `Valid number: ${this.number}`;\n } else {\n const errorMessage = PHONE_ERROR_MESSAGES[this.errorCode || 0] || \"Invalid number\";\n this.notice = `Error: ${errorMessage}`;\n }\n }\n}" }, { "path": "angular/src/intl-tel-input/angular.ts", "content": "import intlTelInput from \"../intl-tel-input\";\n//* Keep the TS imports separate, as the above line gets substituted in the angularWithUtils build process.\nimport { Iti } from \"../intl-tel-input\";\nimport {\n Component,\n Input,\n OnDestroy,\n ViewChild,\n ElementRef,\n Output,\n EventEmitter,\n forwardRef,\n AfterViewInit,\n OnChanges,\n SimpleChanges,\n} from \"@angular/core\";\nimport {\n ControlValueAccessor,\n NG_VALUE_ACCESSOR,\n NG_VALIDATORS,\n Validator,\n AbstractControl,\n ValidationErrors,\n} from \"@angular/forms\";\nimport { SomeOptions } from \"../modules/types/public-api\";\n\nexport { intlTelInput };\n\nexport const PHONE_ERROR_MESSAGES: string[] = [\n \"invalid\",\n \"invalid-country-code\",\n \"too-short\",\n \"too-long\",\n \"invalid-format\",\n];\n\n@Component({\n selector: \"intl-tel-input\",\n standalone: true,\n template: `\n \n `,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => IntlTelInputComponent),\n multi: true,\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => IntlTelInputComponent),\n multi: true,\n },\n ],\n})\nexport class IntlTelInputComponent\n implements\n AfterViewInit,\n OnDestroy,\n OnChanges,\n ControlValueAccessor,\n Validator\n{\n @ViewChild(\"inputRef\", { static: true })\n inputRef!: ElementRef;\n\n @Input() initialValue?: string;\n @Input() usePreciseValidation: boolean = false;\n @Input() inputProps: Record = {};\n @Input() disabled: boolean = false;\n @Input() initOptions?: SomeOptions;\n\n @Output() numberChange = new EventEmitter();\n @Output() countryChange = new EventEmitter();\n @Output() validityChange = new EventEmitter();\n @Output() errorCodeChange = new EventEmitter();\n @Output() blur = new EventEmitter();\n @Output() focus = new EventEmitter();\n @Output() keydown = new EventEmitter();\n @Output() keyup = new EventEmitter();\n @Output() paste = new EventEmitter();\n @Output() click = new EventEmitter();\n\n private iti?: Iti;\n private appliedInputPropKeys = new Set();\n\n private lastEmittedNumber?: string;\n private lastEmittedCountry?: string;\n private lastEmittedValidity?: boolean;\n private lastEmittedErrorCode?: number | null;\n\n private countryChangeHandler = () => this.handleInput();\n // eslint-disable-next-line class-methods-use-this\n private onChange: (value: string) => void = () => {};\n // eslint-disable-next-line class-methods-use-this\n private onTouched: () => void = () => {};\n // eslint-disable-next-line class-methods-use-this\n private onValidatorChange: () => void = () => {};\n\n ngAfterViewInit() {\n if (this.inputRef.nativeElement) {\n this.iti = intlTelInput(this.inputRef.nativeElement, this.initOptions);\n }\n\n this.inputRef.nativeElement.addEventListener(\n \"countrychange\",\n this.countryChangeHandler,\n );\n\n this.applyInputProps();\n\n if (this.initialValue) {\n this.iti?.setNumber(this.initialValue);\n }\n\n if (this.disabled) {\n this.iti?.setDisabled(this.disabled);\n }\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes[\"disabled\"]) {\n this.iti?.setDisabled(this.disabled);\n }\n\n if (changes[\"inputProps\"]) {\n this.applyInputProps();\n }\n }\n\n handleInput() {\n if (!this.iti) return;\n\n const num = this.iti.getNumber() || \"\";\n const countryIso = this.iti.getSelectedCountryData().iso2 || \"\";\n\n let hasChanged = false;\n if (num !== this.lastEmittedNumber) {\n this.lastEmittedNumber = num;\n this.numberChange.emit(num);\n this.onChange(num);\n hasChanged = true;\n }\n\n if (countryIso !== this.lastEmittedCountry) {\n this.lastEmittedCountry = countryIso;\n this.countryChange.emit(countryIso);\n hasChanged = true;\n }\n\n const isValid = this.usePreciseValidation\n ? this.iti.isValidNumberPrecise()\n : this.iti.isValidNumber();\n\n const errorCode = isValid ? null : this.iti.getValidationError();\n\n if (isValid !== this.lastEmittedValidity) {\n this.lastEmittedValidity = isValid;\n this.validityChange.emit(isValid);\n hasChanged = true;\n }\n\n if (errorCode !== this.lastEmittedErrorCode) {\n this.lastEmittedErrorCode = errorCode;\n this.errorCodeChange.emit(errorCode);\n hasChanged = true;\n }\n\n if (hasChanged) {\n this.onValidatorChange();\n }\n }\n\n handleBlur(event: FocusEvent) {\n this.onTouched();\n this.blur.emit(event);\n }\n\n handleFocus(event: FocusEvent) {\n this.focus.emit(event);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n this.keydown.emit(event);\n }\n\n handleKeyUp(event: KeyboardEvent) {\n this.keyup.emit(event);\n }\n\n handlePaste(event: ClipboardEvent) {\n this.paste.emit(event);\n }\n\n handleClick(event: MouseEvent) {\n this.click.emit(event);\n }\n\n /**\n * This method must be called in `ngAfterViewInit` or later lifecycle hooks,\n * not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.\n */\n getInstance(): Iti | null {\n return this.iti;\n }\n\n /**\n * This method must be called in `ngAfterViewInit` or later lifecycle hooks,\n * not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.\n */\n getInput(): HTMLInputElement | null {\n return this.inputRef.nativeElement;\n }\n\n ngOnDestroy() {\n this.iti?.destroy();\n\n this.inputRef.nativeElement.removeEventListener(\n \"countrychange\",\n this.countryChangeHandler,\n );\n }\n\n private applyInputProps(): void {\n const currentKeys = new Set();\n Object.entries(this.inputProps).forEach(([key, value]) => {\n currentKeys.add(key);\n this.inputRef.nativeElement.setAttribute(key, value);\n });\n this.appliedInputPropKeys.forEach((key) => {\n if (!currentKeys.has(key)) {\n this.inputRef.nativeElement.removeAttribute(key);\n }\n });\n this.appliedInputPropKeys = currentKeys;\n }\n\n // ============ ControlValueAccessor Implementation ============\n\n writeValue(value: string | null): void {\n if (this.iti) {\n this.iti.setNumber(value || \"\");\n }\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.iti?.setDisabled(isDisabled);\n }\n\n // ============ Validator Implementation ============\n\n validate(control: AbstractControl): ValidationErrors | null {\n if (!control.value || !this.iti) {\n return null;\n }\n\n const isValid = this.usePreciseValidation\n ? this.iti.isValidNumberPrecise()\n : this.iti.isValidNumber();\n\n if (isValid) {\n return null;\n }\n\n const errorCode = this.iti.getValidationError();\n return {\n invalidPhone: {\n errorCode,\n errorMessage: PHONE_ERROR_MESSAGES[errorCode] ?? \"unknown\",\n },\n };\n }\n\n registerOnValidatorChange(fn: () => void): void {\n this.onValidatorChange = fn;\n }\n}\n" }, { "path": "angular/src/intl-tel-input/angularWithUtils.ts", "content": "//* THIS FILE IS AUTO-GENERATED. DO NOT EDIT.\nimport intlTelInput from \"./intlTelInputWithUtils\";\n//* Keep the TS imports separate, as the above line gets substituted in the angularWithUtils build process.\nimport { Iti } from \"../intl-tel-input\";\nimport {\n Component,\n Input,\n OnDestroy,\n ViewChild,\n ElementRef,\n Output,\n EventEmitter,\n forwardRef,\n AfterViewInit,\n OnChanges,\n SimpleChanges,\n} from \"@angular/core\";\nimport {\n ControlValueAccessor,\n NG_VALUE_ACCESSOR,\n NG_VALIDATORS,\n Validator,\n AbstractControl,\n ValidationErrors,\n} from \"@angular/forms\";\nimport { SomeOptions } from \"../modules/types/public-api\";\n\nexport { intlTelInput };\n\nexport const PHONE_ERROR_MESSAGES: string[] = [\n \"invalid\",\n \"invalid-country-code\",\n \"too-short\",\n \"too-long\",\n \"invalid-format\",\n];\n\n@Component({\n selector: \"intl-tel-input\",\n standalone: true,\n template: `\n \n `,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => IntlTelInputComponent),\n multi: true,\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => IntlTelInputComponent),\n multi: true,\n },\n ],\n})\nexport class IntlTelInputComponent\n implements\n AfterViewInit,\n OnDestroy,\n OnChanges,\n ControlValueAccessor,\n Validator\n{\n @ViewChild(\"inputRef\", { static: true })\n inputRef!: ElementRef;\n\n @Input() initialValue?: string;\n @Input() usePreciseValidation: boolean = false;\n @Input() inputProps: Record = {};\n @Input() disabled: boolean = false;\n @Input() initOptions?: SomeOptions;\n\n @Output() numberChange = new EventEmitter();\n @Output() countryChange = new EventEmitter();\n @Output() validityChange = new EventEmitter();\n @Output() errorCodeChange = new EventEmitter();\n @Output() blur = new EventEmitter();\n @Output() focus = new EventEmitter();\n @Output() keydown = new EventEmitter();\n @Output() keyup = new EventEmitter();\n @Output() paste = new EventEmitter();\n @Output() click = new EventEmitter();\n\n private iti?: Iti;\n private appliedInputPropKeys = new Set();\n\n private lastEmittedNumber?: string;\n private lastEmittedCountry?: string;\n private lastEmittedValidity?: boolean;\n private lastEmittedErrorCode?: number | null;\n\n private countryChangeHandler = () => this.handleInput();\n // eslint-disable-next-line class-methods-use-this\n private onChange: (value: string) => void = () => {};\n // eslint-disable-next-line class-methods-use-this\n private onTouched: () => void = () => {};\n // eslint-disable-next-line class-methods-use-this\n private onValidatorChange: () => void = () => {};\n\n ngAfterViewInit() {\n if (this.inputRef.nativeElement) {\n this.iti = intlTelInput(this.inputRef.nativeElement, this.initOptions);\n }\n\n this.inputRef.nativeElement.addEventListener(\n \"countrychange\",\n this.countryChangeHandler,\n );\n\n this.applyInputProps();\n\n if (this.initialValue) {\n this.iti?.setNumber(this.initialValue);\n }\n\n if (this.disabled) {\n this.iti?.setDisabled(this.disabled);\n }\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes[\"disabled\"]) {\n this.iti?.setDisabled(this.disabled);\n }\n\n if (changes[\"inputProps\"]) {\n this.applyInputProps();\n }\n }\n\n handleInput() {\n if (!this.iti) return;\n\n const num = this.iti.getNumber() || \"\";\n const countryIso = this.iti.getSelectedCountryData().iso2 || \"\";\n\n let hasChanged = false;\n if (num !== this.lastEmittedNumber) {\n this.lastEmittedNumber = num;\n this.numberChange.emit(num);\n this.onChange(num);\n hasChanged = true;\n }\n\n if (countryIso !== this.lastEmittedCountry) {\n this.lastEmittedCountry = countryIso;\n this.countryChange.emit(countryIso);\n hasChanged = true;\n }\n\n const isValid = this.usePreciseValidation\n ? this.iti.isValidNumberPrecise()\n : this.iti.isValidNumber();\n\n const errorCode = isValid ? null : this.iti.getValidationError();\n\n if (isValid !== this.lastEmittedValidity) {\n this.lastEmittedValidity = isValid;\n this.validityChange.emit(isValid);\n hasChanged = true;\n }\n\n if (errorCode !== this.lastEmittedErrorCode) {\n this.lastEmittedErrorCode = errorCode;\n this.errorCodeChange.emit(errorCode);\n hasChanged = true;\n }\n\n if (hasChanged) {\n this.onValidatorChange();\n }\n }\n\n handleBlur(event: FocusEvent) {\n this.onTouched();\n this.blur.emit(event);\n }\n\n handleFocus(event: FocusEvent) {\n this.focus.emit(event);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n this.keydown.emit(event);\n }\n\n handleKeyUp(event: KeyboardEvent) {\n this.keyup.emit(event);\n }\n\n handlePaste(event: ClipboardEvent) {\n this.paste.emit(event);\n }\n\n handleClick(event: MouseEvent) {\n this.click.emit(event);\n }\n\n /**\n * This method must be called in `ngAfterViewInit` or later lifecycle hooks,\n * not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.\n */\n getInstance(): Iti | null {\n return this.iti;\n }\n\n /**\n * This method must be called in `ngAfterViewInit` or later lifecycle hooks,\n * not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.\n */\n getInput(): HTMLInputElement | null {\n return this.inputRef.nativeElement;\n }\n\n ngOnDestroy() {\n this.iti?.destroy();\n\n this.inputRef.nativeElement.removeEventListener(\n \"countrychange\",\n this.countryChangeHandler,\n );\n }\n\n private applyInputProps(): void {\n const currentKeys = new Set();\n Object.entries(this.inputProps).forEach(([key, value]) => {\n currentKeys.add(key);\n this.inputRef.nativeElement.setAttribute(key, value);\n });\n this.appliedInputPropKeys.forEach((key) => {\n if (!currentKeys.has(key)) {\n this.inputRef.nativeElement.removeAttribute(key);\n }\n });\n this.appliedInputPropKeys = currentKeys;\n }\n\n // ============ ControlValueAccessor Implementation ============\n\n writeValue(value: string | null): void {\n if (this.iti) {\n this.iti.setNumber(value || \"\");\n }\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.iti?.setDisabled(isDisabled);\n }\n\n // ============ Validator Implementation ============\n\n validate(control: AbstractControl): ValidationErrors | null {\n if (!control.value || !this.iti) {\n return null;\n }\n\n const isValid = this.usePreciseValidation\n ? this.iti.isValidNumberPrecise()\n : this.iti.isValidNumber();\n\n if (isValid) {\n return null;\n }\n\n const errorCode = this.iti.getValidationError();\n return {\n invalidPhone: {\n errorCode,\n errorMessage: PHONE_ERROR_MESSAGES[errorCode] ?? \"unknown\",\n },\n };\n }\n\n registerOnValidatorChange(fn: () => void): void {\n this.onValidatorChange = fn;\n }\n}\n" }, { "path": "angular/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"esModuleInterop\": true, //* Required for react (etc) default imports.\n \"experimentalDecorators\": true, //* Required for angular decorators.\n \"emitDecoratorMetadata\": true, //* Required for angular decorators.\n \"declaration\": true, //* Generate .d.ts files.\n \"outDir\": \"build/temp\",\n \"declarationDir\": \"build/types\",\n \"rootDir\": \"./src\",\n \"allowJs\": true, // allow importing .mjs files e.g. i18n files\n },\n \"angularCompilerOptions\": {\n \"strictTemplates\": true,\n },\n \"include\": [\n \"src/intl-tel-input/angular.ts\",\n \"src/intl-tel-input/angularWithUtils.ts\",\n \"src/intl-tel-input/i18n/index.ts\",\n ],\n}" }, { "path": "build.js", "content": "/* eslint-disable no-undef */\n/* eslint-disable @typescript-eslint/no-var-requires */\nconst { build } = require(\"esbuild\");\nconst packageJson = require(\"./package.json\");\n\nconst getBanner = (moduleName) =>\n \"/*\\n\" +\n ` * International Telephone Input v${packageJson.version}\\n` +\n ` * ${packageJson.repository.url}\\n` +\n \" * Licensed under the MIT license\\n\" +\n \" */\\n\\n\" +\n // we can remove this UMD hack once it is supported by esbuild: https://github.com/evanw/esbuild/issues/507\n \"// UMD\\n\" +\n \"(function(factory) {\\n\" +\n \" if (typeof module === 'object' && module.exports) {\\n\" +\n \" module.exports = factory();\\n\" +\n \" } else {\\n\" +\n ` window.${moduleName} = factory();\\n` +\n \" }\\n\" +\n \"}(() => {\\n\";\n\nconst footer =\n \"\\n// UMD\\n\" +\n \" return factoryOutput.default;\\n\" +\n \"}));\";\n\nconst shared = {\n bundle: true,\n logLevel: \"info\",\n format: \"iife\",\n globalName: \"factoryOutput\",\n footer: {\n js: footer,\n },\n define: {\n \"process.env.VERSION\": `\"${packageJson.version}\"`,\n },\n};\n\n//* build/js/intlTelInput.js\nbuild({\n ...shared,\n banner: {\n js: getBanner(\"intlTelInput\"),\n },\n entryPoints: [\"src/js/intl-tel-input.ts\"],\n minify: false,\n outfile: \"build/js/intlTelInput.js\",\n});\n\n//* build/js/intlTelInput.min.js\nbuild({\n ...shared,\n banner: {\n js: getBanner(\"intlTelInput\"),\n },\n entryPoints: [\"src/js/intl-tel-input.ts\"],\n minify: true,\n outfile: \"build/js/intlTelInput.min.js\",\n});\n\n//* build/js/data.js\nbuild({\n ...shared,\n banner: {\n js: getBanner(\"allCountries\"),\n },\n entryPoints: [\"src/js/intl-tel-input/data.ts\"],\n minify: false,\n outfile: \"build/js/data.js\",\n});\n\n//* build/js/data.min.js\nbuild({\n ...shared,\n banner: {\n js: getBanner(\"allCountries\"),\n },\n entryPoints: [\"src/js/intl-tel-input/data.ts\"],\n minify: true,\n outfile: \"build/js/data.min.js\",\n});\n\n//* build/js/intlTelInputWithUtils.js\nbuild({\n ...shared,\n banner: {\n js: getBanner(\"intlTelInput\"),\n },\n entryPoints: [\"src/js/intl-tel-input/intlTelInputWithUtils.ts\"],\n minify: false,\n outfile: \"build/js/intlTelInputWithUtils.js\",\n});\n\n//* build/js/intlTelInputWithUtils.min.js\nbuild({\n ...shared,\n banner: {\n js: getBanner(\"intlTelInput\"),\n },\n entryPoints: [\"src/js/intl-tel-input/intlTelInputWithUtils.ts\"],\n minify: true,\n outfile: \"build/js/intlTelInputWithUtils.min.js\",\n});\n\n//* build/js/i18n\nbuild({\n charset: \"utf8\",\n entryPoints: [\"src/js/intl-tel-input/i18n/**/*.ts\"],\n outdir: \"build/js/i18n\",\n});" }, { "path": "composer.json", "content": "{\n \"name\": \"jackocnr/intl-tel-input\",\n \"version\": \"26.8.1\",\n \"description\": \"A JavaScript plugin for entering and validating international telephone numbers\",\n \"keywords\": [\n \"international\",\n \"i18n\",\n \"country\",\n \"dial\",\n \"code\",\n \"telephone\",\n \"tel\",\n \"number\",\n \"mobile\",\n \"input\",\n \"flag\"\n ],\n \"homepage\": \"https://github.com/jackocnr/intl-tel-input\",\n \"type\": \"library\",\n \"license\": \"MIT\",\n \"authors\": [\n {\n \"name\": \"Jack O'Connor\",\n \"homepage\": \"http://jackocnr.com\"\n }\n ],\n \"minimum-stability\": \"stable\",\n \"prefer-stable\": true\n}\n" }, { "path": "cspell.json", "content": "{\n \"$schema\": \"https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json\",\n \"version\": \"0.2\",\n \"allowCompoundWords\": true,\n \"maxNumberOfProblems\": 1000,\n // \"checkLimit\": 5000, //! Setting that is in the vscode eextension not in the cli\n // \"diagnosticLevel\": \"Warning\", //! Setting that is in the vscode eextension not in the cli\n \"language\": \"en_GB\",\n \"useGitignore\": true,\n \"minWordLength\": 4,\n \"dictionaries\": [\n \"css\",\n \"en_GB\",\n \"html\",\n \"ignore\",\n \"javascript\",\n \"javascriptreact\",\n \"json\",\n \"jsonc\",\n \"markdown\",\n \"plaintext\",\n \"scss\",\n \"text\",\n \"typescript\",\n \"typescriptreact\",\n \"COBOL\",\n \"ACUCOBOL\"\n ],\n \"dictionaryDefinitions\": [],\n \"import\": [],\n \"ignorePaths\": [\n //* Directories\n \"**/.git/**\",\n \"**/build/**\",\n \"**/node_modules/**\",\n \"**/vscode-extension/**\",\n \"**/.vscode/**\",\n \"**/.scraps/**\",\n \"**/third_party/**\",\n //* Files\n \"**/package-lock.json\",\n \"**/yarn.lock\",\n \"**/Gemfile\",\n \"**/cspell.json\",\n \"**/.env\",\n //* File Extensions\n \"**/*.svg\",\n //* Specific files and folders\n \"src/js/intl-tel-input/data.ts\",\n \"react/demo/validation-bundle.js\",\n \"react/demo/simple-bundle.js\",\n \"react/demo/toggle-disabled.js\"\n ],\n \"ignoreWords\": [],\n \"flagWords\": [],\n \"words\": [\n \"Åland\",\n \"AYTF\",\n \"dropup\",\n \"evenizer\",\n \"FAYT\",\n \"geoip\",\n \"iife\",\n \"ipapi\",\n \"jackocnr\",\n \"jsfast\",\n \"librsvg\",\n \"mledoze's\",\n \"NANP\",\n \"normalised\",\n \"optipng\",\n \"sass\",\n \"tmpl\",\n \"vars\",\n \"Veaudry\"\n ]\n}\n" }, { "path": "demo.html", "content": "\n\n \n \n \n International Telephone Input\n \n \n \n\n \n

International Telephone Input

\n
\n \n \n \n \n
\n\n \n \n \n\n" }, { "path": "functions/_middleware.js", "content": "/**\n * Cloudflare Workers middleware to inject a script tag with the user's geographical information (window.__IS_EUROPE)\n */\n\nconst EUROPE = new Set([\n // EU members\n \"AT\",\"BE\",\"BG\",\"HR\",\"CY\",\"CZ\",\"DK\",\"EE\",\"FI\",\"FR\",\n \"DE\",\"GR\",\"HU\",\"IE\",\"IT\",\"LV\",\"LT\",\"LU\",\"MT\",\"NL\",\n \"PL\",\"PT\",\"RO\",\"SK\",\"SI\",\"ES\",\"SE\",\n // EEA + other European countries\n \"GB\",\"NO\",\"IS\",\"LI\",\"CH\",\"AL\",\"AD\",\"BA\",\"BY\",\"GE\",\n \"MD\",\"ME\",\"MK\",\"MC\",\"RS\",\"SM\",\"TR\",\"UA\",\"VA\",\n]);\n\nclass GeoInjector {\n constructor(isEurope) {\n this.isEurope = isEurope;\n }\n\n element(element) {\n element.prepend(\n ``,\n { html: true },\n );\n }\n}\n\nexport async function onRequest(context) {\n const country = context.request.cf?.country || \"\";\n const isEurope = EUROPE.has(country);\n const response = await context.next();\n\n const contentType = response.headers.get(\"content-type\") || \"\";\n if (!contentType.includes(\"text/html\")) {\n return response;\n }\n\n // eslint-disable-next-line no-undef\n return new HTMLRewriter()\n .on(\"head\", new GeoInjector(isEurope))\n .transform(response);\n}" }, { "path": "grunt/bump.js", "content": "module.exports = function(grunt) {\n return {\n options: {\n files: ['package.json', 'package-lock.json', 'composer.json'],\n updateConfigs: ['package'],\n commitFiles: ['-a'],\n pushTo: 'origin'\n }\n };\n};\n" }, { "path": "grunt/clean.js", "content": "module.exports = function(grunt) {\n return {\n buildCss: ['build/css/*'],\n buildImg: ['build/img/*'],\n buildJs: ['build/js/*'],\n\n // Used by build:jsfast/watch. Preserves build/js/utils.js because\n // src/js/intl-tel-input/utils.js is a symlink to it.\n buildJsKeepUtils: ['build/js/*', '!build/js/utils.js'],\n\n reactBuild: ['react/build/*'],\n vueBuild: ['vue/build/*'],\n angularBuild: ['angular/build/*'],\n svelteBuild: ['svelte/build/*'],\n\n // Intermediate artifacts used by the build/minify/replace steps.\n tmpIntermediates: ['tmp/built.min.js', 'tmp/one.min.js'],\n\n // build:utils output\n utils: ['build/js/utils.js'],\n\n // Convenience target for top-level build.\n allBuild: [\n 'build/css/*',\n 'build/img/*',\n 'build/js/*',\n 'react/build/*',\n 'vue/build/*',\n 'angular/build/*',\n 'svelte/build/*',\n 'tmp/built.min.js',\n 'tmp/one.min.js',\n ],\n };\n};\n" }, { "path": "grunt/closure-compiler.js", "content": "module.exports = function (grunt) {\n return {\n utils: {\n files: {\n \"build/js/utils.js\": \"src/js/utils.js\",\n },\n options: {\n js: [\n \"node_modules/google-closure-library/**.js\",\n \"third_party/libphonenumber/javascript/i18n/phonenumbers/**.js\",\n \"!third_party/libphonenumber/javascript/i18n/phonenumbers/demo-compiled.js\",\n \"!third_party/libphonenumber/javascript/i18n/phonenumbers/metadatafortesting.js\",\n \"!third_party/libphonenumber/javascript/i18n/phonenumbers/metadatalite.js\",\n \"!third_party/libphonenumber/javascript/i18n/phonenumbers/regioncodefortesting.js\",\n \"!third_party/libphonenumber/javascript/i18n/phonenumbers/**_test.js\",\n ],\n entry_point: \"goog:i18n.phonenumbers.demo\",\n compilation_level: \"ADVANCED_OPTIMIZATIONS\",\n output_wrapper: \"(function () {%output%})();\\nconst globalContext = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this;\\nconst utils = globalContext.intlTelInputUtilsTemp;\\ndelete globalContext.intlTelInputUtilsTemp;\\nexport default utils;\",\n },\n },\n };\n};\n" }, { "path": "grunt/connect.js", "content": "module.exports = function(grunt) {\n return {\n test: {\n port: 8000\n }\n };\n};\n" }, { "path": "grunt/cssmin.js", "content": "module.exports = function(grunt) {\n return {\n target: {\n files: {\n 'build/css/intlTelInput.min.css': 'build/css/intlTelInput.css',\n 'build/css/intlTelInput-no-assets.min.css': 'build/css/intlTelInput-no-assets.css'\n }\n }\n };\n};\n" }, { "path": "grunt/generate-sprite.js", "content": "const fs = require('fs');\nconst path = require('path');\n// ts-node allows us to require TypeScript files\nrequire(\"ts-node\").register();\nconst supportedCountries = require('../src/js/intl-tel-input/data.ts').default;\n\nmodule.exports = function(grunt) {\n grunt.registerTask('generate-sprite', async function() {\n const done = this.async();\n // Require \"sharp\" on demand, else Travis was breaking with \"Error: Could not load the \"sharp\" module using the linux-x64 runtime\" when Travis doesn't even use this task\n const sharp = require('sharp');\n // ensure /build/img/ dir exists before trying to write to it\n const buildImgDir = path.join(__dirname, '..', 'build', 'img');\n if (!fs.existsSync(buildImgDir)) {\n fs.mkdirSync(buildImgDir, { recursive: true });\n }\n\n const supportedCountryFilenames = supportedCountries.map(country => `${country.iso2}.svg`).sort();\n\n // customise this number to change the size of the flags (NOTE: flags are 4x3 ratio)\n // must be a multiple of 3\n const TARGET_HEIGHT = 12;\n\n const TARGET_WIDTH = (TARGET_HEIGHT / 3) * 4;\n const FLAG_MARGIN = 0;\n\n const specialCases = {\n 'ac.svg': 'sh-ac.svg', // Ascension Island\n // Add more special cases here if needed\n };\n\n const handleSpecialCases = (filename) => specialCases[filename] || filename;\n\n const generateFlagMetadataAndSprite = async () => {\n try {\n const fileWarning = \"//* THIS FILE IS AUTO-GENERATED. DO NOT EDIT.\";\n const flagsPath = 'node_modules/flag-icons/flags/4x3';\n const outputFile = 'src/css/_metadata.scss';\n const spriteFile1xWebP = \"build/img/flags.webp\";\n const spriteFile2xWebP = \"build/img/flags@2x.webp\";\n const spriteFile1xPNG = \"build/img/flags.png\";\n const spriteFile2xPNG = \"build/img/flags@2x.png\";\n let outputFileContent = '';\n\n let totalWidth = supportedCountryFilenames.length * (TARGET_WIDTH + FLAG_MARGIN) - FLAG_MARGIN;\n const maxHeight = TARGET_HEIGHT;\n\n let flagsMetadata = \"$flags: (\\n\";\n let currentOffset = 0;\n\n const scaledImages1x = [];\n const scaledImages2x = [];\n\n for (const filename of supportedCountryFilenames) {\n const countryCode = filename.split('.')[0];\n const processedFilename = handleSpecialCases(filename);\n const imagePath = path.join(flagsPath, processedFilename);\n const imagePathExists = fs.existsSync(imagePath);\n\n if (!imagePathExists) {\n console.log(`WARNING: Missing flag image: ${imagePath} - skipping this flag.`);\n break;\n }\n\n const svgBuffer = fs.readFileSync(imagePath);\n\n const pngBuffer1x = await sharp(svgBuffer)\n .resize({\n width: TARGET_WIDTH,\n height: TARGET_HEIGHT,\n fit: sharp.fit.fill,\n position: sharp.strategy.centre\n })\n .ensureAlpha()\n .png({ compressionLevel: 9, adaptiveFiltering: true, force: true })\n .toBuffer();\n\n const pngBuffer2x = await sharp(svgBuffer)\n .resize({\n width: TARGET_WIDTH * 2,\n height: TARGET_HEIGHT * 2,\n fit: sharp.fit.fill,\n position: sharp.strategy.centre\n })\n .ensureAlpha()\n .png({ compressionLevel: 9, adaptiveFiltering: true, force: true })\n .toBuffer();\n\n scaledImages1x.push({\n buffer: pngBuffer1x,\n offset: currentOffset\n });\n\n scaledImages2x.push({\n buffer: pngBuffer2x,\n offset: currentOffset * 2\n });\n\n flagsMetadata += ` ${countryCode}: (\\n`;\n flagsMetadata += ` offset: ${-currentOffset}px,\\n`;\n flagsMetadata += \" ),\\n\";\n\n currentOffset += TARGET_WIDTH + FLAG_MARGIN;\n }\n flagsMetadata += \");\";\n\n // Create 1x sprites\n await createSprite(scaledImages1x, totalWidth, maxHeight, spriteFile1xWebP, 'webp');\n await createSprite(scaledImages1x, totalWidth, maxHeight, spriteFile1xPNG, 'png');\n console.log(`1x combined images saved as ${spriteFile1xWebP} and ${spriteFile1xPNG}`);\n\n // Create 2x sprites\n await createSprite(scaledImages2x, totalWidth * 2, maxHeight * 2, spriteFile2xWebP, 'webp');\n await createSprite(scaledImages2x, totalWidth * 2, maxHeight * 2, spriteFile2xPNG, 'png');\n console.log(`2x combined images saved as ${spriteFile2xWebP} and ${spriteFile2xPNG}`);\n\n // Generate SCSS content\n outputFileContent += fileWarning + \"\\n\\n\";\n\n outputFileContent += `$flags-sprite-1x: (\\n`;\n outputFileContent += ` height: ${maxHeight}px,\\n`;\n outputFileContent += ` width: ${totalWidth}px,\\n`;\n outputFileContent += \");\\n\\n\";\n\n outputFileContent += `$flag-width: ${TARGET_WIDTH}px;\\n\\n`;\n outputFileContent += `$flag-height: ${TARGET_HEIGHT}px;\\n\\n`;\n\n outputFileContent += flagsMetadata + \"\\n\\n\";\n outputFileContent += fileWarning + \"\\n\";\n\n fs.writeFileSync(outputFile, outputFileContent);\n console.log('SCSS file generated successfully.');\n done();\n } catch (error) {\n console.error('Error:', error);\n done(error);\n }\n };\n\n const createSprite = async (images, width, height, outputFile, format) => {\n const combinedImage = sharp({\n create: {\n width: width,\n height: height,\n channels: 4,\n background: { r: 0, g: 0, b: 0, alpha: 0 }\n }\n });\n\n const compositeOperations = images.map((img) => ({\n input: img.buffer,\n left: img.offset,\n top: 0\n }));\n\n let processedImage = combinedImage.composite(compositeOperations);\n\n if (format === 'webp') {\n processedImage = processedImage.webp({\n quality: 100,\n lossless: true,\n effort: 6\n });\n } else if (format === 'png') {\n processedImage = processedImage.png({\n compressionLevel: 9,\n adaptiveFiltering: true,\n force: true\n });\n }\n\n await processedImage.toFile(outputFile);\n };\n\n generateFlagMetadataAndSprite();\n });\n};" }, { "path": "grunt/replace.js", "content": "module.exports = function(grunt) {\n return {\n\n /**************\n * Update version numbers\n **************/\n siteDocs: {\n options: {\n patterns: [\n {\n match: /intl-tel-input@([0-9.]+)\\/build/g,\n replacement: 'intl-tel-input@<%= package.version %>/build'\n }\n ]\n },\n files: {\n 'site/src/docs/markdown/options.md': 'site/src/docs/markdown/options.md',\n 'site/src/docs/markdown/getting_started.md': 'site/src/docs/markdown/getting_started.md',\n }\n },\n issueTemplate: {\n options: {\n patterns: [\n {\n match: /the latest version \\(v[0-9]+\\.[0-9]+\\.[0-9]+\\)/,\n replacement: 'the latest version (v<%= package.version %>)'\n }\n ]\n },\n files: {\n '.github/ISSUE_TEMPLATE/1_bug_report.yml': '.github/ISSUE_TEMPLATE/1_bug_report.yml'\n }\n },\n // grunt bump already updates the version number at the beginning of package-lock, but not the \"inner\" one (aprx line 9), so do that here\n packageLockInner: {\n options: {\n patterns: [\n {\n match: /\"name\": \"intl-tel-input\",\\n \"version\": \"[0-9]+\\.[0-9]+\\.[0-9]+\"/,\n replacement: '\"name\": \"intl-tel-input\",\\n \"version\": \"<%= package.version %>\"'\n }\n ]\n },\n files: {\n 'package-lock.json': 'package-lock.json'\n }\n },\n\n /**************\n * Generate reactWithUtils.tsx\n **************/\n reactWithUtils: {\n options: {\n patterns: [\n {\n match: /import intlTelInput from \\\"\\.\\.\\/intl\\-tel\\-input\\\"\\;/,\n replacement: '//* THIS FILE IS AUTO-GENERATED. DO NOT EDIT.\\nimport intlTelInput from \"./intlTelInputWithUtils\";'\n }\n ]\n },\n files: {\n 'react/src/intl-tel-input/reactWithUtils.tsx': 'react/src/intl-tel-input/react.tsx',\n }\n },\n\n /**************\n * Generate vue/src/IntlTelInputWithUtils.vue\n **************/\n vueWithUtils: {\n options: {\n patterns: [\n {\n match: /\\\n\n\n" }, { "path": "react/demo/simple/SimpleApp.tsx", "content": "import React, { ReactElement } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport IntlTelInput from \"../../src/intl-tel-input/reactWithUtils\";\n\nconst App = (): ReactElement => (\n \n);\n\nconst container = document.getElementById(\"app\");\nif (container) {\n const root = createRoot(container);\n root.render();\n}" }, { "path": "react/demo/simple/simple.html", "content": "\n\n\n\n \n \n React App - Simple Demo\n \n \n\n\n\n

React App - Simple Demo

\n

A simple react app, using the IntlTelInput component to handle phone number entry.

\n
\n \n\n\n" }, { "path": "react/demo/toggle-disabled/ToggleDisabledApp.tsx", "content": "import React, { useState, ReactElement } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport IntlTelInput from \"../../src/intl-tel-input/reactWithUtils\";\n\nconst App = (): ReactElement => {\n const [isDisabled, setIsDisabled] = useState(true);\n\n const toggleDisabled = () => setIsDisabled(!isDisabled);\n\n return (\n
\n \n \n \n );\n};\n\nconst container = document.getElementById(\"app\");\nif (container) {\n const root = createRoot(container);\n root.render();\n}" }, { "path": "react/demo/toggle-disabled/toggle-disabled.html", "content": "\n\n\n\n \n \n React App - Validation Demo\n \n \n\n\n\n

React App - Toggle disabled prop Demo

\n

A simple react app, using the IntlTelInput component to show it toggle.

\n

Click the button to enable/disable component.

\n
\n \n\n\n" }, { "path": "react/demo/validation/ValidationApp.tsx", "content": "import React, { useState, ReactElement } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport IntlTelInput from \"../../src/intl-tel-input/reactWithUtils\";\n\nconst errorMap = [\n \"Invalid number\",\n \"Invalid country code\",\n \"Too short\",\n \"Too long\",\n \"Invalid number\",\n];\n\nconst App = (): ReactElement => {\n const [isValid, setIsValid] = useState(null);\n const [number, setNumber] = useState(null);\n const [errorCode, setErrorCode] = useState(null);\n const [notice, setNotice] = useState(null);\n \n const handleSubmit = (): void => {\n if (isValid) {\n setNotice(`Valid number: ${number}`);\n } else {\n const errorMessage = errorMap[errorCode || 0] || \"Invalid number\";\n setNotice(`Error: ${errorMessage}`);\n }\n };\n \n return (\n
\n \n \n {notice &&
{notice}
}\n \n );\n};\n\nconst container = document.getElementById(\"app\");\nif (container) {\n const root = createRoot(container);\n root.render();\n}" }, { "path": "react/demo/validation/validation.html", "content": "\n\n\n\n \n \n React App - Validation Demo\n \n \n\n\n\n

React App - Validation Demo

\n

A simple react app, using the IntlTelInput component to handle phone number entry and validation.

\n

Enter a phone number below and click \"Validate\".

\n
\n \n\n\n" }, { "path": "react/src/intl-tel-input/react.tsx", "content": "import intlTelInput from \"../intl-tel-input\";\n//* Keep the TS imports separate, as the above line gets substituted in the reactWithUtils build process.\nimport { Iti } from \"../intl-tel-input\";\nimport React, {\n useRef,\n useEffect,\n forwardRef,\n useImperativeHandle,\n useCallback,\n} from \"react\";\nimport { SomeOptions } from \"../modules/types/public-api\";\n\n// make this available as a named export, so react users can access globals like intlTelInput.utils\nexport { intlTelInput };\n\ntype InputProps = Omit, \"onInput\">;\n\ntype ItiProps = {\n initialValue?: string;\n onChangeNumber?: (number: string) => void;\n onChangeCountry?: (country: string) => void;\n onChangeValidity?: (valid: boolean) => void;\n onChangeErrorCode?: (errorCode: number | null) => void;\n usePreciseValidation?: boolean;\n initOptions?: SomeOptions;\n inputProps?: InputProps;\n disabled?: boolean | undefined;\n};\n\nexport type IntlTelInputRef = {\n getInstance: () => Iti | null;\n getInput: () => HTMLInputElement | null;\n};\n\nconst IntlTelInput = forwardRef(function IntlTelInput(\n {\n initialValue = \"\",\n onChangeNumber = () => {},\n onChangeCountry = () => {},\n onChangeValidity = () => {},\n onChangeErrorCode = () => {},\n usePreciseValidation = false,\n initOptions = {},\n inputProps = {},\n disabled = undefined,\n }: ItiProps,\n ref: React.ForwardedRef,\n) {\n const inputRef = useRef(null);\n const itiRef = useRef(null);\n const lastEmittedNumberRef = useRef();\n const lastEmittedCountryRef = useRef();\n const lastEmittedValidityRef = useRef();\n const lastEmittedErrorCodeRef = useRef();\n\n // expose the instance and input ref to the parent component\n useImperativeHandle(ref, () => ({\n getInstance: () => itiRef.current,\n getInput: () => inputRef.current,\n }));\n\n const update = useCallback((): void => {\n // if the instance is not valid (e.g. has been destroyed/unmounted), do not attempt to call any methods on it\n if (!itiRef.current?.isActive()) {\n return;\n }\n const num = itiRef.current?.getNumber() || \"\";\n const countryIso = itiRef.current?.getSelectedCountryData().iso2 || \"\";\n // note: this number will be in standard E164 format, but any container component can use\n // intlTelInput.utils.formatNumber() to convert this to another format\n // as well as intlTelInput.utils.getNumberType() etc. if need be\n if (num !== lastEmittedNumberRef.current) {\n lastEmittedNumberRef.current = num;\n onChangeNumber(num);\n }\n if (countryIso !== lastEmittedCountryRef.current) {\n lastEmittedCountryRef.current = countryIso;\n onChangeCountry(countryIso);\n }\n\n if (itiRef.current) {\n const isValid = usePreciseValidation\n ? itiRef.current.isValidNumberPrecise()\n : itiRef.current.isValidNumber();\n const errorCode = isValid ? null : itiRef.current.getValidationError();\n\n if (isValid !== lastEmittedValidityRef.current) {\n lastEmittedValidityRef.current = isValid;\n onChangeValidity(isValid);\n }\n if (errorCode !== lastEmittedErrorCodeRef.current) {\n lastEmittedErrorCodeRef.current = errorCode;\n onChangeErrorCode(errorCode);\n }\n }\n }, [\n onChangeCountry,\n onChangeErrorCode,\n onChangeNumber,\n onChangeValidity,\n usePreciseValidation,\n ]);\n\n useEffect(() => {\n if (inputRef.current) {\n itiRef.current = intlTelInput(inputRef.current, initOptions);\n }\n return (): void => {\n itiRef.current?.destroy();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n // store a reference to the current input ref, which otherwise is already lost in the cleanup function\n const inputRefCurrent = inputRef.current;\n if (inputRefCurrent) {\n inputRefCurrent.addEventListener(\"countrychange\", update);\n // when plugin initialisation has finished (e.g. loaded utils script), update all the state values\n itiRef.current.promise.then(update);\n }\n return (): void => {\n if (inputRefCurrent) {\n inputRefCurrent.removeEventListener(\"countrychange\", update);\n }\n };\n }, [update]);\n\n useEffect(() => {\n if (itiRef.current && disabled !== undefined) {\n itiRef.current.setDisabled(disabled);\n }\n }, [disabled]);\n\n // ignore keys that would break functionality\n const {\n value: _value,\n // disabled: _disabled,\n ...sanitizedInputProps\n } = inputProps as unknown as Record;\n\n return (\n \n );\n});\n\nexport default IntlTelInput;\n" }, { "path": "react/src/intl-tel-input/reactWithUtils.tsx", "content": "//* THIS FILE IS AUTO-GENERATED. DO NOT EDIT.\nimport intlTelInput from \"./intlTelInputWithUtils\";\n//* Keep the TS imports separate, as the above line gets substituted in the reactWithUtils build process.\nimport { Iti } from \"../intl-tel-input\";\nimport React, {\n useRef,\n useEffect,\n forwardRef,\n useImperativeHandle,\n useCallback,\n} from \"react\";\nimport { SomeOptions } from \"../modules/types/public-api\";\n\n// make this available as a named export, so react users can access globals like intlTelInput.utils\nexport { intlTelInput };\n\ntype InputProps = Omit, \"onInput\">;\n\ntype ItiProps = {\n initialValue?: string;\n onChangeNumber?: (number: string) => void;\n onChangeCountry?: (country: string) => void;\n onChangeValidity?: (valid: boolean) => void;\n onChangeErrorCode?: (errorCode: number | null) => void;\n usePreciseValidation?: boolean;\n initOptions?: SomeOptions;\n inputProps?: InputProps;\n disabled?: boolean | undefined;\n};\n\nexport type IntlTelInputRef = {\n getInstance: () => Iti | null;\n getInput: () => HTMLInputElement | null;\n};\n\nconst IntlTelInput = forwardRef(function IntlTelInput(\n {\n initialValue = \"\",\n onChangeNumber = () => {},\n onChangeCountry = () => {},\n onChangeValidity = () => {},\n onChangeErrorCode = () => {},\n usePreciseValidation = false,\n initOptions = {},\n inputProps = {},\n disabled = undefined,\n }: ItiProps,\n ref: React.ForwardedRef,\n) {\n const inputRef = useRef(null);\n const itiRef = useRef(null);\n const lastEmittedNumberRef = useRef();\n const lastEmittedCountryRef = useRef();\n const lastEmittedValidityRef = useRef();\n const lastEmittedErrorCodeRef = useRef();\n\n // expose the instance and input ref to the parent component\n useImperativeHandle(ref, () => ({\n getInstance: () => itiRef.current,\n getInput: () => inputRef.current,\n }));\n\n const update = useCallback((): void => {\n // if the instance is not valid (e.g. has been destroyed/unmounted), do not attempt to call any methods on it\n if (!itiRef.current?.isActive()) {\n return;\n }\n const num = itiRef.current?.getNumber() || \"\";\n const countryIso = itiRef.current?.getSelectedCountryData().iso2 || \"\";\n // note: this number will be in standard E164 format, but any container component can use\n // intlTelInput.utils.formatNumber() to convert this to another format\n // as well as intlTelInput.utils.getNumberType() etc. if need be\n if (num !== lastEmittedNumberRef.current) {\n lastEmittedNumberRef.current = num;\n onChangeNumber(num);\n }\n if (countryIso !== lastEmittedCountryRef.current) {\n lastEmittedCountryRef.current = countryIso;\n onChangeCountry(countryIso);\n }\n\n if (itiRef.current) {\n const isValid = usePreciseValidation\n ? itiRef.current.isValidNumberPrecise()\n : itiRef.current.isValidNumber();\n const errorCode = isValid ? null : itiRef.current.getValidationError();\n\n if (isValid !== lastEmittedValidityRef.current) {\n lastEmittedValidityRef.current = isValid;\n onChangeValidity(isValid);\n }\n if (errorCode !== lastEmittedErrorCodeRef.current) {\n lastEmittedErrorCodeRef.current = errorCode;\n onChangeErrorCode(errorCode);\n }\n }\n }, [\n onChangeCountry,\n onChangeErrorCode,\n onChangeNumber,\n onChangeValidity,\n usePreciseValidation,\n ]);\n\n useEffect(() => {\n if (inputRef.current) {\n itiRef.current = intlTelInput(inputRef.current, initOptions);\n }\n return (): void => {\n itiRef.current?.destroy();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n // store a reference to the current input ref, which otherwise is already lost in the cleanup function\n const inputRefCurrent = inputRef.current;\n if (inputRefCurrent) {\n inputRefCurrent.addEventListener(\"countrychange\", update);\n // when plugin initialisation has finished (e.g. loaded utils script), update all the state values\n itiRef.current.promise.then(update);\n }\n return (): void => {\n if (inputRefCurrent) {\n inputRefCurrent.removeEventListener(\"countrychange\", update);\n }\n };\n }, [update]);\n\n useEffect(() => {\n if (itiRef.current && disabled !== undefined) {\n itiRef.current.setDisabled(disabled);\n }\n }, [disabled]);\n\n // ignore keys that would break functionality\n const {\n value: _value,\n // disabled: _disabled,\n ...sanitizedInputProps\n } = inputProps as unknown as Record;\n\n return (\n \n );\n});\n\nexport default IntlTelInput;\n" }, { "path": "react/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"jsx\": \"react\",\n \"module\": \"nodenext\",\n \"moduleResolution\": \"nodenext\",\n \"esModuleInterop\": true, //* Required for react (etc) default imports.\n \"declaration\": true, //* Generate .d.ts files.\n \"emitDeclarationOnly\": true, //* ONLY generate .d.ts files (we use esbuild for the actual bundling).\n \"outFile\": \"build/IntlTelInput.d.ts\",\n \"rootDir\": \"./src\",\n \"allowJs\": true, // allow importing .mjs files e.g. i18n files\n },\n \"include\": [\n \"src/intl-tel-input/react.tsx\",\n \"src/intl-tel-input/reactWithUtils.tsx\",\n \"src/intl-tel-input/i18n/index.ts\",\n ],\n}\n" }, { "path": "scripts/check-lpn-metadata.cjs", "content": "/**\n * This script loads the existing country data from data.ts,\n * then parses libphonenumber's PhoneNumberMetadata.xml to look for any updates.\n *\n * I decided to keep the hand-made data.ts data instead of just having it all auto-generated from the LPN metadata because LPN only stores the precise ranges that are known to be in use, whereas (1) we know that there are other ranges that have been assigned to a territory and so would make more sense belonging to that one rather than the main country, and (2) because of the high level of precision, the resulting output is massive from LPN e.g. outputting 20x 6-digit numbers for IM (isle of man), when it is clearly documented on the wiki page that they have been assigned the 5 short strings that I have included in data.ts\n */\n\n\n/* eslint-disable no-console */\nconst fs = require(\"fs\");\nconst path = require(\"path\");\nconst vm = require(\"vm\");\n\nconst REPO_ROOT = path.resolve(__dirname, \"..\", \"\");\nconst XML_PATH = path.resolve(\n REPO_ROOT,\n \"third_party/libphonenumber/resources/PhoneNumberMetadata.xml\",\n);\nconst OUT_TS = path.resolve(REPO_ROOT, \"tmp/generated-rawCountryData.ts\");\nconst CURATED_DATA_TS_PATH = path.resolve(REPO_ROOT, \"src/js/intl-tel-input/data.ts\");\n\n// Extract a compact leading digits prefix representative for a region.\n// Strategy:\n// - Prefer a short literal digit prefix found in the first national number pattern for fixed-line or mobile\n// - Fallback to a header-level leadingDigits string when present, trimming to a short digit-only prefix\n// (legacy single-prefix extractor removed in favor of extractLeadingPrefixes)\n\nfunction sortDigitStringsNumeric(arr) {\n // Lexicographic digit-by-digit ordering (e.g., 74576 < 7524)\n return arr.slice().sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));\n}\n\n// Shared simple prefix parser used for XML mode\nfunction splitTopLevelAlts(inner) {\n const parts = [];\n let cur = \"\";\n let depth = 0;\n for (let i = 0; i < inner.length; i++) {\n const ch = inner[i];\n if (ch === \"(\") depth++;\n else if (ch === \")\") depth = Math.max(0, depth - 1);\n if (ch === \"|\" && depth === 0) { parts.push(cur); cur = \"\"; continue; }\n cur += ch;\n }\n parts.push(cur);\n return parts;\n}\n\nfunction expandCharClass(cls) {\n const res = new Set();\n for (let i = 0; i < cls.length; i++) {\n const c = cls[i];\n if (/\\d/.test(c)) {\n if (i + 2 < cls.length && cls[i + 1] === \"-\" && /\\d/.test(cls[i + 2])) {\n const start = Number(c), end = Number(cls[i + 2]);\n for (let d = start; d <= end; d++) res.add(String(d));\n i += 2;\n } else {\n res.add(c);\n }\n }\n }\n return Array.from(res);\n}\n\nfunction expandSimple(prefixPart) {\n if (/^\\d{2,6}$/.test(prefixPart)) return [prefixPart];\n const m = prefixPart.match(/^(\\d*)\\[([0-9-]+)\\](\\d*)$/);\n if (m) {\n const lead = m[1] || \"\";\n const cls = m[2];\n const tail = m[3] || \"\";\n return expandCharClass(cls).map((d) => lead + d + tail).filter((s) => /^\\d{2,6}$/.test(s));\n }\n return [];\n}\n\nfunction simplePrefixesFromPattern(pat) {\n // Normalize: collapse all whitespace to simplify parsing of multi-line XML patterns\n pat = String(pat).replace(/\\s+/g, \"\");\n // Handle a leading literal digit sequence followed by a non-capturing group, e.g., '7(?:781|839)\\\\d|911[17])\\\\d{5}'\n let mLeadGroup = pat.match(/^(\\d{1,3})\\(\\?:/);\n if (mLeadGroup) {\n const lead = mLeadGroup[1];\n // Extract the first non-capturing group's inner content after the leading digits\n let i = lead.length + 3; // position after '(?:'\n let depth = 1;\n let inner = \"\";\n while (i < pat.length) {\n const ch = pat[i];\n if (ch === \"\\\\\") { i += 2; continue; }\n if (ch === \"(\") depth++;\n else if (ch === \")\") { depth--; if (depth === 0) { i++; break; } }\n inner += ch; i++;\n }\n const alts = splitTopLevelAlts(inner);\n const set = new Set();\n for (const a of alts) {\n const arr = simplePrefixesFromPattern(a);\n for (const v of arr) set.add(lead + v);\n }\n return Array.from(set).filter((s) => /^\\d{2,6}$/.test(s));\n }\n // If the pattern starts with a top-level non-capturing group, extract its inner content\n if (pat.startsWith(\"(?:\")) {\n let i = 3; // after (?:\n let depth = 1;\n let inner = \"\";\n while (i < pat.length) {\n const ch = pat[i];\n if (ch === \"\\\\\") { // skip escaped char\n i += 2;\n continue;\n }\n if (ch === \"(\") depth++;\n else if (ch === \")\") {\n depth--;\n if (depth === 0) { i++; break; }\n }\n inner += ch;\n i++;\n }\n // Now 'inner' holds the content of the outer non-capturing group; ignore any suffix like \\d{n}\n const alts = splitTopLevelAlts(inner);\n if (alts.length > 1) {\n const set = new Set();\n for (const a of alts) {\n const arr = simplePrefixesFromPattern(a);\n for (const v of arr) set.add(v);\n }\n return Array.from(set);\n }\n // Single alternative inside, recurse into it directly\n return simplePrefixesFromPattern(inner);\n }\n // Handle top-level alternations like \"658|876\" or \"8001|8[024]9\"\n const top = splitTopLevelAlts(pat);\n if (top.length > 1) {\n const set = new Set();\n for (const part of top) {\n const arr = simplePrefixesFromPattern(part);\n for (const v of arr) set.add(v);\n }\n return Array.from(set);\n }\n // Handle bare character class at start, e.g., \"[347]\" or \"[3-7]24\"\n let m = pat.match(/^\\[([0-9-]+)\\](\\d*)$/);\n if (m) {\n const cls = m[1];\n const tail = m[2] || \"\";\n return expandCharClass(cls).map((d) => d + tail).filter((s) => /^\\d{1,6}$/.test(s));\n }\n m = pat.match(/^(\\d+)\\[([0-9-]+)\\](\\d*)/);\n if (m) {\n const lead = m[1];\n const cls = m[2];\n const tail = m[3] || \"\";\n return expandCharClass(cls).map((d) => lead + d + tail).filter((s) => /^\\d{2,6}$/.test(s));\n }\n m = pat.match(/^(\\d{1,6})/);\n if (m) return [m[1]];\n return [];\n}\n\n// Collapse exhaustive ranges (prefix-aware): if for a parent prefix p we see all 10 next digits\n// across any longer codes (e.g., p0*, p1*, ..., p9*), then replace all those children with p.\nfunction collapseExhaustiveRanges(codes) {\n if (!Array.isArray(codes) || !codes.length) return codes || [];\n const set = new Set(codes);\n let changed = true;\n while (changed) {\n changed = false;\n // Build parent -> set(nextDigits)\n const parents = new Map();\n for (const s of set) {\n if (typeof s !== \"string\" || s.length < 2) continue;\n for (let k = 1; k < s.length; k++) {\n const parent = s.slice(0, k);\n const next = s[k];\n if (!/\\d/.test(next)) continue;\n let bag = parents.get(parent);\n if (!bag) { bag = new Set(); parents.set(parent, bag); }\n bag.add(next);\n }\n }\n // For any parent with all 10 digits seen, collapse all children starting with parent+digit\n for (const [parent, bag] of parents) {\n if (bag.size === 10) {\n let mutated = false;\n const toDelete = [];\n for (const s of set) {\n if (s.length > parent.length && s.startsWith(parent)) {\n toDelete.push(s);\n }\n }\n for (const s of toDelete) { set.delete(s); mutated = true; }\n if (!set.has(parent)) { set.add(parent); mutated = true; }\n if (mutated) changed = true;\n }\n }\n }\n return sortDigitStringsNumeric(Array.from(set));\n}\n\n// Attempt to extract 3-digit NANP NPAs from a complex pattern like CA's,\n// which uses structure: (?: 2(?:..|..|..) | 3(?:..|..) | ... )[2-9]\\d{6}\nfunction extractNanpNpasFromPattern(pat) {\n if (typeof pat !== \"string\" || !pat) return [];\n const s = pat.replace(/\\s+/g, \"\");\n // Find the top-level non-capturing group at the start, if present\n let inner = s;\n if (s.startsWith(\"(?:\")) {\n let i = 3, depth = 1; inner = \"\";\n while (i < s.length) {\n const ch = s[i];\n if (ch === \"\\\\\") { i += 2; continue; }\n if (ch === \"(\") depth++;\n else if (ch === \")\") { depth--; if (depth === 0) { i++; break; } }\n inner += ch; i++;\n }\n }\n const alts = splitTopLevelAlts(inner);\n const out = new Set();\n for (const a of alts) {\n // Expect a like: 2(?:04|[23]6|...)\n const m = a.match(/^([2-9])\\(\\?:(.+)\\)$/);\n if (!m) continue;\n const d = m[1];\n const rest = m[2];\n const parts = splitTopLevelAlts(rest);\n for (const p of parts) {\n // Expand simple pieces like 04, [23]6, 5[07], 63\n const expansions = expandSimple(d + p);\n for (const e of expansions) { if (/^\\d{3}$/.test(e)) out.add(e); }\n // Also handle pure two-digit literals (e.g., '63') after the 1st digit\n if (/^\\d{2}$/.test(p)) out.add(d + p);\n }\n }\n return sortDigitStringsNumeric(Array.from(out));\n}\n\nfunction deriveNanpNpasFromPatterns(fixedList, mobileList) {\n const set = new Set();\n const addFrom = (list) => {\n if (!Array.isArray(list)) return;\n for (const pat of list) {\n // 1) General extraction using simplePrefixesFromPattern\n const simple = simplePrefixesFromPattern(pat);\n for (const s of simple) {\n if (/^[2-9]\\d{2}$/.test(s)) set.add(s);\n else if (/^[2-9]\\d{3,6}$/.test(s)) set.add(s.slice(0, 3));\n }\n // 2) CA-style nested non-capturing groups as a supplement\n const caLike = extractNanpNpasFromPattern(pat);\n for (const v of caLike) set.add(v);\n if (set.size > 400) break; // safety guardrail\n }\n };\n addFrom(fixedList);\n addFrom(mobileList);\n return sortDigitStringsNumeric(Array.from(set));\n}\n\n// XML-mode generic extractor: only use territory.leadingDigits + fixedLine/mobile patterns\n// Apply safe expansions and filter out obvious service/example-like prefixes\nfunction extractGenericPrefixesXml(src) {\n const out = new Set();\n\n function isDisallowedPrefix(s) {\n // Leading zero prefixes are often trunk/formatting hints\n if (/^0/.test(s)) return true;\n // Non-geo/service families and known service groups\n if (/^(?:800|80\\d|900|90\\d|13|1300|1800|190\\d)\\d*$/.test(s)) return true;\n // Example-like tails\n if (/(?:0123|1234)$/.test(s)) return true;\n // Common synthetic sequences sometimes found in examples\n if (/701234$/.test(s)) return true;\n return false;\n }\n\n function addFrom(list) {\n if (!Array.isArray(list)) return;\n for (const p of list) {\n if (typeof p !== \"string\" || !p) continue;\n const arr = simplePrefixesFromPattern(p);\n for (const s of arr) out.add(s);\n if (out.size > 40) break;\n }\n }\n\n // Use only fixedLine and mobile patterns (ignore leadingDigits entirely)\n addFrom(src.fixed);\n addFrom(src.mobile);\n\n // Perform prefix-aware collapse before filtering so that short parents (e.g., '4') can be retained\n const rawList = sortDigitStringsNumeric(Array.from(out));\n const collapsed = collapseExhaustiveRanges(rawList);\n const rawSet = new Set(rawList);\n\n // Filter out obvious service/example-like prefixes\n const filtered = Array.from(collapsed).filter((s) => {\n if (isDisallowedPrefix(s)) return false;\n // Drop 709x branch (special allocations seen in 262/590 groups) to match curated area codes\n if (src && (src.dial === \"262\" || src.dial === \"590\") && /^709/.test(s)) return false;\n // Do not treat the full dial code itself as an area-code discriminator,\n // except for Kazakhstan (kz) which legitimately needs '7' to disambiguate from RU.\n if (src && s === src.dial && src.iso2 !== \"kz\") return false;\n // Enforce minimum length with exceptions:\n // - allow 1-digit for dial 599 (BQ group)\n // - allow 1-digit for KZ (iso2 === 'kz')\n const minLen = (src && (src.dial === \"599\" || src.iso2 === \"kz\")) ? 1 : 3;\n // If this value is a collapsed parent (i.e., not present in raw expansions), allow even if short\n const isCollapsedParent = !rawSet.has(s);\n if (s.length < minLen && !isCollapsedParent) return false;\n return true;\n });\n\n return sortDigitStringsNumeric(filtered);\n}\n\n// XML-only: extend a base prefix to at least minLen using only safe expansions from XML patterns\nfunction extendPrefixXml(iso2, base, minLen, xmlSources) {\n const src = xmlSources[iso2];\n if (!src || !base) return base;\n const candidates = new Set();\n // Reuse filtering from extractor\n function isDisallowedPrefix(s) {\n if (/^0/.test(s)) return true;\n if (/^(?:800|80\\d|900|90\\d|13|1300|1800|190\\d)\\d*$/.test(s)) return true;\n if (/(?:0123|1234)$/.test(s)) return true;\n if (/701234$/.test(s)) return true;\n return false;\n }\n const collect = (list) => {\n if (!Array.isArray(list)) return;\n for (const pat of list) {\n if (typeof pat !== \"string\") continue;\n const arr = simplePrefixesFromPattern(pat);\n for (const p of arr) {\n if (p.startsWith(base) && p.length >= minLen && !isDisallowedPrefix(p)) candidates.add(p);\n }\n }\n };\n collect(src.fixed);\n collect(src.mobile);\n if (!candidates.size) return base;\n // choose the shortest candidate\n return Array.from(candidates).sort((a, b) => a.length - b.length || (a < b ? -1 : a > b ? 1 : 0))[0];\n}\n\n\n\n// No iso2-codes.json; we derive the allowlist from curated data.ts\n\nfunction main() {\n let countryToMetadata;\n const dialCodeToRegions = {};\n const xmlNationalPrefixByIso2 = {};\n // Regions where we intentionally do NOT derive areaCodes as there is no way to distinguish numbers from main region\n const AREA_CODES_EXCLUDE = new Set([\"bl\", \"mf\", \"cc\", \"cx\"]);\n\n // For XML mode, we also keep a structured source set per region\n const xmlSourcesByIso2 = {};\n console.log(\"Loading libphonenumber XML from:\", XML_PATH);\n // Lazy-require to keep default path lightweight\n let XMLParser;\n try {\n ({ XMLParser } = require(\"fast-xml-parser\"));\n } catch {\n throw new Error(\n \"fast-xml-parser is required. Install with: npm i -D fast-xml-parser\",\n );\n }\n const parser = new XMLParser({ ignoreAttributes: false, attributeNamePrefix: \"\" });\n const xmlRaw = fs.readFileSync(XML_PATH, \"utf8\");\n const xmlDoc = parser.parse(xmlRaw);\n const territoriesRoot = xmlDoc && xmlDoc.phoneNumberMetadata && xmlDoc.phoneNumberMetadata.territories;\n if (!territoriesRoot) throw new Error(\"Invalid PhoneNumberMetadata.xml structure: missing territories\");\n let territories = territoriesRoot.territory || [];\n if (!Array.isArray(territories)) territories = [territories];\n\n // Build minimal structures compatible with the rest of the pipeline\n // countryToMetadataXml: REG -> array of arrays of strings (patterns) so extendPrefix can scan\n const countryToMetadataXml = {};\n\n territories.forEach((t) => {\n const reg = (t.id || \"\").toString();\n const iso2 = reg.toLowerCase();\n if (!reg) return;\n const dial = (t.countryCode || \"\").toString();\n if (!dial) return;\n const natPref = t.nationalPrefix ? String(t.nationalPrefix) : null;\n if (natPref) xmlNationalPrefixByIso2[iso2] = natPref;\n\n // Collect safe patterns from territory-level leadingDigits, fixedLine, mobile\n const patterns = [];\n const leading = [];\n const fixedPats = [];\n const mobilePats = [];\n // Some schemas put territory-level leadingDigits as child elements or arrays\n const ld = t.leadingDigits;\n if (typeof ld === \"string\") { patterns.push(ld); leading.push(ld); }\n else if (Array.isArray(ld)) ld.forEach((s) => { if (typeof s === \"string\") { patterns.push(s); leading.push(s); } });\n\n const fixed = t.fixedLine && t.fixedLine.nationalNumberPattern;\n if (typeof fixed === \"string\") { patterns.push(fixed); fixedPats.push(fixed); }\n const mobile = t.mobile && t.mobile.nationalNumberPattern;\n if (typeof mobile === \"string\") { patterns.push(mobile); mobilePats.push(mobile); }\n\n // Build dialCodeToRegions honoring mainCountryForCode where available\n if (!dialCodeToRegions[dial]) dialCodeToRegions[dial] = [];\n const isMain = String(t.mainCountryForCode || \"\") === \"true\";\n if (isMain) {\n // Ensure main region is first\n dialCodeToRegions[dial].unshift(iso2);\n } else {\n dialCodeToRegions[dial].push(iso2);\n }\n\n // Provide a scanning surface for extendPrefix: one inner array with collected patterns\n countryToMetadataXml[reg] = [patterns];\n xmlSourcesByIso2[iso2] = { iso2, leading, fixed: fixedPats, mobile: mobilePats, dial, main: isMain };\n });\n\n countryToMetadata = countryToMetadataXml;\n\n // Load curated area codes from src/js/intl-tel-input/data.ts and seed from those first.\n // We only add newly-derived codes if they are not already covered by curated ones.\n // Also capture curated priority per iso2 to preserve priority values in generated output (we don't compute priorities ourselves).\n const curatedPriorityByIso2 = new Map();\n const curatedIso2Set = new Set();\n function loadCuratedAreaCodes() {\n const map = new Map();\n if (!fs.existsSync(CURATED_DATA_TS_PATH)) return map;\n try {\n const ts = fs.readFileSync(CURATED_DATA_TS_PATH, \"utf8\");\n const anchor = ts.indexOf(\"export const rawCountryData\");\n if (anchor === -1) return map;\n // Find first '[' after anchor and then parse matching brackets until the corresponding ']'\n let i = ts.indexOf(\"[\", anchor);\n if (i === -1) return map;\n let depth = 0;\n let start = i;\n for (; i < ts.length; i++) {\n const ch = ts[i];\n if (ch === \"[\") depth++;\n else if (ch === \"]\") { depth--; if (depth === 0) { i++; break; } }\n }\n if (depth !== 0) return map;\n const arrSrc = ts.slice(start, i);\n // Evaluate the array literal. Comments are allowed in JS arrays, so this should work.\n // Wrap in parentheses to make it a valid expression.\n // eslint-disable-next-line no-new-func\n const curated = Function(\"return (\" + arrSrc + \")\")();\n if (Array.isArray(curated)) {\n for (const row of curated) {\n if (!Array.isArray(row) || row.length < 2) continue;\n const iso2 = row[0];\n const priority = row[2];\n const area = row[3];\n if (typeof iso2 === \"string\") curatedIso2Set.add(iso2.toLowerCase());\n if (typeof iso2 === \"string\" && Array.isArray(area) && area.length) {\n map.set(iso2.toLowerCase(), area.slice());\n }\n if (typeof iso2 === \"string\" && (typeof priority === \"number\" || typeof priority === \"string\")) {\n const p = Number(priority);\n if (!Number.isNaN(p)) curatedPriorityByIso2.set(iso2.toLowerCase(), p);\n }\n }\n }\n } catch (e) {\n console.warn(\"Warning: failed to parse curated data.ts for area codes:\", e && e.message ? e.message : e);\n }\n return map;\n }\n const curatedAreaCodesByIso2 = loadCuratedAreaCodes();\n // Build allowlist from curated data.ts iso2s\n console.log(\"Building iso2 allowlist from curated data.ts\");\n const allowIso2 = curatedIso2Set;\n\n const tuples = [];\n\n // Precompute candidate leading prefixes per region\n const candidatePrefixesByIso2 = {};\n const collapsedParentsByIso2 = {};\n // NANP behavior: derive 3-digit NPAs from fixed/mobile patterns\n Object.keys(countryToMetadata).forEach((REG) => {\n const iso2 = REG.toLowerCase();\n if (!allowIso2.has(iso2)) return;\n // find dial code for region\n let dial = null;\n // In XML mode we already built dialCodeToRegions, so find the dial by reverse lookup\n for (const [dc, regs] of Object.entries(dialCodeToRegions)) {\n if (regs.includes(iso2)) { dial = dc; break; }\n }\n if (!dial) return;\n const siblings = dialCodeToRegions[dial] || [];\n if (siblings.length <= 1) return; // unique dial code -> no areaCodes\n // Use explicit main flag from XML to decide skipping area code derivation\n const srcForRegion = xmlSourcesByIso2[iso2];\n if (srcForRegion && srcForRegion.main) return; // main region -> skip areaCodes\n // Skip area-code derivation for excluded regions\n if (AREA_CODES_EXCLUDE.has(iso2)) return;\n let cands = [];\n if (dial === \"1\") {\n // NANP: for non-main regions, extract 3-digit NPAs from fixed/mobile patterns\n const src = srcForRegion;\n if (src) {\n let npas = deriveNanpNpasFromPatterns(src.fixed, src.mobile);\n // Fallback: take a 3-digit slice from the first simple prefix if needed\n if (!npas.length) {\n const simple = [];\n (src.fixed || []).forEach((p) => simple.push(...simplePrefixesFromPattern(p)));\n (src.mobile || []).forEach((p) => simple.push(...simplePrefixesFromPattern(p)));\n const first = simple.find((s) => /^[2-9]\\d{2,6}$/.test(s));\n if (first) npas = [first.slice(0, 3)];\n }\n if (npas.length) cands = npas;\n }\n } else {\n // XML mode: use filtered IM-style extraction from leading/fixed/mobile only\n const src = srcForRegion;\n if (src) cands = extractGenericPrefixesXml(src);\n }\n if (cands && cands.length) {\n const uniq = Array.from(new Set(cands));\n const collapsed = collapseExhaustiveRanges(uniq);\n candidatePrefixesByIso2[iso2] = collapsed;\n // Build raw expansion set from fixed/mobile patterns to detect which entries are collapsed parents\n const rawSet = new Set();\n const src = srcForRegion;\n if (src) {\n const collect = (list) => {\n if (!Array.isArray(list)) return;\n for (const p of list) {\n if (typeof p !== \"string\" || !p) continue;\n for (const s of simplePrefixesFromPattern(p)) rawSet.add(s);\n }\n };\n collect(src.fixed);\n collect(src.mobile);\n }\n const parents = new Set(collapsed.filter((s) => !rawSet.has(s)));\n if (parents.size) collapsedParentsByIso2[iso2] = parents;\n }\n });\n\n // For each dial code group, shrink prefixes to minimal unique values among non-main regions\n // Allow per-dial-code minimum lengths to ensure meaningful disambiguation (e.g., 44 → 4 digits)\n // const minUniqueLenByDial = {\n // 1: 3,\n // 7: 1,\n // 44: 4,\n // 262: 3,\n // 212: 4,\n // 599: 1,\n // };\n const uniquePrefixByIso2 = {};\n Object.keys(dialCodeToRegions).forEach((dial) => {\n const regions = dialCodeToRegions[dial];\n if (!regions || regions.length <= 1) return;\n const rest = regions.slice(1);\n const entries = rest\n .map((r) => ({ iso2: r, full: candidatePrefixesByIso2[r] }))\n .filter((e) => Array.isArray(e.full) && e.full.length);\n if (!entries.length) return;\n // determine minimal unique truncation length between 2 and full length\n const allLens = entries.flatMap((e) => e.full.map((s) => s.length));\n const maxLen = Math.min(6, Math.max(...allLens));\n // const minLenDefault = 2;\n const minLen = 1;//Math.max(minLenDefault, Number(minUniqueLenByDial[dial]) || minLenDefault);\n // Choose the longest possible unique length first (descending), then collapse if possible\n for (let len = maxLen; len >= minLen; len--) {\n const seen = new Map();\n let collision = false;\n // Expand all candidates per region, extending to len when needed\n const expanded = entries.map((e) => {\n const arr = [];\n for (const full of e.full) {\n let val = full;\n const parents = collapsedParentsByIso2[e.iso2];\n const isCollapsed = parents && parents.has(full);\n if (val.length < len && !isCollapsed) {\n val = extendPrefixXml(e.iso2, val, len, xmlSourcesByIso2);\n }\n arr.push(val.slice(0, Math.min(len, val.length)));\n }\n return { iso2: e.iso2, arr: Array.from(new Set(arr)) };\n });\n // Check collisions across all regions\n for (const e of expanded) {\n for (const k of e.arr) {\n if (seen.has(k)) { collision = true; break; }\n seen.set(k, e.iso2);\n }\n if (collision) break;\n }\n if (!collision) {\n // Try to collapse ranges per region without breaking uniqueness\n const collapsedPerIso2 = new Map();\n let collapseCollision = false;\n const seenCollapsed = new Map();\n for (const e of expanded) {\n const collapsedArr = collapseExhaustiveRanges(e.arr);\n collapsedPerIso2.set(e.iso2, collapsedArr);\n }\n // Validate uniqueness after collapse\n for (const e of expanded) {\n const arrToUse = collapsedPerIso2.get(e.iso2) || e.arr;\n for (const k of arrToUse) {\n if (seenCollapsed.has(k)) { collapseCollision = true; break; }\n seenCollapsed.set(k, e.iso2);\n }\n if (collapseCollision) break;\n }\n if (!collapseCollision) {\n for (const e of expanded) uniquePrefixByIso2[e.iso2] = collapsedPerIso2.get(e.iso2) || e.arr;\n } else {\n for (const e of expanded) uniquePrefixByIso2[e.iso2] = e.arr;\n }\n return;\n }\n }\n // If we reach here, use full prefixes\n for (const e of entries) uniquePrefixByIso2[e.iso2] = e.full;\n });\n\n function getNationalPrefix(iso2) {\n const np = xmlNationalPrefixByIso2[iso2];\n return typeof np === \"string\" && np.length ? np : null;\n }\n\n const dialCodes = Object.keys(dialCodeToRegions);\n console.log(\"Found\", dialCodes.length, \"country calling codes\");\n dialCodes\n .sort((a, b) => Number(a) - Number(b))\n .forEach((dialCode) => {\n const regions = dialCodeToRegions[dialCode];\n regions.forEach((iso2) => {\n if (!allowIso2.has(iso2)) return;\n // Priority is ignored; always 0\n // Compute area codes starting from curated data.ts, then add uncovered generated codes\n let areaCodes = null;\n const baseline = curatedAreaCodesByIso2.get(iso2) || null;\n const area = uniquePrefixByIso2[iso2];\n const generated = Array.isArray(area) && area.length ? area.slice() : [];\n const usedCurated = Array.isArray(baseline) && baseline.length > 0;\n if (usedCurated) {\n const base = baseline.slice();\n // Determine which generated codes are not already covered by baseline\n const isCoveredByBaseline = (code) => base.some((b) => typeof b === \"string\" && code.startsWith(b));\n const isBroaderThanBaseline = (code) => base.some((b) => typeof b === \"string\" && b.startsWith(code));\n for (const g of generated) {\n if (!isCoveredByBaseline(g) && !isBroaderThanBaseline(g)) base.push(g);\n }\n areaCodes = base;\n } else {\n areaCodes = generated.length ? generated : null;\n }\n // Sort generated area codes numerically for deterministic, readable output\n if (Array.isArray(areaCodes)) {\n areaCodes = sortDigitStringsNumeric(areaCodes);\n }\n // Generic collapse: avoid collapsing when using curated baseline to preserve existing sets\n if (Array.isArray(areaCodes)) {\n const usedCurated = Array.isArray(baseline) && baseline.length > 0;\n if (!usedCurated) areaCodes = collapseExhaustiveRanges(areaCodes);\n }\n const nationalPrefix = getNationalPrefix(iso2);\n const curatedPriority = curatedPriorityByIso2.get(iso2) || 0;\n const tuple = [iso2, dialCode, curatedPriority, null, null];\n if (areaCodes) tuple[3] = areaCodes;\n if (nationalPrefix) tuple[4] = nationalPrefix;\n tuples.push(tuple);\n });\n });\n\n tuples.sort((a, b) => (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0));\n const ts = `export const rawCountryData = ${JSON.stringify(tuples, null, 2)} as const;\\n`;\n fs.mkdirSync(path.dirname(OUT_TS), { recursive: true });\n fs.writeFileSync(OUT_TS, ts, \"utf8\");\n console.log(`Wrote ${tuples.length} entries as TS to ${path.relative(process.cwd(), OUT_TS)}`);\n\n // Always run diff against curated data.ts after generation\n function loadArray(tsPath, isDataTs = false) {\n let s = fs.readFileSync(tsPath, \"utf8\");\n if (isDataTs) {\n // strip line comments\n s = s.replace(/\\/\\/.*$/mg, \"\");\n // drop trailing TS type exports if present\n s = s.replace(/export type[\\s\\S]*/, \"\");\n }\n // normalize export for eval\n s = s.replace(/export const rawCountryData\\s*=\\s*/, \"var rawCountryData = \");\n s = s.replace(/\\] as const;?\\s*$/, \"];\\n\");\n const ctx = {};\n vm.createContext(ctx);\n vm.runInContext(s, ctx, { filename: tsPath });\n return ctx.rawCountryData;\n }\n\n function toMap(arr) {\n const m = new Map();\n for (const t of arr) {\n const [iso2, dialCode, priority = 0, areaCodes = null, nationalPrefix = null] = t;\n m.set(iso2, { iso2, dialCode, priority, areaCodes: areaCodes ?? null, nationalPrefix: nationalPrefix ?? null });\n }\n return m;\n }\n\n function eqArr(a, b) {\n if (a === b) return true;\n if (!a && !b) return true;\n if (!a || !b) return false;\n if (a.length !== b.length) return false;\n for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;\n return true;\n }\n\n function summarizeArrayChange(name, oldArr, newArr) {\n const oa = Array.isArray(oldArr) ? oldArr : [];\n const na = Array.isArray(newArr) ? newArr : [];\n const oSet = new Set(oa);\n const nSet = new Set(na);\n const added = na.filter((x) => !oSet.has(x));\n const removed = oa.filter((x) => !nSet.has(x));\n const header = `${name}: ${oldArr ? oa.length : \"null\"} items -> ${newArr ? na.length : \"null\"} items`;\n const limit = 12;\n const fmt = (arr) => {\n if (!arr.length) return \"[]\";\n if (arr.length <= limit) return `[${arr.map((s)=>JSON.stringify(s)).join(\",\")}]`;\n const head = arr.slice(0, limit - 2).map((s)=>JSON.stringify(s)).join(\",\");\n const tail = arr.slice(-2).map((s)=>JSON.stringify(s)).join(\",\");\n const more = arr.length - (limit);\n return `[${head},…${more} more… ,${tail}]`;\n };\n if (added.length === 0 && removed.length === 0 && Array.isArray(oldArr) && Array.isArray(newArr)) {\n // Order-only change\n return `${name}: reordered (${oa.length} items)`;\n }\n // For small diffs, show full arrays for readability\n if ((oa.length + na.length) <= 40 && (added.length + removed.length) <= 20) {\n return `${name}: ${JSON.stringify(oldArr)} -> ${JSON.stringify(newArr)}`;\n }\n const parts = [];\n if (added.length) parts.push(`New item(s): ${fmt(added)}`);\n if (removed.length) parts.push(`Removed item(s): ${fmt(removed)}`);\n return `${header}${parts.length ? \", \" + parts.join(\", \") : \"\"}`;\n }\n\n function runDiff() {\n const GEN_PATH = OUT_TS;\n const ORIG_PATH = CURATED_DATA_TS_PATH;\n if (!fs.existsSync(GEN_PATH)) {\n console.error(\"Missing generated file:\", GEN_PATH);\n return;\n }\n if (!fs.existsSync(ORIG_PATH)) {\n console.error(\"Missing original file:\", ORIG_PATH);\n return;\n }\n const gen = loadArray(GEN_PATH, false);\n const orig = loadArray(ORIG_PATH, true);\n const g = toMap(gen);\n const o = toMap(orig);\n const allIso2 = [...new Set([...g.keys(), ...o.keys()])].sort();\n const lines = [];\n let added = 0, removed = 0, changed = 0;\n for (const iso of allIso2) {\n const G = g.get(iso);\n const O = o.get(iso);\n if (!G) {\n removed++;\n lines.push(`- ${iso}: dial=${O.dialCode}, priority=${O.priority}, areaCodes=${JSON.stringify(O.areaCodes)}, nationalPrefix=${JSON.stringify(O.nationalPrefix)}`);\n continue;\n }\n if (!O) {\n added++;\n lines.push(`+ ${iso}: dial=${G.dialCode}, priority=${G.priority}, areaCodes=${JSON.stringify(G.areaCodes)}, nationalPrefix=${JSON.stringify(G.nationalPrefix)}`);\n continue;\n }\n const parts = [];\n if (G.dialCode !== O.dialCode) parts.push(`dial: ${O.dialCode} -> ${G.dialCode}`);\n if ((G.priority || 0) !== (O.priority || 0)) parts.push(`priority: ${O.priority || 0} -> ${G.priority || 0}`);\n if (!eqArr(G.areaCodes, O.areaCodes)) parts.push(summarizeArrayChange(\"areaCodes\", O.areaCodes, G.areaCodes));\n if ((G.nationalPrefix || null) !== (O.nationalPrefix || null)) parts.push(`nationalPrefix: ${JSON.stringify(O.nationalPrefix || null)} -> ${JSON.stringify(G.nationalPrefix || null)}`);\n if (parts.length) {\n changed++;\n lines.push(`~ ${iso}: ${parts.join(\", \")}`);\n }\n }\n const out = [`# Summary: +${added} added, ~${changed} changed, -${removed} removed`, ...(lines.length ? lines : [])].join(\"\\n\");\n console.log(out);\n // Write to tmp file\n const outDir = path.resolve(REPO_ROOT, \"tmp\");\n try { fs.mkdirSync(outDir, { recursive: true }); } catch { /* ignore */ }\n fs.writeFileSync(path.join(outDir, \"rawCountryData.diff.txt\"), out + \"\\n\", \"utf8\");\n if (added || removed || changed) {\n // Exit with non-zero to signal differences (suitable for CI failure)\n process.exit(1);\n }\n }\n\n runDiff();\n\n // iso2 list is sourced from iso2-codes.js; we never write it from this script\n}\n\ntry {\n main();\n} catch (e) {\n console.error(\"Generation failed:\", e && e.stack ? e.stack : e);\n process.exit(1);\n}\n" }, { "path": "scripts/playwright-linux-docker.sh", "content": "#!/usr/bin/env bash\nset -euo pipefail\n\nPLAYWRIGHT_VERSION_DEFAULT=\"1.58.0\"\nPLAYWRIGHT_VERSION=\"$PLAYWRIGHT_VERSION_DEFAULT\"\n\n# Try to keep the Docker image version in sync with the repo's Playwright version.\nif command -v node >/dev/null 2>&1; then\n DETECTED_VERSION=\"$(node -e \"\n try {\n const pkg = require('./package.json');\n const spec = (pkg.devDependencies && (pkg.devDependencies['@playwright/test'] || pkg.devDependencies.playwright)) || '';\n const v = String(spec).replace(/^[^0-9]*/, '');\n if (v) process.stdout.write(v);\n } catch (e) {\n // ignore\n }\n \" 2>/dev/null || true)\"\n\n if [[ -n \"$DETECTED_VERSION\" ]]; then\n PLAYWRIGHT_VERSION=\"$DETECTED_VERSION\"\n fi\nfi\n\nIMAGE_DEFAULT=\"mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-jammy\"\nIMAGE=\"${PLAYWRIGHT_DOCKER_IMAGE:-$IMAGE_DEFAULT}\"\n\nif ! command -v docker >/dev/null 2>&1; then\n echo \"Docker is required to run Playwright in Linux.\" >&2\n echo \"Install Docker Desktop, then re-run this command.\" >&2\n exit 1\nfi\n\nWORKDIR=\"/work\"\n\nHOST_UID=\"\"\nHOST_GID=\"\"\nif command -v id >/dev/null 2>&1; then\n HOST_UID=\"$(id -u)\"\n HOST_GID=\"$(id -g)\"\nfi\n\nDOCKER_ARGS=(\n --rm\n --shm-size=1g\n -e HOME=/tmp\n -e npm_config_cache=/tmp/.npm\n -e npm_config_prefix=/tmp/.npm-global\n -e npm_config_update_notifier=false\n -e npm_config_fund=false\n -e npm_config_audit=false\n -e HOST_UID\n -e HOST_GID\n -v \"$(pwd):$WORKDIR\"\n -w \"$WORKDIR\"\n # Keep node_modules inside the container (avoid host permission issues and platform-specific deps).\n -v \"$WORKDIR/node_modules\"\n)\n\n# Useful on Apple Silicon if the image/platform doesn't match.\nif [[ -n \"${PLAYWRIGHT_DOCKER_PLATFORM:-}\" ]]; then\n DOCKER_ARGS+=( --platform \"$PLAYWRIGHT_DOCKER_PLATFORM\" )\nfi\n\n# Run the full workflow inside the container:\n# - install deps\n# - build\n# - run Playwright tests (pass through any extra args)\nexec docker run \"${DOCKER_ARGS[@]}\" \"$IMAGE\" bash -lc \\\n '\n set -euo pipefail\n\n mkdir -p \"$npm_config_cache\" \"$npm_config_prefix\"\n\n npm ci\n\n # Closure Compiler (grunt-google-closure-compiler) requires Java.\n apt-get update\n apt-get install -y --no-install-recommends openjdk-17-jre-headless\n rm -rf /var/lib/apt/lists/*\n\n npm run build\n\n npm run test:e2e -- \"$@\"\n\n # If we ran as root, ensure generated files are owned by the host user.\n if [[ -n \"${HOST_UID:-}\" && -n \"${HOST_GID:-}\" ]]; then\n chown -R \"${HOST_UID}:${HOST_GID}\" \\\n \"$WORKDIR/build\" \\\n \"$WORKDIR/tmp\" \\\n \"$WORKDIR/playwright-report\" \\\n \"$WORKDIR/test-results\" \\\n \"$WORKDIR/tests-e2e\" \\\n 2>/dev/null || true\n fi\n ' -- \"$@\"\n" }, { "path": "site/.gitignore", "content": "node_modules/\ntmp/\nbuild/\n" }, { "path": "site/Gruntfile.js", "content": "module.exports = function (grunt) {\n // load all tasks from package.json\n require(\"load-grunt-config\")(grunt);\n\n // build css\n grunt.registerTask(\"build:css\", [\n \"sass\",\n \"template:website_css\",\n \"template:large_flags_overrides_css\",\n \"cssmin\",\n ]);\n\n // build esbuild\n grunt.registerTask(\"build:esbuild\", [\n \"template:lookup_country_js\", // needs to go through esbuild for IPAPI_TOKEN injection\n \"template:right_to_left_js\",\n \"template:angular_component_js\",\n \"template:react_component_js\",\n \"template:playground_js\",\n \"shell:esbuild\",\n ]);\n\n // build vue component\n grunt.registerTask(\"build:vue_component\", [\n \"template:vue_component_js\",\n \"shell:vite\",\n ]);\n\n // build svelte component\n grunt.registerTask(\"build:svelte_component\", [\n \"template:svelte_component_js\",\n \"shell:viteSvelte\",\n ]);\n\n // build all\n grunt.registerTask(\"build\", [\n \"shell:clearBuild\",\n \"shell:fetchStats\",\n \"copy\",\n \"build:css\",\n \"build:esbuild\",\n \"build:vue_component\",\n \"build:svelte_component\",\n \"template\",\n \"replace:validationPrecise\",\n \"strip-html-comments\",\n ]);\n\n grunt.registerTask(\"strip-html-comments\", () => {\n const htmlFiles = grunt.file.expand({ dot: true }, [\"build/**/*.html\"]);\n let updatedCount = 0;\n\n htmlFiles.forEach((filePath) => {\n const input = grunt.file.read(filePath);\n const output = input.replace(//g, \"\");\n if (output !== input) {\n grunt.file.write(filePath, output);\n updatedCount += 1;\n }\n });\n\n grunt.log.writeln(\n `strip-html-comments: processed ${htmlFiles.length} files, updated ${updatedCount}`\n );\n });\n};\n" }, { "path": "site/README.md", "content": "# Website for intl-tel-input\n\nLive here: https://intl-tel-input.com\n\nThere are 4 page types:\n- Homepage\n- Docs page\n- Playground\n- Examples page\n\n## Contributing\n\nTo build and run the site locally:\n- Install the dependencies: run `npm install` in the root of the intl-tel-input project\n- Build the website: cd into the site/ directory and run `npm run build`\n- Run the website: cd into the build/ directory and start a web server, e.g. by running `http-server` (you may have to run `npm install -g http-server` first), and it will give you an address to open in your browser, and you should see the site running locally.\n\nMaking changes: \nIn the site/ directory, run `npm run watch` to automatically re-build when you edit the source files.\n\nSee src/ directory for HTML templates/partials, JS/CSS and the docs markdown files.\n\nSee grunt/template.js for where everything is threaded together." }, { "path": "site/esbuild/build.mjs", "content": "import { build } from \"esbuild\";\nimport externalUtilsPlugin from \"./externalUtilsPlugin.mjs\";\n\nconst sharedOptions = {\n bundle: true,\n plugins: [externalUtilsPlugin],\n minify: true,\n define: {\n // This replaces the string \"process.env.IPAPI_TOKEN\" with the actual value from Cloudflare's environment\n \"process.env.IPAPI_TOKEN\": JSON.stringify(process.env.IPAPI_TOKEN || \"\"),\n },\n};\n\n// lookup country example\nbuild({\n ...sharedOptions,\n entryPoints: [\"tmp/examples/js/lookup_country.js\"],\n outfile: \"build/examples/js/lookup_country.js\",\n});\n\n// right to left example\nbuild({\n ...sharedOptions,\n entryPoints: [\"tmp/examples/js/right_to_left.js\"],\n outfile: \"build/examples/js/right_to_left_bundle.js\",\n});\n\n// react component example\nbuild({\n ...sharedOptions,\n loader: { \".js\": \"jsx\" },\n entryPoints: [\"tmp/examples/js/react_component.js\"],\n outfile: \"build/examples/js/react_component_bundle.js\",\n});\n\n// angular component example\nbuild({\n ...sharedOptions,\n loader: { \".ts\": \"ts\" },\n tsconfig: \"../angular/tsconfig.json\",\n entryPoints: [\"tmp/examples/js/angular_component.ts\"],\n outfile: \"build/examples/js/angular_component_bundle.js\",\n});\n\n// playground\nbuild({\n ...sharedOptions,\n entryPoints: [\"src/playground/js/playground.js\"],\n outfile: \"build/js/playground.js\",\n});\n\n// all JS files in /src/js\nbuild({\n ...sharedOptions,\n entryPoints: [\"src/js/**/*.js\"],\n outdir: \"build/js\",\n});" }, { "path": "site/esbuild/externalUtilsPlugin.mjs", "content": "const externalUtilsPlugin = {\n name: \"external-utils-plugin\",\n setup({ onResolve }) {\n onResolve({ filter: /utils/ }, args => {\n return { path: args.path, external: true };\n });\n },\n};\n\nexport default externalUtilsPlugin;" }, { "path": "site/grunt/copy.js", "content": "module.exports = function (grunt) {\n return {\n plugin: {\n cwd: \"../build\", // set working folder / root to copy\n src: \"**/*\", // copy all files and subfolders\n dest: \"build/intl-tel-input\", // destination folder\n expand: true, // required when using cwd\n },\n react: {\n cwd: \"../react/build\", // set working folder / root to copy\n src: \"**/*\", // copy all files and subfolders\n dest: \"build/intl-tel-input/react\", // destination folder\n expand: true, // required when using cwd\n },\n vue: {\n cwd: \"../vue/build\", // set working folder / root to copy\n src: \"**/*\", // copy all files and subfolders\n dest: \"build/intl-tel-input/vue\", // destination folder\n expand: true, // required when using cwd\n },\n angular: {\n cwd: \"../angular/build\", // set working folder / root to copy\n src: \"**/*\", // copy all files and subfolders\n dest: \"build/intl-tel-input/angular\", // destination folder\n expand: true, // required when using cwd\n },\n svelte: {\n cwd: \"../svelte/build\", // set working folder / root to copy\n src: \"**/*\", // copy all files and subfolders\n dest: \"build/intl-tel-input/svelte\", // destination folder\n expand: true, // required when using cwd\n },\n static: {\n cwd: \"static\", // set working folder / root to copy\n src: \"**/*\", // copy all files and subfolders\n dest: \"build\", // destination folder\n expand: true, // required when using cwd\n },\n htaccess: {\n cwd: \"static\", // set working folder / root to copy\n src: \".htaccess\", // copy the .htaccess dotfile\n dest: \"build\", // destination folder\n expand: true, // required when using cwd\n },\n examples_css: {\n cwd: \"src/examples/css\", // set working folder / root to copy\n src: \"*\",\n dest: \"build/examples/css\", // destination folder\n expand: true, // required when using cwd\n }\n };\n};\n" }, { "path": "site/grunt/cssmin.js", "content": "module.exports = function(grunt) {\n return {\n target: {\n files: {\n // NOTE: don't minify large_flags_overrides.css because we link to it as an example from the large_flags example page\n 'build/css/website.css': 'build/css/website.css',\n 'build/css/playground.css': 'build/css/playground.css',\n 'build/css/homepage.css': 'build/css/homepage.css',\n 'build/css/docs.css': 'build/css/docs.css'\n }\n }\n };\n};\n" }, { "path": "site/grunt/fetchStats.js", "content": "const https = require(\"https\");\nconst fs = require(\"fs\");\nconst path = require(\"path\");\n\nfunction httpsGet(url) {\n return new Promise((resolve, reject) => {\n https.get(url, { headers: { \"User-Agent\": \"intl-tel-input-build\" } }, (res) => {\n let data = \"\";\n res.on(\"data\", (chunk) => { data += chunk; });\n res.on(\"end\", () => {\n if (res.statusCode !== 200) {\n reject(new Error(`HTTP ${res.statusCode} for ${url}`));\n } else {\n resolve(data);\n }\n });\n }).on(\"error\", reject);\n });\n}\n\nfunction formatNumber(n) {\n if (n >= 1_000_000) {\n const val = n / 1_000_000;\n return `${val % 1 === 0 ? val.toFixed(0) : val.toFixed(1)}M`;\n }\n if (n >= 1_000) {\n const val = n / 1_000;\n return `${val % 1 === 0 ? val.toFixed(0) : val.toFixed(1)}k`;\n }\n return `${n}`;\n}\n\nfunction roundToDisplay(n) {\n if (n >= 1_000_000) {\n return Math.round(n / 100_000) * 100_000;\n }\n if (n >= 100_000) {\n return Math.round(n / 1_000) * 1_000;\n }\n if (n >= 1_000) {\n return Math.round(n / 100) * 100;\n }\n return n;\n}\n\nasync function fetchStats() {\n const statsPath = path.join(__dirname, \"..\", \"tmp\", \"stats.json\");\n\n // Default/fallback values\n const defaults = { websites: \"120k\", downloads: \"3.2M\", stars: \"8.2k\" };\n\n const isProd = process.argv.includes(\"--env=prod\");\n if (!isProd) {\n console.log(\"Dev build — using default stats\");\n fs.mkdirSync(path.dirname(statsPath), { recursive: true });\n fs.writeFileSync(statsPath, JSON.stringify(defaults, null, 2));\n return;\n }\n\n let stats = { ...defaults };\n\n try {\n const ghData = JSON.parse(\n await httpsGet(\"https://api.github.com/repos/jackocnr/intl-tel-input\")\n );\n stats.stars = formatNumber(roundToDisplay(ghData.stargazers_count));\n } catch (e) {\n console.warn(\"Failed to fetch GitHub stars, using fallback:\", e.message);\n }\n\n try {\n const npmData = JSON.parse(\n await httpsGet(\"https://api.npmjs.org/downloads/point/last-month/intl-tel-input\")\n );\n stats.downloads = formatNumber(roundToDisplay(npmData.downloads));\n } catch (e) {\n console.warn(\"Failed to fetch npm downloads, using fallback:\", e.message);\n }\n\n try {\n const nerdyHtml = await httpsGet(\n \"https://www.nerdydata.com/reports/international-telephone-input/719de9d2-d0e7-4988-b02f-9f9d52687076\"\n );\n const match = nerdyHtml.match(/\"answerCount\"\\s*:\\s*(\\d+)/);\n if (match) {\n stats.websites = formatNumber(roundToDisplay(Number(match[1])));\n }\n } catch (e) {\n console.warn(\"Failed to fetch NerdyData count, using fallback:\", e.message);\n }\n\n fs.mkdirSync(path.dirname(statsPath), { recursive: true });\n fs.writeFileSync(statsPath, JSON.stringify(stats, null, 2));\n console.log(\"Stats fetched:\", stats);\n}\n\nfetchStats();\n" }, { "path": "site/grunt/replace.js", "content": "module.exports = function(grunt) {\n return {\n validationPrecise: {\n options: {\n patterns: [\n {\n match: /\\biti\\.isValidNumber\\(\\)/g,\n replacement: \"iti.isValidNumberPrecise()\",\n },\n ],\n },\n files: {\n \"build/examples/js/validation_precise.js\": \"build/examples/js/validation_precise.js\",\n },\n }\n };\n};" }, { "path": "site/grunt/sass.js", "content": "const sass = require('sass');\n\nmodule.exports = function(grunt) {\n return {\n main: {\n options: {\n implementation: sass,\n sourcemap: \"none\",\n },\n files: {\n 'build/css/website.css': 'src/css/website.scss',\n 'build/css/large_flags_overrides.css': 'src/css/large_flags_overrides.scss',\n 'build/css/highlightjs_overrides.css': 'src/css/highlightjs_overrides.scss',\n 'build/css/playground.css': 'src/css/playground.scss',\n 'build/css/docs.css': 'src/css/docs.scss',\n 'build/css/homepage.css': 'src/css/homepage.scss',\n }\n },\n };\n};\n" }, { "path": "site/grunt/shell.js", "content": "const os = require('os');\n\nmodule.exports = function(grunt) {\n return {\n clearBuild: {\n command: \"rm -rf build tmp\",\n },\n fetchStats: {\n command: `node grunt/fetchStats.js --env=${grunt.option(\"env\") || \"dev\"}`,\n },\n esbuild: {\n command: \"node esbuild/build.mjs\",\n },\n vite: {\n command: \"vite build --config src/examples/js/viteVueDemo.config.js\",\n },\n viteSvelte: {\n command: \"vite build --config src/examples/js/viteSvelteDemo.config.mjs\",\n },\n };\n};\n" }, { "path": "site/grunt/template.js", "content": "module.exports = function (grunt) {\n const path = require(\"path\");\n const {\n cacheBust,\n getDirHash,\n getI18nLanguages,\n createMarkdownRenderer,\n buildOpenGraphMetaTags,\n } = require(\"./templateUtils\");\n\n const env = grunt.option(\"env\");\n const isDevBuild = env === \"dev\" || env === \"development\";\n const showRightSidebarAd = !isDevBuild;\n\n const {\n makeTemplateTask,\n makeLayoutTask,\n readCommonPagePartials,\n readCommonBodyEndScript,\n readItiLiveResultsScript,\n readItiScript,\n } = require(\"./templateGruntHelpers\");\n\n // Helper: create a cache-bust template task for a built asset path\n const makeCacheBustTask = (assetPath) => ({\n src: assetPath,\n dest: assetPath,\n options: { data: () => ({ cacheBust }) },\n });\n\n const {\n docsDropdownPages,\n examplesDropdownPages,\n } = require(\"./templateNav\");\n\n const md = createMarkdownRenderer();\n\n const toBcp47LanguageTag = (code) => {\n const raw = String(code || \"\").trim();\n if (!raw) return \"\";\n const parts = raw.split(\"-\");\n if (parts.length === 1) return parts[0].toLowerCase();\n const [lang, region, ...rest] = parts;\n const normLang = String(lang).toLowerCase();\n const normRegion = region && region.length === 2 ? String(region).toUpperCase() : String(region || \"\");\n return [normLang, normRegion, ...rest].filter(Boolean).join(\"-\");\n };\n\n const escapeHtml = (value) =>\n String(value ?? \"\")\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\\\"/g, \""\")\n .replace(/'/g, \"'\");\n\n const createI18nLanguageListText = (languageCodes) => {\n const codes = Array.isArray(languageCodes) ? languageCodes.filter(Boolean) : [];\n if (!codes.length) {\n return \"_No language modules found._\";\n }\n\n let displayNames = null;\n try {\n if (typeof Intl !== \"undefined\" && Intl.DisplayNames) {\n displayNames = new Intl.DisplayNames([\"en\"], { type: \"language\" });\n }\n } catch {\n displayNames = null;\n }\n\n const items = codes\n .map((code) => {\n const tag = toBcp47LanguageTag(code);\n let label = null;\n try {\n label = displayNames && tag ? displayNames.of(tag) : null;\n } catch {\n label = null;\n }\n\n return {\n code: String(code),\n label: label ? String(label) : \"\",\n };\n });\n\n items.sort((a, b) => {\n const aKey = a.label || a.code;\n const bKey = b.label || b.code;\n return aKey.localeCompare(bKey, \"en\", { sensitivity: \"base\" });\n });\n\n return items\n .map(({ code, label }) => {\n const text = label ? `${label} (${code})` : code;\n return escapeHtml(text);\n })\n .join(\", \");\n };\n\n const homepageTitle = \"International Telephone Input\";\n const homepageMetaDesc = \"A JavaScript plugin for entering, formatting and validating international telephone numbers. Includes React, Vue, Angular and Svelte components.\";\n const homepageCanonicalUrl = \"https://intl-tel-input.com\";\n\n const playgroundTitle = \"Playground - International Telephone Input\";\n const playgroundMetaDesc = \"Try different initialisation options and see the plugin update live.\";\n const playgroundCanonicalUrl = \"https://intl-tel-input.com/playground\";\n\n const notFoundTitle = \"404 - Page not found | intl-tel-input\";\n const notFoundMetaDesc = \"Page not found.\";\n const notFoundCanonicalUrl = \"https://intl-tel-input.com/404\";\n\n const config = {\n // cache bust common assets\n iti_script: {\n src: \"src/shared/iti_script.html.ejs\",\n dest: \"tmp/shared/iti_script.html\",\n options: {\n data: () => ({ cacheBust, isDevBuild }),\n },\n },\n website_css: makeCacheBustTask(\"build/css/website.css\"),\n homepage_css: makeCacheBustTask(\"build/css/homepage.css\"),\n docs_css: makeCacheBustTask(\"build/css/docs.css\"),\n playground_css: makeCacheBustTask(\"build/css/playground.css\"),\n large_flags_overrides_css: makeCacheBustTask(\"build/css/large_flags_overrides.css\"),\n\n // homepage\n homepage_layout: {\n src: \"src/layout_template.html.ejs\",\n dest: \"tmp/homepage/homepage_layout.html\",\n options: {\n data: () => {\n const stats = JSON.parse(grunt.file.read(\"tmp/stats.json\"));\n const content = grunt.file.read(\"src/homepage/homepage_content.html\")\n .replace(\"{{STAT_WEBSITES}}\", stats.websites)\n .replace(\"{{STAT_DOWNLOADS}}\", stats.downloads)\n .replace(\"{{STAT_STARS}}\", stats.stars);\n return {\n layoutClass: \"iti-layout-no-sidebars\",\n showLeftSidebar: false,\n content,\n name: \"home\",\n pageType: \"home\",\n docsDropdownPages,\n examplesDropdownPages,\n };\n },\n },\n },\n homepage_page: {\n src: \"src/homepage/homepage_page_template.html.ejs\",\n dest: \"build/index.html\",\n options: {\n data: () => ({\n homepageTitle,\n homepageMetaDesc,\n homepageCanonicalUrl,\n cacheBust,\n isDevBuild,\n ...readCommonPagePartials(grunt, {\n cacheBust,\n isDevBuild,\n iti_styles: \"homepage\",\n }),\n og_meta_tags: buildOpenGraphMetaTags({\n title: homepageTitle,\n description: homepageMetaDesc,\n url: homepageCanonicalUrl,\n }),\n layout: grunt.file.read(\"tmp/homepage/homepage_layout.html\"),\n common_body_end: readCommonBodyEndScript(grunt),\n iti_live_results_script: readItiLiveResultsScript(grunt, { cacheBust }),\n iti_script: readItiScript(grunt),\n }),\n },\n },\n\n // playground\n playground_js: {\n src: \"src/playground/js/templates/playgroundConstants.js.ejs\",\n dest: \"tmp/playground/playgroundConstants.js\",\n options: {\n data: () => ({\n cacheBust,\n getDirHash,\n i18nLanguages: getI18nLanguages(),\n }),\n },\n },\n playground_layout: {\n src: \"src/layout_template.html.ejs\",\n dest: \"tmp/playground/playground_layout.html\",\n options: {\n data: () => ({\n showLeftSidebar: false,\n layoutClass: \"iti-layout-no-sidebars iti-layout--playground\",\n content: grunt.file.read(\"src/playground/playground_content.html\"),\n pageType: \"playground\",\n name: \"playground\",\n docsDropdownPages,\n examplesDropdownPages,\n }),\n },\n },\n playground_page: {\n src: \"src/playground/playground_page_template.html.ejs\",\n dest: \"build/playground.html\",\n options: {\n data: () => ({\n playgroundTitle,\n playgroundMetaDesc,\n playgroundCanonicalUrl,\n cacheBust,\n ...readCommonPagePartials(grunt, {\n cacheBust,\n isDevBuild,\n iti_styles: \"normal\",\n highlightjs_styles: true,\n }),\n og_meta_tags: buildOpenGraphMetaTags({\n title: playgroundTitle,\n description: playgroundMetaDesc,\n url: playgroundCanonicalUrl,\n }),\n layout: grunt.file.read(\"tmp/playground/playground_layout.html\"),\n common_body_end: readCommonBodyEndScript(grunt),\n iti_live_results_script: readItiLiveResultsScript(grunt, { cacheBust }),\n iti_script: readItiScript(grunt),\n }),\n },\n },\n\n // 404\n not_found_layout: {\n src: \"src/layout_template.html.ejs\",\n dest: \"tmp/404/not_found_layout.html\",\n options: {\n data: () => ({\n showLeftSidebar: false,\n layoutClass: \"iti-layout-no-sidebars\",\n content: grunt.file.read(\"src/404/404_content.html\"),\n pageType: \"home\",\n name: \"404\",\n docsDropdownPages,\n examplesDropdownPages,\n }),\n },\n },\n not_found_page: {\n src: \"src/404/404_page_template.html.ejs\",\n dest: \"build/404.html\",\n options: {\n data: () => ({\n cacheBust,\n head_title: notFoundTitle,\n canonical_url: notFoundCanonicalUrl,\n meta_desc: notFoundMetaDesc,\n og_meta_tags: buildOpenGraphMetaTags({\n title: notFoundTitle,\n description: notFoundMetaDesc,\n url: notFoundCanonicalUrl,\n }),\n ...readCommonPagePartials(grunt, {\n cacheBust,\n isDevBuild,\n iti_styles: \"none\",\n }),\n layout: grunt.file.read(\"tmp/404/not_found_layout.html\"),\n common_body_end: readCommonBodyEndScript(grunt),\n }),\n },\n },\n };\n\n const registerExample = ({\n key,\n title,\n metaDesc,\n js = {},\n extraJsTasks = [],\n content = {},\n layoutExtra = {},\n pageExtra = {},\n }) => {\n const slug = key.replace(/_/g, \"-\");\n const jsSrc = js.src || `src/examples/js/${key}.js`;\n // some examples build to tmp first\n const jsDest = js.dest || `${js.destDir || \"build\"}/examples/js/${key}.js`;\n const displayCode = content.displayCode || jsDest;\n const scriptName = js.script || `${key}.js`;\n\n const contentDest = content.dest || `tmp/examples/${key}_content.html`;\n const layoutDest = content.layoutDest || `tmp/examples/${key}_layout.html`;\n const pageDest = content.pageDest || `build/examples/${slug}.html`;\n\n // the HTML to actually use for the demo\n const markupName = content.markupName || key;\n const markupPath = `src/examples/html/${markupName}.html`;\n // the (cleaner) HTML we want to display in the \"Html\" section\n const displayMarkupCandidate = `src/examples/html/${markupName}_display_code.html`;\n const displayMarkupPath = grunt.file.exists(displayMarkupCandidate) ? displayMarkupCandidate : markupPath;\n\n const fullTitle = `${title} example - International Telephone Input`;\n const canonicalUrl = `https://intl-tel-input.com/examples/${slug}`;\n\n const templateData = {\n cacheBust,\n ...(js.data || {}),\n };\n\n config[`${key}_js`] = makeTemplateTask(jsSrc, jsDest, () => templateData);\n\n extraJsTasks.forEach((t) => {\n config[t.key] = makeTemplateTask(t.src, t.dest, () => ({ cacheBust }));\n });\n\n config[`${key}_content`] = makeTemplateTask(\n \"src/examples/examples_content_template.html.ejs\",\n contentDest,\n () => ({\n cacheBust,\n content_title: title,\n desc: grunt.file.read(`src/examples/copy/${key}_desc.html`),\n markup: grunt.file.read(markupPath),\n display_markup: grunt.file.read(displayMarkupPath),\n display_code: (() => {\n let displayCodeContent = grunt.file.read(displayCode);\n // hack so that the validation_precise example page shows the right validation method in the displayed code\n if (key === \"validation_precise\") {\n displayCodeContent = displayCodeContent.replace(\n /\\biti\\.isValidNumber\\(\\)/g,\n \"iti.isValidNumberPrecise()\"\n );\n }\n return grunt.template.process(displayCodeContent, { data: templateData });\n })(),\n script: scriptName,\n ...(content.demo_note ? { demo_note: content.demo_note } : {}),\n ...(content.hideMarkupSection\n ? { hideMarkupSection: true }\n : {}),\n ...(content.isRtl ? { isRtl: true } : {}),\n ...(content.extraData ? content.extraData() : {}),\n common_body_end: readCommonBodyEndScript(grunt),\n ...(content.includeItiScript\n ? { iti_script: readItiScript(grunt) }\n : {}),\n })\n );\n\n config[`${key}_layout`] = makeLayoutTask(grunt, {\n dest: layoutDest,\n showLeftSidebar: true,\n layoutClass: \"iti-layout-both-sidebars\",\n navPath: \"src/examples/examples_nav_template.html.ejs\",\n contentPath: contentDest,\n name: key,\n pageType: \"examples\",\n docsDropdownPages,\n examplesDropdownPages,\n extra: {\n ...layoutExtra,\n show_right_sidebar_ad: showRightSidebarAd,\n },\n });\n\n config[`${key}_page`] = makeTemplateTask(\n \"src/examples/examples_page_template.html.ejs\",\n pageDest,\n () => ({\n cacheBust,\n head_title: fullTitle,\n canonical_url: canonicalUrl,\n meta_desc: metaDesc,\n og_meta_tags: buildOpenGraphMetaTags({\n title: fullTitle,\n description: metaDesc,\n url: canonicalUrl,\n }),\n ...readCommonPagePartials(grunt, {\n cacheBust,\n isDevBuild,\n iti_styles: pageExtra.iti_styles || \"normal\",\n highlightjs_styles: true,\n }),\n content: grunt.file.read(layoutDest),\n ...pageExtra,\n })\n );\n };\n\n const docsDefinitions = [{\n key: \"choose_integration\",\n title: \"Choose integration\",\n metaDesc: \"Which integration of intl-tel-input is right for you? Pure JavaScript, React, Vue, Angular or Svelte component?\",\n }, {\n key: \"getting_started\",\n title: \"Getting started\",\n metaDesc: \"How to quickly get up and running with intl-tel-input.\",\n }, {\n key: \"options\",\n title: \"Initialisation options\",\n metaDesc: \"All the different options you can use when initialising intl-tel-input.\",\n }, {\n key: \"localisation\",\n title: \"Localisation\",\n metaDesc: \"How to localise country names and user interface strings, including RTL support.\",\n }, {\n key: \"accessibility\",\n title: \"Accessibility\",\n metaDesc: \"Accessibility guidance for intl-tel-input, including keyboard and screen reader support.\",\n }, {\n key: \"methods\",\n title: \"Methods\",\n metaDesc: \"All the different methods you can call on an intl-tel-input instance.\",\n }, {\n key: \"events\",\n title: \"Events\",\n metaDesc: \"All the different events that an intl-tel-input instance can emit.\",\n }, {\n key: \"utils\",\n title: \"Utilities script\",\n metaDesc: \"Learn about the utils script, what it's for and how to load it.\",\n }, {\n key: \"theming\",\n title: \"Theming / dark mode\",\n metaDesc: \"How to theme the plugin, including how to set it up for dark mode.\",\n }, {\n key: \"troubleshooting\",\n title: \"Troubleshooting\",\n metaDesc: \"Solutions to common problems and FAQs about intl-tel-input.\",\n }, {\n key: \"faq\",\n title: \"FAQ\",\n metaDesc: \"Frequently asked questions about intl-tel-input, including common setup and localisation topics.\",\n }, {\n key: \"react_component\",\n title: \"React component\",\n metaDesc: \"How to use the intl-tel-input React component.\",\n }, {\n key: \"vue_component\",\n title: \"Vue component\",\n metaDesc: \"How to use the intl-tel-input Vue component.\",\n }, {\n key: \"angular_component\",\n title: \"Angular component\",\n metaDesc: \"How to use the intl-tel-input Angular component.\",\n }, {\n key: \"svelte_component\",\n title: \"Svelte component\",\n metaDesc: \"How to use the intl-tel-input Svelte component.\",\n }];\n\n const exampleDefinitions = [{\n key: \"lookup_country\",\n title: \"Lookup user's country\",\n metaDesc: \"Automatically set the country based on the user's IP address.\",\n js: {\n // evaluate the template into tmp, then use esbuild for IPAPI_TOKEN injection\n destDir: \"tmp\",\n },\n content: {\n markupName: \"simple_input\",\n includeItiScript: true,\n displayCode: \"src/examples/js/lookup_country_display_code.js\",\n },\n }, {\n key: \"right_to_left\",\n title: \"Right to left\",\n metaDesc: \"Support for right-to-left languages.\",\n js: {\n destDir: \"tmp\",\n script: \"right_to_left_bundle.js\",\n },\n content: {\n markupName: \"simple_input\",\n isRtl: true,\n displayCode: \"src/examples/js/right_to_left_display_code.js\",\n },\n layoutExtra: { isRtl: true },\n }, {\n key: \"single_country\",\n title: \"Single country\",\n metaDesc: \"When you only need to handle numbers from a single country.\",\n content: {\n demo_note: \"

Enter a US number:

\",\n markupName: \"validation\",\n includeItiScript: true,\n displayCode: \"src/examples/js/single_country_display_code.js\",\n },\n pageExtra: { stylesheet_after_website_css: \"/examples/css/validation.css\" },\n }, {\n key: \"validation_practical\",\n title: \"Validation\",\n metaDesc:\n \"Validate the user's phone number and if there's an error, display a relevant message.\",\n js: {\n src: \"src/examples/js/validation.js\",\n },\n content: {\n markupName: \"validation\",\n includeItiScript: true,\n displayCode: \"src/examples/js/validation_display_code.js\",\n extraData: () => ({\n demo_note: `

NOTE: by default, isValidNumber only returns true for mobile and fixed line numbers. See allowedNumberTypes option for more information.

`,\n }),\n },\n pageExtra: {\n stylesheet_after_website_css: \"/examples/css/validation.css\",\n },\n }, {\n key: \"validation_precise\",\n title: \"Precise validation (advanced)\",\n metaDesc:\n \"Validate the user's phone number using the more precise method, and if there's an error, display a relevant message.\",\n js: {\n src: \"src/examples/js/validation.js\",\n },\n content: {\n markupName: \"validation\",\n includeItiScript: true,\n displayCode: \"src/examples/js/validation_display_code.js\",\n extraData: () => ({\n demo_note: `

NOTE: by default, isValidNumberPrecise only returns true for mobile and fixed line numbers. See allowedNumberTypes option for more information.

`,\n }),\n },\n pageExtra: {\n stylesheet_after_website_css: \"/examples/css/validation.css\",\n },\n }, {\n key: \"hidden_input\",\n title: \"Hidden input\",\n metaDesc:\n \"Automatically populate a hidden input with the full international number, so it gets submitted to your backend.\",\n content: {\n includeItiScript: true,\n markupName: \"validation\",\n displayCode: \"src/examples/js/hidden_input_display_code.js\",\n },\n }, {\n key: \"multiple_instances\",\n title: \"Multiple instances\",\n metaDesc: \"Use multiple instances of the plugin with different configurations on the same page.\",\n content: {\n includeItiScript: true,\n displayCode: \"src/examples/js/multiple_instances_display_code.js\",\n },\n pageExtra: {\n stylesheet_after_website_css: \"/examples/css/multiple_instances.css\",\n },\n }, {\n key: \"display_number\",\n title: \"Display existing number\",\n metaDesc: \"Automatically format an existing number during initialisation.\",\n js: {\n src: \"src/examples/js/simple_init_plugin.js\",\n },\n content: {\n includeItiScript: true,\n displayCode: \"src/examples/js/simple_init_plugin_display_code.js\",\n },\n }, {\n key: \"large_flags\",\n title: \"Large flags\",\n metaDesc: \"How to display extra large flag images.\",\n js: {\n src: \"src/examples/js/simple_init_plugin.js\",\n },\n content: {\n markupName: \"simple_input\",\n includeItiScript: true,\n displayCode: \"src/examples/js/simple_init_plugin_display_code.js\",\n },\n pageExtra: {\n iti_styles: \"largeFlags\",\n },\n }, {\n key: \"angular_component\",\n title: \"Angular component\",\n metaDesc: \"How to use intl-tel-input with Angular.\",\n js: {\n src: \"src/examples/js/angular_component.ts\",\n dest: \"tmp/examples/js/angular_component.ts\",\n script: \"angular_component_bundle.js\",\n },\n content: {\n markupName: \"component\",\n hideMarkupSection: true,\n displayCode: \"src/examples/js/angular_component_display_code.js\",\n script: \"angular_component_bundle.js\",\n },\n }, {\n key: \"react_component\",\n title: \"React component\",\n metaDesc: \"How to use intl-tel-input with React.\",\n js: {\n dest: \"tmp/examples/js/react_component.js\",\n script: \"react_component_bundle.js\",\n },\n content: {\n markupName: \"component\",\n hideMarkupSection: true,\n displayCode: \"src/examples/js/react_component_display_code.js\",\n script: \"react_component_bundle.js\",\n },\n }, {\n key: \"vue_component\",\n title: \"Vue component\",\n metaDesc: \"How to use intl-tel-input with Vue.\",\n js: {\n // need to specify the source because of the alternative .vue extension\n src: \"src/examples/js/vue_component.vue\",\n dest: \"tmp/examples/js/vue_component.vue\",\n script: \"vue_component_bundle.js\",\n },\n content: {\n markupName: \"component\",\n hideMarkupSection: true,\n displayCode: \"src/examples/js/vue_component_display_code.vue\",\n script: \"vue_component_bundle.js\",\n },\n }, {\n key: \"svelte_component\",\n title: \"Svelte component\",\n metaDesc: \"How to use intl-tel-input with Svelte.\",\n js: {\n // need to specify the source because of the alternative .svelte extension\n src: \"src/examples/js/svelte_component.svelte\",\n dest: \"tmp/examples/js/svelte_component.svelte\",\n script: \"svelte_component_bundle.js\",\n },\n content: {\n markupName: \"component\",\n hideMarkupSection: true,\n displayCode: \"src/examples/js/svelte_component_display_code.svelte\",\n script: \"svelte_component_bundle.js\",\n },\n }];\n\n exampleDefinitions.forEach((definition) => registerExample(definition));\n\n docsDefinitions.forEach(({ key, title, metaDesc }) => {\n const mdPath = path.join(\"src\", \"docs\", \"markdown\", `${key}.md`);\n const urlSlug = key.replace(/_/g, \"-\");\n const destPath = `build/docs/${urlSlug}.html`;\n const canonicalUrl = `https://intl-tel-input.com/docs/${urlSlug}`;\n const fullTitle = `${title} docs - International Telephone Input`;\n\n config[`docs_content_${key}`] = {\n src: \"src/docs/docs_content_template.html.ejs\",\n dest: `tmp/docs/${key}_content.html`,\n options: {\n data: () => ({\n docKey: key,\n html: (() => {\n let source = grunt.file.read(mdPath);\n if (key === \"localisation\") {\n const languageList = createI18nLanguageListText(getI18nLanguages());\n source = source.replace(\"\", `\\n${languageList}\\n`);\n }\n return md.render(source, { docKey: key });\n })(),\n }),\n },\n };\n\n config[`docs_layout_${key}`] = {\n src: \"src/layout_template.html.ejs\",\n dest: `tmp/docs/${key}_layout.html`,\n options: {\n data: () => ({\n showLeftSidebar: true,\n layoutClass: \"iti-layout-both-sidebars\",\n nav: grunt.file.read(\"src/docs/docs_nav_template.html.ejs\"),\n content: grunt.file.read(`tmp/docs/${key}_content.html`),\n name: key,\n pageType: \"docs\",\n docsDropdownPages,\n examplesDropdownPages,\n show_right_sidebar_ad: showRightSidebarAd,\n }),\n },\n };\n\n config[`docs_page_${key}`] = {\n src: \"src/docs/docs_page_template.html.ejs\",\n dest: destPath,\n options: {\n data: () => ({\n cacheBust,\n head_title: fullTitle,\n canonical_url: canonicalUrl,\n meta_desc: metaDesc,\n og_meta_tags: buildOpenGraphMetaTags({\n title: fullTitle,\n description: metaDesc,\n url: canonicalUrl,\n }),\n ...readCommonPagePartials(grunt, {\n cacheBust,\n isDevBuild,\n highlightjs_styles: true,\n iti_styles: \"none\",\n }),\n layout: grunt.file.read(`tmp/docs/${key}_layout.html`),\n common_body_end: readCommonBodyEndScript(grunt),\n }),\n },\n };\n });\n\n return config;\n};\n" }, { "path": "site/grunt/templateGruntHelpers.js", "content": "const makeTemplateTask = (src, dest, data) => ({\n src,\n dest,\n options: {\n data,\n },\n});\n\nconst readCommonPagePartials = (grunt, data) => ({\n common_meta_tags: grunt.file.read(\"src/shared/common_meta_tags.html\"),\n common_styles: grunt.template.process(grunt.file.read(\"src/shared/common_styles.html.ejs\"), {\n data,\n }),\n common_head_end_prod: data && data.isDevBuild\n ? \"\"\n : grunt.file.read(\"src/shared/common_head_end_prod.html\"),\n});\n\nconst readCommonBodyEndScript = (grunt) => grunt.file.read(\"src/shared/common_body_end.html\");\n\nconst readItiLiveResultsScript = (grunt, data) =>\n grunt.template.process(grunt.file.read(\"src/shared/iti_live_results_script.html.ejs\"), {\n data,\n });\n\nconst readItiScript = (grunt) => grunt.file.read(\"tmp/shared/iti_script.html\");\n\nconst makeLayoutTask = (\n grunt,\n {\n dest,\n showLeftSidebar,\n layoutClass,\n navPath,\n contentPath,\n name,\n pageType,\n docsDropdownPages,\n examplesDropdownPages,\n extra = {},\n }\n) =>\n makeTemplateTask(\"src/layout_template.html.ejs\", dest, () => ({\n showLeftSidebar,\n layoutClass,\n ...(navPath ? { nav: grunt.file.read(navPath) } : {}),\n content: grunt.file.read(contentPath),\n name,\n pageType,\n docsDropdownPages,\n examplesDropdownPages,\n ...extra,\n }));\n\nmodule.exports = {\n makeTemplateTask,\n makeLayoutTask,\n readCommonPagePartials,\n readCommonBodyEndScript,\n readItiLiveResultsScript,\n readItiScript,\n};\n" }, { "path": "site/grunt/templateNav.js", "content": "const docsDropdownPages = [\n { name: \"choose_integration\", href: \"/docs/choose-integration\", label: \"Choose integration\" },\n { name: \"getting_started\", href: \"/docs/getting-started\", label: \"Getting started\" },\n { name: \"options\", href: \"/docs/options\", label: \"Initialisation options\" },\n { name: \"localisation\", href: \"/docs/localisation\", label: \"Localisation\" },\n { name: \"accessibility\", href: \"/docs/accessibility\", label: \"Accessibility\" },\n { name: \"methods\", href: \"/docs/methods\", label: \"Methods\" },\n { name: \"events\", href: \"/docs/events\", label: \"Events\" },\n { name: \"utils\", href: \"/docs/utils\", label: \"Utilities script\" },\n { name: \"theming\", href: \"/docs/theming\", label: \"Theming / dark mode\" },\n { name: \"troubleshooting\", href: \"/docs/troubleshooting\", label: \"Troubleshooting\" },\n { name: \"faq\", href: \"/docs/faq\", label: \"FAQ\" },\n { name: \"react_component\", href: \"/docs/react-component\", label: \"React component\" },\n { name: \"vue_component\", href: \"/docs/vue-component\", label: \"Vue component\" },\n { name: \"angular_component\", href: \"/docs/angular-component\", label: \"Angular component\" },\n { name: \"svelte_component\", href: \"/docs/svelte-component\", label: \"Svelte component\" },\n];\n\nconst examplesDropdownPages = [\n { name: \"validation_practical\", href: \"/examples/validation-practical\", label: \"Validation\" },\n { name: \"lookup_country\", href: \"/examples/lookup-country\", label: \"Lookup user's country\" },\n { name: \"single_country\", href: \"/examples/single-country\", label: \"Single country\" },\n { name: \"right_to_left\", href: \"/examples/right-to-left\", label: \"Right to left\" },\n { name: \"hidden_input\", href: \"/examples/hidden-input\", label: \"Hidden input\" },\n { name: \"display_number\", href: \"/examples/display-number\", label: \"Display existing number\" },\n { name: \"multiple_instances\", href: \"/examples/multiple-instances\", label: \"Multiple instances\" },\n { name: \"validation_precise\", href: \"/examples/validation-precise\", label: \"Precise validation (advanced)\" },\n { name: \"large_flags\", href: \"/examples/large-flags\", label: \"Large flags\" },\n { name: \"react_component\", href: \"/examples/react-component\", label: \"React component\" },\n { name: \"vue_component\", href: \"/examples/vue-component\", label: \"Vue component\" },\n { name: \"angular_component\", href: \"/examples/angular-component\", label: \"Angular component\" },\n { name: \"svelte_component\", href: \"/examples/svelte-component\", label: \"Svelte component\" },\n];\n\nmodule.exports = {\n docsDropdownPages,\n examplesDropdownPages,\n};\n" }, { "path": "site/grunt/templateUtils.js", "content": "const path = require(\"path\");\nconst fs = require(\"fs\");\nconst crypto = require(\"crypto\");\nconst MarkdownIt = require(\"markdown-it\");\nconst markdownItAnchor = require(\"markdown-it-anchor\");\n\nconst BUILD_DIR = \"build\";\nconst HASH_LENGTH = 12;\n\nconst hashCacheByPath = new Map();\n\nconst toPosixPath = (p) => String(p || \"\").replace(/\\\\/g, \"/\");\n\nconst defaultSlugifyHeading = (value) =>\n String(value)\n .trim()\n .toLowerCase()\n // remove apostrophes\n .replace(/['’]/g, \"\")\n // replace non-alphanumeric with hyphens\n .replace(/[^a-z0-9]+/g, \"-\")\n // collapse repeats\n .replace(/-+/g, \"-\")\n // trim hyphens\n .replace(/^-|-$/g, \"\");\n\n// This plugin (AI-generated) looks for the \"options\" doc (etc), and injects table layout markup for display purposes. It relies on each h6 option being immediately followed by a paragraph containing the Type/Default info, and then any remaining content for that option (e.g. description, examples) coming after that in the same section (until the next heading).\nconst addDocOptionsLayoutPlugin = (md) => {\n md.core.ruler.after(\"inline\", \"iti_doc_options_layout\", (state) => {\n const env = state.env || {};\n const applyToDocKeys = [\"options\", \"react_component\", \"vue_component\", \"angular_component\", \"svelte_component\"];\n if (!applyToDocKeys.includes(env.docKey)) return;\n\n const tokens = state.tokens;\n const isHeadingOpen = (token, tag) => token && token.type === \"heading_open\" && token.tag === tag;\n const isAnyHeadingOpen = (token) => token && token.type === \"heading_open\" && /^h[1-6]$/.test(token.tag);\n\n const makeHtmlBlock = (content) => {\n const token = new state.Token(\"html_block\", \"\", 0);\n token.content = content;\n return token;\n };\n\n const startRowAndKeyCellMarkup = () =>\n makeHtmlBlock(\n '
\\n' +\n '
\\n',\n );\n\n const endKeyCellAndStartValueCellMarkup = () =>\n makeHtmlBlock(\n \"
\\n\" +\n '
\\n',\n );\n\n const endValueCellAndRowMarkup = () => makeHtmlBlock(\"
\\n
\\n\");\n\n const nextTokens = [];\n let i = 0;\n\n const consumeThroughHeadingClose = (tagName) => {\n while (i < tokens.length) {\n const t = tokens[i];\n nextTokens.push(t);\n i += 1;\n if (t.type === \"heading_close\" && t.tag === tagName) return;\n }\n };\n\n const findHeadingCloseIndex = (startIndex, tagName) => {\n for (let k = startIndex; k < tokens.length; k += 1) {\n const t = tokens[k];\n if (t.type === \"heading_close\" && t.tag === tagName) return k;\n }\n return -1;\n };\n\n // ad blocks are divs with class=\"article-ad\", but MarkdownIt treats divs and their contents as a single raw \"html_block\" token\n const isAdBlockOpen = (token) => token.type === \"html_block\" && token.content.includes('class=\"article-ad\"');\n\n const consumeUntilNextHeadingOrAdBlock = () => {\n while (i < tokens.length) {\n const t = tokens[i];\n if (isAnyHeadingOpen(t) || isAdBlockOpen(t)) return;\n nextTokens.push(t);\n i += 1;\n }\n };\n\n const consumeOptionBlock = () => {\n nextTokens.push(startRowAndKeyCellMarkup());\n\n // H6 heading (option name) lives in the key cell.\n nextTokens.push(tokens[i]);\n i += 1;\n consumeThroughHeadingClose(\"h6\");\n\n // The Type/Default paragraph also lives in the key cell.\n // Consume paragraph_open, inline, paragraph_close.\n while (i < tokens.length && tokens[i].type !== \"paragraph_close\") {\n nextTokens.push(tokens[i]);\n i += 1;\n }\n if (i < tokens.length && tokens[i].type === \"paragraph_close\") {\n nextTokens.push(tokens[i]);\n i += 1;\n }\n\n // Switch to the value cell for the rest of the option content.\n nextTokens.push(endKeyCellAndStartValueCellMarkup());\n\n consumeUntilNextHeadingOrAdBlock();\n nextTokens.push(endValueCellAndRowMarkup());\n };\n\n while (i < tokens.length) {\n const token = tokens[i];\n if (isHeadingOpen(token, \"h6\")) {\n // Only treat this heading as an \"option\" row when the very next block\n // after the heading close is a paragraph containing the Type/Default meta info\n const closeIndex = findHeadingCloseIndex(i, \"h6\");\n const afterClose = closeIndex >= 0 ? closeIndex + 1 : -1;\n if (afterClose >= 0 && tokens[afterClose] && tokens[afterClose].type === \"paragraph_open\") {\n const inlineToken = tokens[afterClose + 1];\n const inlineContent = inlineToken && inlineToken.type === \"inline\" ? inlineToken.content : \"\";\n if (inlineContent.includes(\"Type:\") && inlineContent.includes(\"Default:\")) {\n consumeOptionBlock();\n continue;\n }\n }\n\n // Not an options entry: emit the heading tokens unchanged.\n nextTokens.push(token);\n i += 1;\n continue;\n }\n\n nextTokens.push(token);\n i += 1;\n }\n\n state.tokens = nextTokens;\n });\n};\n\nconst createMarkdownRenderer = ({ slugifyHeading = defaultSlugifyHeading } = {}) => {\n const md = new MarkdownIt({\n html: true,\n linkify: true,\n typographer: true,\n }).use(markdownItAnchor, {\n slugify: slugifyHeading,\n permalink: markdownItAnchor.permalink.headerLink({ safariReaderFix: true }),\n });\n\n addDocOptionsLayoutPlugin(md);\n return md;\n};\n\nconst resolveBuildPathFromUrl = (urlPath) => {\n const clean = toPosixPath(String(urlPath || \"\").split(\"?\")[0]);\n const withoutLeadingSlash = clean.replace(/^\\//, \"\");\n return path.join(BUILD_DIR, withoutLeadingSlash);\n};\n\nconst hashFile = (filePath) => {\n const resolved = path.resolve(filePath);\n if (hashCacheByPath.has(resolved)) return hashCacheByPath.get(resolved);\n\n try {\n const content = fs.readFileSync(resolved);\n const hash = crypto\n .createHash(\"sha256\")\n .update(content)\n .digest(\"hex\")\n .slice(0, HASH_LENGTH);\n hashCacheByPath.set(resolved, hash);\n return hash;\n } catch {\n const fallback = \"missing\";\n hashCacheByPath.set(resolved, fallback);\n return fallback;\n }\n};\n\nconst hashDirRecursive = (dirPath) => {\n const resolved = path.resolve(dirPath);\n const cacheKey = `${resolved}:dir`;\n if (hashCacheByPath.has(cacheKey)) return hashCacheByPath.get(cacheKey);\n\n try {\n const files = [];\n const walk = (currentDir) => {\n fs.readdirSync(currentDir, { withFileTypes: true }).forEach((entry) => {\n const abs = path.join(currentDir, entry.name);\n if (entry.isDirectory()) {\n walk(abs);\n } else if (entry.isFile()) {\n files.push(abs);\n }\n });\n };\n\n walk(resolved);\n files.sort((a, b) => a.localeCompare(b));\n\n const hasher = crypto.createHash(\"sha256\");\n files.forEach((abs) => {\n const rel = path.relative(resolved, abs);\n hasher.update(rel);\n hasher.update(\"\\0\");\n hasher.update(fs.readFileSync(abs));\n hasher.update(\"\\0\");\n });\n\n const hash = hasher.digest(\"hex\").slice(0, HASH_LENGTH);\n hashCacheByPath.set(cacheKey, hash);\n return hash;\n } catch {\n const fallback = \"missing\";\n hashCacheByPath.set(cacheKey, fallback);\n return fallback;\n }\n};\n\n// Take a URL path (e.g. \"/intl-tel-input/js/utils.js\"), resolve it to a file in the build directory, hash that file, and return the URL with a cache-busting query param (e.g. \"/intl-tel-input/js/utils.js?v=abc123\").\nconst cacheBust = (urlPath) => {\n const resolvedPath = resolveBuildPathFromUrl(urlPath);\n return `${urlPath}?v=${hashFile(resolvedPath)}`;\n};\n\n// Take a URL path to a directory (e.g. \"/intl-tel-input/js/i18n\"), resolve it to a directory in the build directory, hash all files within that directory recursively, and return the hash to use as a cache-busting query param (e.g. \"abc123\").\nconst getDirHash = (urlDirPath) => {\n const resolvedPath = resolveBuildPathFromUrl(urlDirPath);\n return hashDirRecursive(resolvedPath);\n};\n\nconst getI18nLanguages = () => {\n try {\n const i18nDir = path.join(BUILD_DIR, \"intl-tel-input\", \"js\", \"i18n\");\n return fs\n .readdirSync(i18nDir, { withFileTypes: true })\n .filter((d) => d.isDirectory())\n .map((d) => d.name)\n .filter(Boolean)\n .sort((a, b) => a.localeCompare(b));\n } catch {\n return [];\n }\n};\n\nconst escapeHtmlAttr = (value) =>\n String(value ?? \"\")\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\\\"/g, \""\");\n\nconst buildOpenGraphMetaTags = ({\n title,\n description,\n url,\n}) => {\n return [\n ``,\n ``,\n ``,\n ``,\n ``,\n ``,\n ].join(\"\\n\");\n};\n\nmodule.exports = {\n createMarkdownRenderer,\n cacheBust,\n getDirHash,\n getI18nLanguages,\n buildOpenGraphMetaTags,\n};\n" }, { "path": "site/grunt/watch.js", "content": "module.exports = function(grunt) {\n return {\n js: {\n files: [\"src/**/*\", \"static/**/*\", \"grunt/**/*\", \"../build/**/*\"],\n tasks: \"build\"\n }\n };\n};\n" }, { "path": "site/package.json", "content": "{\n \"name\": \"iti-website\",\n \"version\": \"1.0.0\",\n \"description\": \"The website for intl-tel-input\",\n \"dependencies\": {\n \"intl-tel-input\": \"*\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n \"devDependencies\": {\n \"@angular/compiler\": \"^19.2.18\",\n \"@angular/core\": \"^19.2.18\",\n \"@angular/forms\": \"^19.2.18\",\n \"@angular/platform-browser\": \"^19.2.18\",\n \"@vitejs/plugin-vue\": \"^5.1.3\",\n \"esbuild\": \"^0.25.0\",\n \"eslint\": \"^8.38.0\",\n \"grunt\": \"^1.6.1\",\n \"grunt-contrib-copy\": \"^1.0.0\",\n \"grunt-contrib-cssmin\": \"^5.0.0\",\n \"grunt-contrib-watch\": \"^1.1.0\",\n \"grunt-replace\": \"^2.0.2\",\n \"grunt-sass\": \"^3.0.0\",\n \"grunt-shell\": \"^4.0.0\",\n \"grunt-template\": \"^1.0.0\",\n \"load-grunt-config\": \"^4.0.1\",\n \"markdown-it\": \"^14.1.0\",\n \"markdown-it-anchor\": \"^9.2.0\",\n \"prettier\": \"^2.8.7\",\n \"prop-types\": \"^15.8.1\",\n \"zone.js\": \"^0.15.1\"\n },\n \"scripts\": {\n \"watch\": \"grunt watch --env=dev\",\n \"build\": \"grunt build --env=dev\",\n \"build:prod\": \"grunt build --env=prod\"\n }\n}\n" }, { "path": "site/src/404/404_content.html", "content": "
\n
\n
\n

404

\n

That page doesn’t exist.

\n\n
\n Go to homepage\n
\n
\n
\n
\n" }, { "path": "site/src/404/404_page_template.html.ejs", "content": "\n\n \n <%= common_meta_tags %>\n <%= head_title %>\n \" />\n \">\n\n <%= og_meta_tags %>\n <%= common_styles %>\n\n <%= common_head_end_prod %>\n \n\n \n <%= layout %>\n <%= common_body_end %>\n \n\n" }, { "path": "site/src/css/_base.scss", "content": "html {\n /* fix: links with # scroll values in (e.g. docs/options#separatedialcode) scroll until subtitle is below header, as it has position:sticky */\n scroll-padding-top: 70px;\n}\n\nbody {\n min-height: 100vh;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n* {\n box-sizing: border-box;\n}\n\n/* vue and react logos in news section on homepage */\np img {\n vertical-align: baseline;\n}\n\nh2,\nh3 {\n margin-top: 20px;\n margin-bottom: 10px;\n}\nh1 {\n margin-bottom: 20px;\n}\n\n/* bootstrap override */\n@media (min-width: 1200px) {\n .h2,\n h2 {\n font-size: 1.7rem;\n }\n}\n\n.section {\n margin-bottom: 30px;\n}\n\n/** Cookie / Google consent repositioning (desktop) **/\n@media (min-width: 800px) {\n body .fc-consent-root .fc-dialog-container {\n position: absolute !important;\n bottom: 30px !important;\n right: 30px !important;\n }\n}\n\n.iti-live-results {\n margin: 10px 0 20px;\n border: 1px solid rgb(var(--header-bg-color-rgb));\n padding: 10px;\n border-radius: 3px;\n background-color: rgb(var(--header-bg-color-rgb) / 0.3);\n font-style: italic;\n text-align: left;\n}\n\n/* Page breadcrumb (Docs/Examples) */\n.iti-breadcrumb {\n margin-bottom: 0.25rem;\n font-size: 0.875rem;\n color: var(--bs-secondary-color);\n\n &__list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n }\n &__item + &__item::before {\n content: \"/\";\n opacity: 0.6;\n padding: 0 0.4rem;\n }\n a {\n color: inherit;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n// prevent layout shift when initialise components / show validation errors in demos\n#app,\n.validation-demo {\n min-height: 71px;\n}\n\n// in-article ads should have some margin\n.article-ad {\n margin: 20px 0;\n}\n\n// Anchor link styles for clickable section titles (used on Docs and Playground pages)\n.header-anchor {\n // reset title styles, now that they're wrapped in a link\n color: inherit;\n &:not(:hover) {\n text-decoration: none;\n }\n // on non-touch screens\n @media (hover: hover) and (pointer: fine) {\n &::before {\n position: absolute;\n content: \"#\";\n margin-left: -0.9em; // space from title\n padding-right: 0.9em; // allow moving cursor from title to icon without losing hover state\n margin-top: 0.3em;\n font-size: 0.75em;\n color: var(--bs-secondary-color);\n }\n }\n &:not(:hover,:focus)::before {\n visibility: hidden;\n }\n}" }, { "path": "site/src/css/_forms.scss", "content": "// example page demos\n.demo input[type=\"tel\"] {\n width: 250px;\n}\n// override bootstrap default placeholder color which is too high contrast for our design\ninput::placeholder,\n.demo input::placeholder,\ninput.form-control::placeholder,\ntextarea.form-control::placeholder {\n color: #bbb;\n\n @media (prefers-color-scheme: dark) {\n color: #5a5a5a;\n }\n}\n// match bootstrap input border radius\n.iti__selected-country-primary {\n border-top-left-radius: var(--bs-border-radius);\n border-bottom-left-radius: var(--bs-border-radius);\n}\n\n:root {\n /* plugin overrides (NOTE: the bootstrap vars handle dark mode automatically) */\n --iti-border-color: var(--bs-border-color);\n --iti-dropdown-bg: var(--bs-body-bg);\n --iti-icon-color: var(--bs-body-color);\n --iti-hover-color: #f8f9fa;\n\n @media (prefers-color-scheme: dark) {\n --iti-hover-color: #30363d;\n }\n}\n\n.iti__dropdown-content,\n.iti__search-input {\n border-radius: var(--bs-border-radius);\n}" }, { "path": "site/src/css/_layout.scss", "content": "/* LAYOUT */\n.iti-gutter {\n --bs-gutter-x: 3rem;\n}\n/* never show the right sidebar on mobile (or on some desktop pages) */\n/* NOTE: can't include left-sidebar here, because it is always used on mobile */\n.iti-right-sidebar {\n display: none;\n}\n\n@media (min-width: 992px) {\n .iti-layout-both-sidebars {\n display: grid;\n grid-template-areas: \"nav main ads\";\n /* this minmax ensures main block doesn't encroach on sidebars */\n grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);\n gap: 1.5rem;\n }\n}\n\n.iti-layout-both-sidebars {\n .iti-left-sidebar {\n grid-area: nav;\n min-width: 0;\n }\n .iti-right-sidebar {\n grid-area: ads;\n min-width: 0;\n }\n}\n\n@media (min-width: 992px) {\n .iti-layout-both-sidebars {\n .iti-left-sidebar,\n .iti-right-sidebar {\n position: sticky;\n top: 5rem;\n display: block !important;\n height: calc(100vh - 6rem);\n padding-left: 0.25rem;\n margin-left: -0.25rem;\n overflow-y: auto;\n }\n }\n}\n.iti-main {\n grid-area: main;\n min-width: 0;\n padding-bottom: 30px;\n}\n\n/* Sticky-footer layout: ensure short pages still fill the viewport so any\n * elements injected at end of (e.g. AdSense) get pushed down. */\n.iti-page {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n.iti-page__main {\n flex: 1 0 auto;\n}\n" }, { "path": "site/src/css/_navbar.scss", "content": "/* TOP NAVBAR */\n.iti-navbar {\n padding: 0.75rem 0;\n background-image: linear-gradient(rgb(var(--header-bg-color-rgb) / 1), rgb(var(--header-bg-color-rgb) / 0.95));\n box-shadow: 0 .5rem 1rem #00000026;\n\n .navbar-toggler {\n padding: 0;\n border: 0;\n }\n\n /* Header dropdown toggle: replace Bootstrap caret triangle with CSS chevron */\n .dropdown-toggle::after {\n display: inline-block;\n width: 7px;\n height: 7px;\n margin: 0px 0 3px 4px;\n content: \"\";\n border: solid currentColor;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n // cute spinny logo animation on hover\n @media (hover: hover) and (pointer: fine) {\n .iti-logo {\n transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .navbar-brand:hover .iti-logo {\n transform: rotate(360deg) scale(1.1);\n }\n }\n}\n\n@media (min-width: 992px) {\n .iti-navbar-container {\n position: relative;\n }\n\n // Center search on the page (not within remaining flex space)\n .iti-navbar-search {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n}\n\n.DocSearch-Container {\n /* above Bootstrap navbar (z-1020) but below mobile sidebar (z-1055) */\n z-index: 1051;\n}\n.DocSearch-Button {\n width: 260px;\n --docsearch-search-button-background: rgba(0, 0, 0, .1);\n --docsearch-search-button-text-color: rgba(255, 255, 255, .65);\n border: 1px solid rgba(255, 255, 255, .4);\n\n &:hover {\n --docsearch-search-button-text-color: rgba(255, 255, 255, 1);\n border-color: rgba(255, 255, 255, 1);\n }\n}\n.DocSearch-Button-Keys {\n min-width: 0;\n padding: .125rem .25rem;\n background: rgba(0, 0, 0, .25);\n border-radius: .25rem\n}\n.DocSearch-Button-Key {\n color: rgba(255, 255, 255, .65);\n width: auto;\n height: 1.25rem;\n padding-right: .125rem;\n padding-left: .125rem;\n background: none;\n border: none;\n margin: 0 !important;\n}\n// disable DocSearch's \"pressed\" styles\n.DocSearch-Button-Key--pressed {\n box-shadow: none !important;\n transform: none !important;\n}\n\n// mobile search icon button in header\n.iti-navbar-icon-btn {\n padding: 0.25rem;\n border: 0;\n background: transparent;\n line-height: 1;\n\n svg {\n width: 20px;\n }\n}\n\n.iti-navbar-search {\n min-width: 0;\n}\n\n// both in header and mobile sidebar\n.iti-logo {\n margin-right: 10px;\n}\n\n#bdNavbar {\n .nav-link {\n color: white;\n // fix: unselected playground link not looking centered (to make space for bold active state)\n text-align: center;\n\n /* Prevent nav items shifting when toggling font-weight by reserving space\n for the bold version of the label (used on the active state). */\n &.iti-navlink-no-shift > span {\n display: inline-block;\n }\n &.iti-navlink-no-shift > span::after {\n content: attr(data-text);\n display: block;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n &.iti-navlink-no-shift > span::after,\n &.active {\n font-weight: 700;\n }\n }\n\n .nav-link--github {\n height: 100%; /* required for vertical alignment */\n }\n\n @media (min-width: 992px) {\n .navbar-nav {\n .nav-link {\n opacity: 0.85;\n }\n .nav-link:hover,\n .nav-link:focus,\n .nav-link.active,\n .show > .nav-link {\n opacity: 1;\n }\n }\n }\n /* Header docs dropdown: active item uses header green */\n .dropdown-item.active,\n .dropdown-item:active {\n background-color: rgb(var(--header-bg-color-rgb) / 0.5);\n color: white;\n }\n\n /* Header nav dropdown: open on hover (desktop) + keyboard focus */\n @media (hover: hover) and (pointer: fine) {\n .dropdown:hover > .dropdown-menu {\n display: block;\n /* Match Bootstrap's positioning styles that normally apply when JS adds data-bs-popper */\n top: 100%;\n left: 0;\n }\n }\n}\n/* override Bootstrap's margin which causes a gap between the dropdown and toggle */\n.dropdown-menu[data-bs-popper] {\n margin-top: 0 !important;\n}\n.offcanvas-title a {\n color: var(--bs-body-color);\n text-decoration: none;\n}\n\n\n/* Mobile nav: remove hover styles (prevents iOS/Android sticky :hover states) */\n.iti-mobile-sidebar {\n .nav-pills .nav-link:not(.active):hover {\n background-color: transparent;\n }\n}\n\n\n.iti-left-sidebar .nav-link,\n.iti-mobile-sidebar .nav-link {\n color: var(--bs-body-color);\n}\n.nav--primary-links > .nav-item > .nav-link {\n font-weight: 700;\n font-size: 1.05rem;\n padding-top: 0.65rem;\n padding-bottom: 0.65rem;\n}\n\n.iti-mobile-sidebar {\n .iti-mobile-submenu .nav-link {\n font-size: 0.95rem;\n font-weight: 500;\n opacity: 0.95;\n }\n /* Mobile sidebar icon + label spacing: slightly wider than Bootstrap gap-2 */\n .d-flex.align-items-center.gap-2 {\n gap: calc(0.5rem + 2px) !important;\n }\n}\n/* Mobile sidebar icon + label spacing: slightly wider than Bootstrap gap-2 */\n.iti-mobile-nav-toggle {\n border: 0;\n background: none;\n\n &__chevron {\n margin: 0px 0 3px 6px;\n width: 8px;\n height: 8px;\n display: inline-block;\n border-right: 2px solid currentColor;\n border-bottom: 2px solid currentColor;\n transform: rotate(45deg);\n opacity: 0.85;\n }\n\n &[aria-expanded=\"true\"] &__chevron {\n transform: rotate(225deg);\n margin-top: 8px;\n }\n}\n.nav-pills {\n .nav-link.active {\n background-color: rgb(var(--header-bg-color-rgb) / 0.5);\n }\n .nav-link:not(.active):hover {\n background-color: rgb(var(--header-bg-color-rgb) / 0.5);\n }\n}" }, { "path": "site/src/css/_variables.scss", "content": ":root {\n /* Header background color as space-separated RGB for easy alpha usage via: rgb(var(--header-bg-color-rgb) / ) */\n --header-bg-color-rgb: 16 135 75;\n\n /* override flag paths, to include cache busting */\n --iti-path-flags-1x: url(\"<%= cacheBust('/intl-tel-input/img/flags.webp') %>\");\n --iti-path-flags-2x: url(\"<%= cacheBust('/intl-tel-input/img/flags@2x.webp') %>\");\n --iti-icon-color: var(--bs-body-color);\n}\n" }, { "path": "site/src/css/docs.scss", "content": "/* Docs options page layout: keep code blocks within the content width */\n.iti-doc-options {\n &__row {\n border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);\n display: flex;\n\n p:last-child,\n pre:last-child {\n margin-bottom: 0;\n }\n\n & + & {\n border-top: none;\n }\n }\n\n &__cell {\n vertical-align: top;\n box-sizing: border-box;\n padding: var(--bs-table-cell-padding-y, 0.5rem)\n var(--bs-table-cell-padding-x, 0.5rem);\n min-width: 0;\n }\n &__cell--key {\n flex: 0 0 210px; /* this is wide enough for all of the option names */\n border-right: var(--bs-border-width, 1px) solid\n var(--bs-border-color, #dee2e6);\n h6 {\n font-weight: 700;\n }\n }\n &__cell--value {\n flex: 1 1 auto;\n min-width: 0;\n }\n /* Docs options layout: stack key/value on small screens */\n @media (max-width: 600px) {\n &__row {\n flex-direction: column;\n }\n &__cell--key {\n flex: 0 0 auto;\n border-right: none;\n }\n }\n}\n\n" }, { "path": "site/src/css/highlightjs_overrides.scss", "content": "/* Highlight.js overrides */\n.hljs {\n @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {\n background-color: #f6f8fa; /* match GitHub */\n }\n @media (prefers-color-scheme: dark) {\n background-color: #151b23; /* match GitHub */\n }\n}\n" }, { "path": "site/src/css/homepage.scss", "content": "@use 'variables';\n\n/**************\n * HOMEPAGE\n **************/\n body.iti-page--homepage {\n background-image: linear-gradient(\n 182deg,\n rgba(var(--bs-body-bg-rgb), 0.012),\n rgba(var(--bs-body-bg-rgb), 1) 87%\n ),\n radial-gradient(\n ellipse at 12% 18%,\n rgba(65, 133, 234, 0.32),\n transparent 55%\n ),\n radial-gradient(\n ellipse at 88% 14%,\n rgba(111, 167, 104, 0.45),\n transparent 55%\n ),\n radial-gradient(\n ellipse at 90% 56%,\n rgba(128, 63, 240, 0.42),\n transparent 52%\n ),\n radial-gradient(\n ellipse at 10% 60%,\n rgba(224, 76, 135, 0.42),\n transparent 52%\n );\n}\n.homepage-content {\n margin-top: 60px;\n margin-left: auto;\n margin-right: auto;\n\n .section--homepage-demo,\n .section--twilio {\n max-width: 580px;\n }\n\n h1 {\n font-size: 41px;\n font-weight: 600;\n }\n\n /* allow this part of title to wrap on small screens, but keep together on larger screens */\n @media (min-width: 420px) {\n h1 .keep-together {\n white-space: nowrap;\n }\n }\n\n .text-muted a {\n color: inherit;\n /* keep the same muted hue, but remove Bootstrap's alpha transparency on interaction */\n &:hover {\n color: rgb(var(--bs-secondary-color-rgb));\n }\n }\n\n .section {\n margin-bottom: 60px;\n }\n\n /* remove margin on last section */\n .section:last-child {\n margin-bottom: 0;\n }\n\n @media (min-width: 992px) {\n margin-top: 100px;\n\n .section--homepage-demo,\n .section--twilio {\n max-width: 700px;\n }\n\n h1 {\n font-size: 58px;\n }\n\n p.subtitle {\n font-size: 23px;\n }\n }\n\n .section--homepage-demo {\n margin-top: 10px;\n\n /* homepage: make the demo input width match the live results box */\n .iti,\n input[type=\"tel\"] {\n width: 100%;\n text-align: left; /* required because we have text-align:center on this section */\n }\n\n /* to match the other sections, which have a

at the bottom with this margin */\n .btn-primary {\n margin-bottom: 16px;\n }\n }\n\n .section--twilio {\n h2 {\n margin-bottom: 0;\n }\n }\n\n .section--social-proof {\n .social-proof-logos {\n margin-top: 24px;\n max-width: 900px;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: 24px 32px;\n\n .logo {\n height: 40px;\n width: auto;\n opacity: 0.55;\n filter: grayscale(100%);\n transition: opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n // hide last 3 logos on mobile\n .logo:nth-last-child(-n+3) {\n display: none;\n\n @media (min-width: 768px) {\n display: inline-flex;\n }\n }\n\n .logo-pair {\n display: inline-flex;\n align-items: center;\n\n img {\n height: 100%;\n width: auto;\n }\n }\n\n /* The following AI generated code attempts to approximate var(--bs-body-color) (#212529 light / #dee2e6 dark) via filters */\n\n // nike, unicef, forbes, ubuntu_text, and quickbooks_text logos are black on transparent\n img[src*=\"nike.png\"],\n img[src*=\"unicef.png\"],\n img[src*=\"forbes\"],\n img[src*=\"ubuntu_text\"],\n img[src*=\"quickbooks_text\"] {\n filter: invert(0.13);\n\n @media (prefers-color-scheme: dark) {\n filter: invert(0.87);\n }\n }\n\n // dell logo is blue on transparent, so use brightness(0) to make it black before inverting\n img[src*=\"dell\"] {\n filter: brightness(0) invert(0.13);\n\n @media (prefers-color-scheme: dark) {\n filter: brightness(0) invert(0.87);\n }\n }\n\n // universal music logo is white on transparent\n img[src*=\"universal-music\"] {\n filter: invert(0.87);\n\n @media (prefers-color-scheme: dark) {\n filter: invert(0.13);\n }\n }\n }\n }\n\n @media (min-width: 992px) {\n .section--social-proof .social-proof-logos .logo {\n height: 48px;\n }\n }\n\n .section--stats {\n .stats-row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 24px 48px;\n }\n\n .stat {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .stat-number {\n font-size: 36px;\n font-weight: 700;\n color: rgb(var(--bs-link-color-rgb));\n }\n\n .stat-label {\n font-size: 14px;\n color: var(--bs-secondary-color);\n margin-top: 4px;\n }\n }\n\n @media (min-width: 992px) {\n .section--stats {\n .stat-number {\n font-size: 48px;\n }\n\n .stat-label {\n font-size: 16px;\n }\n }\n }\n\n /* icons that should match link colour */\n .section--features {\n .link-icon {\n color: rgb(var(--bs-link-color-rgb)) !important;\n }\n }\n /* there is a br in the middle of the playground preset links: ignore it on mobile, show it on larger screens to break the links into two rows */\n @media (min-width: 550px) {\n .playground-presets {\n max-width: 550px;\n }\n }\n /* Make the playground preset outline buttons use the link colour */\n .playground-presets .btn-outline-primary {\n color: rgb(var(--bs-link-color-rgb));\n border-color: rgb(var(--bs-link-color-rgb));\n }\n .playground-presets .btn-outline-primary:hover,\n .playground-presets .btn-outline-primary:focus {\n background-color: rgba(var(--bs-link-color-rgb), 0.1);\n border-color: rgb(var(--bs-link-color-rgb));\n }\n}" }, { "path": "site/src/css/large_flags_overrides.scss", "content": ":root {\n --iti-spacer-horizontal: 12px;\n --iti-globe-height: 22px;\n --iti-search-clear-icon-height: 16px;\n --iti-arrow-height: 5px;\n --iti-arrow-padding: 9px;\n --iti-path-flags-1x: url(\"<%= cacheBust('/img/largeFlags.webp') %>\");\n --iti-path-flags-2x: url(\"<%= cacheBust('/img/largeFlags@2x.webp') %>\");\n}\n.iti {\n font-size: 20px;\n}\n.iti,\n.section.demo input {\n width: 350px !important;\n}\n.section.demo input,\n.iti__search-input {\n font-size: inherit !important; // bootstrap override\n}\n.iti__search-icon {\n left: 13px;\n}\n.iti__search-clear {\n right: 8px;\n}\ninput.iti__search-input {\n padding-left: 44px;\n padding-right: 40px;\n}\n.iti--inline-dropdown .iti__country-list {\n max-height: 210px;\n}" }, { "path": "site/src/css/playground.scss", "content": "@use 'variables';\n\n/**************\n * PLAYGROUND\n **************/\n\n// When navigating to a Playground heading via hash, leave space above it.\n.iti-playground h2[id] {\n scroll-margin-top: 30px;\n}\n\n// Make enable span behave like a label (default cursor)\n.form-check-enable-span {\n cursor: default;\n}\n// force these buttons to have the same colour as text-muted, which has a high enough contrast ratio to pass a11y guidelines.\n.playground-action-btn {\n color: var(--bs-secondary-color) !important;\n}\n.playground-action-btn:hover {\n background-color: #e3e1e1;\n @media (prefers-color-scheme: dark) {\n background-color: #363535;\n }\n}\n/* multidropdown toggle: disable hover styling when closed */\n.iti-playground-multidropdown-toggle {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n --bs-btn-bg: var(--bs-body-bg);\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-border-color: var(--bs-border-color, #ced4da);\n --bs-btn-hover-bg: var(--bs-btn-bg);\n --bs-btn-hover-color: var(--bs-btn-color);\n --bs-btn-hover-border-color: var(--bs-btn-border-color);\n --bs-btn-active-bg: var(--bs-btn-bg);\n --bs-btn-active-color: var(--bs-btn-color);\n --bs-btn-active-border-color: var(--bs-btn-border-color);\n\n /* multidropdown toggle: use CSS chevron for down arrow */\n &.dropdown-toggle::after {\n opacity: 0.85;\n margin: 0 3px 2px auto;\n display: inline-block;\n width: 8px;\n height: 8px;\n content: \"\";\n border: solid currentColor;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n /* multidropdown toggle: flip down arrow when open */\n &.dropdown-toggle.show::after,\n .dropdown.show > &.dropdown-toggle::after {\n margin-top: 6px;\n transform: rotate(225deg);\n }\n}\n\n// mobile: make the presets select smaller so it doesn't distract from the page title\n@media (max-width: 576px) {\n .playground-presets-select {\n width: 7em;\n }\n}\n\n.iti-playground-layout {\n display: flex;\n flex-direction: column;\n gap: 1.5rem; /* bootstrap g-4 */\n\n /* On mobile, flatten the column wrappers so we can control ordering. */\n &__col {\n display: contents;\n }\n &__demo {\n order: 1;\n }\n &__options {\n order: 2;\n }\n &__attrs {\n order: 3;\n }\n &__code {\n order: 4;\n }\n\n &__demo,\n &__options,\n &__attrs,\n &__code {\n min-width: 0;\n }\n\n @media (min-width: 992px) {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n column-gap: 1.5rem; /* bootstrap g-4 */\n align-items: start;\n\n &__col {\n display: flex;\n flex-direction: column;\n gap: 1.5rem; /* bootstrap g-4 */\n min-width: 0;\n }\n\n &__col--left {\n grid-column: 1;\n }\n\n &__col--right {\n grid-column: 2;\n position: sticky;\n top: calc(70px + 1rem);\n max-height: calc(100vh - 70px - 2rem);\n overflow: auto;\n }\n }\n\n &__demo {\n .iti,\n input[type=\"tel\"],\n .iti-live-results {\n width: 100%;\n max-width: 350px;\n }\n }\n}\n\n.iti-playground--keep-dropdown-open {\n .iti__dropdown-content.iti__hide {\n display: block !important;\n }\n .playground-dropdown-checkbox {\n margin-top: 240px !important;\n }\n}\n\n/* playground: option info tooltip */\n.iti-playground-info {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n margin-left: 0;\n color: var(--bs-secondary-color, #6c757d);\n user-select: none;\n cursor: help;\n\n > svg {\n display: block;\n width: 16px;\n height: 16px;\n }\n\n &:focus-visible {\n outline: 2px solid rgb(var(--header-bg-color-rgb));\n outline-offset: 2px;\n }\n}\n\n.iti-playground-labelgroup {\n padding-top: 3px;\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n\n > .form-label {\n margin-bottom: 0;\n }\n}\n\n.iti-playground-example-toggle {\n margin-top: 6px;\n}\n\n/* preserve bootstrap-like spacing for stacked (mobile) label + control */\n.iti-playground-control {\n &:not(.iti-playground-control--check) > .iti-playground-labelgroup {\n margin-bottom: var(--bs-form-label-margin-bottom, 0.5rem);\n }\n\n /* playground: on wider screens, align label + control horizontally to save space */\n @media (min-width: 600px) {\n /* playground: loadUtils has an example snippet + a checkbox, so keep the example aligned with the label, and put the checkbox beneath. */\n &--example-code {\n align-items: start;\n }\n &--example-code > .iti-playground-example-toggle {\n grid-column: 2;\n margin-top: 0;\n }\n /* Shared grid layout for controls on wider screens */\n & {\n display: grid;\n grid-template-columns: minmax(160px, 220px) 1fr;\n grid-template-areas: \"label control\";\n column-gap: 12px;\n\n > .iti-playground-labelgroup {\n grid-area: label;\n margin-bottom: 0;\n }\n }\n\n /* Non-checkbox controls: slightly more vertical spacing and form-specific tweaks */\n &:not(.iti-playground-control--check) {\n row-gap: 6px;\n align-items: start;\n\n > .form-control,\n > .form-select,\n > .dropdown {\n min-width: 0;\n }\n > .form-text {\n grid-column: 2;\n }\n }\n\n /* On mobile, checkboxes appear on LHS. Here, we move them to the RHS. */\n &.iti-playground-control--check {\n row-gap: 0;\n align-items: center;\n padding-left: 0; /* override bootstrap .form-check */\n\n > .form-check-input {\n grid-area: control;\n margin-left: 0;\n float: none;\n justify-self: start;\n }\n }\n }\n}\n/* contextual hint (shown after toggling certain options) */\n.iti-playground-hint {\n display: block;\n margin-left: -1.5em;\n animation: iti-hint-fade-in 0.2s ease-out;\n\n @media (min-width: 600px) {\n grid-column: 2;\n margin-left: 0;\n }\n}\n@keyframes iti-hint-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.iti-playground pre {\n display: block;\n}\n" }, { "path": "site/src/css/website.scss", "content": "\n/* Split into partials for maintainability. Partial files live alongside this file.\n Keep this file as the single entrypoint imported by the build system. */\n\n@use 'variables';\n@use 'base';\n@use 'navbar';\n@use 'layout';\n@use 'forms';\n\n\n/* Any small remaining overrides or page-specific rules can go here. */\n\n" }, { "path": "site/src/docs/docs_content_template.html.ejs", "content": "

\n\n
\n <%= html %>\n
\n\n
\n .md\"\n rel=\"noopener\"\n >\n \n Edit this page\n \n
\n" }, { "path": "site/src/docs/docs_nav_template.html.ejs", "content": "
Docs
\n\n" }, { "path": "site/src/docs/docs_page_template.html.ejs", "content": "\n\n \n <%= common_meta_tags %>\n <%= head_title %>\n \" />\n \">\n\n <%= og_meta_tags %>\n <%= common_styles %>\n \" />\n\n <%= common_head_end_prod %>\n \n\n \n <%= layout %>\n <%= common_body_end %>\n \n\n" }, { "path": "site/src/docs/markdown/accessibility.md", "content": "# Accessibility\n\nintl-tel-input aims to be accessible out of the box, but good accessibility also depends on how you integrate it into your form.\n\nThis page covers:\n\n- How the country dropdown and search are exposed to assistive tech\n- Keyboard interaction\n- What you should do to ensure the phone input has an accessible name and helpful errors\n- How to translate the plugin’s accessibility strings\n\n\n## Contents\n\n- [Accessible naming](#accessible-naming)\n- [Keyboard support](#keyboard-support)\n- [Screen reader support](#screen-reader-support)\n- [Translating accessibility strings](#translating-accessibility-strings)\n- [Form validation and errors](#form-validation-and-errors)\n\n\n## Accessible naming\n\nMake sure the telephone input has an accessible name.\n\nRecommended:\n\n- Use a visible `