From cf997497b8104a0dcb2615e6025993a743d714e7 Mon Sep 17 00:00:00 2001 From: Juanjo Torres Date: Sat, 7 Dec 2024 11:15:38 +0100 Subject: [PATCH] build: :arrow_up: add support for Angular 19 --- .all-contributorsrc | 29 + .eslintignore | 2 - .eslintrc.json | 48 - CHANGELOG.md | 12 + README.md | 52 +- .../.eslintrc.json | 36 - .../eslint.config.js | 53 + .../jest.config.ts | 11 +- .../src/app/app.component.html | 5 + .../src/app/app.component.ts | 1 - .../src/index.html | 4 +- .../src/styles.scss | 23 +- .../src/test-setup.ts | 14 +- eslint.config.js | 71 + jest.config.ts | 8 +- .../.eslintrc.json | 36 - .../ngx-material-intl-tel-input-lib/README.md | 52 +- .../eslint.config.js | 53 + .../jest.config.ts | 11 +- .../package.json | 17 +- ...material-intl-tel-input-lib.component.html | 1 + ...x-material-intl-tel-input-lib.component.ts | 15 +- .../country-data/country-data.service.ts | 75 +- .../src/lib/types/country.model.ts | 4 + .../src/test-setup.ts | 14 +- package-lock.json | 7801 +++++++++-------- package.json | 84 +- 27 files changed, 4799 insertions(+), 3733 deletions(-) delete mode 100644 .eslintignore delete mode 100644 .eslintrc.json delete mode 100644 apps/ngx-material-intl-tel-input/.eslintrc.json create mode 100644 apps/ngx-material-intl-tel-input/eslint.config.js create mode 100644 eslint.config.js delete mode 100644 libs/ngx-material-intl-tel-input-lib/.eslintrc.json create mode 100644 libs/ngx-material-intl-tel-input-lib/eslint.config.js diff --git a/.all-contributorsrc b/.all-contributorsrc index abb216e..cbf21e2 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -31,6 +31,35 @@ "avatar_url": "https://avatars3.githubusercontent.com/u/5524772?v=4", "profile": "https://github.com/whegar", "contributions": ["ideas", "question", "infra", "maintenance", "review"] + }, + { + "login": "ghollingworthh", + "name": "Glen Hollingworth", + "avatar_url": "https://avatars.githubusercontent.com/u/26550815?v=4?s=100", + "profile": "https://github.com/ghollingworthh", + "contributions": [ + "code", + "doc", + "ideas", + "question", + "infra", + "maintenance", + "review" + ] + }, + { + "login": "EphraimHaber", + "name": "EphraimHaber", + "avatar_url": "https://avatars.githubusercontent.com/u/61934858?v=4?s=100", + "profile": "https://github.com/EphraimHaber", + "contributions": [ + "code", + "doc", + "ideas", + "question", + "maintenance", + "review" + ] } ], "contributorsPerLine": 7, diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index efab496..0000000 --- a/.eslintignore +++ /dev/null @@ -1,2 +0,0 @@ -node_modules -*.json \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 46b63e7..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,48 +0,0 @@ -{ - "root": true, - "ignorePatterns": ["**/*"], - "plugins": ["@nx"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": { - "@nx/enforce-module-boundaries": [ - "error", - { - "enforceBuildableLibDependency": true, - "allow": [], - "depConstraints": [ - { - "sourceTag": "*", - "onlyDependOnLibsWithTags": ["*"] - } - ] - } - ] - } - }, - { - "files": ["*.ts", "*.tsx"], - "extends": ["plugin:@nx/typescript"], - "rules": { - "@typescript-eslint/no-extra-semi": "error", - "no-extra-semi": "off" - } - }, - { - "files": ["*.js", "*.jsx"], - "extends": ["plugin:@nx/javascript"], - "rules": { - "@typescript-eslint/no-extra-semi": "error", - "no-extra-semi": "off" - } - }, - { - "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"], - "env": { - "jest": true - }, - "rules": {} - } - ] -} diff --git a/CHANGELOG.md b/CHANGELOG.md index b41a5f8..d038065 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). +## [19.0.0] - 2024-12-07 + +### Added + +- Add support for Angular 19 ([#25](https://github.com/juanjotorres90/ngx-material-intl-tel-input/issues/25)). +- Add 'useMask' option to enable masking of the phone number input. + +### Changed + +- Upgrade project to nx 20.2. +- Upgrade project to use ESLint 9. + ## [18.2.1] - 2024-11-22 ### Added diff --git a/README.md b/README.md index 2284385..0063aac 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,8 @@ Validation with [google-libphonenumber](https://github.com/google/libphonenumber | ngx-material-intl-tel-input | Angular | | --------------------------- | --------- | -| 18.0.0 - 18.2.0 | >= 18.0.0 | +| 19.0.0 | >= 19.0.0 | +| 18.0.0 - 18.2.1 | >= 18.0.0 | | 0.0.1 - 17.3.0 | >= 17.2.0 | ## Installation @@ -51,28 +52,31 @@ imports: [NgxMaterialIntlTelInputComponent]; ## Options -| Options | Type | Default | Description | -| ------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | -| fieldControl | `FormControl` | `FormControl('')` | Form control required to retrieve the value. | -| fieldControlName | `string` | `''` | Form control name to assign the control from a FormGroup. | -| required | `boolean` | `false` | Telephone field input required. | -| disabled | `boolean` | `false` | Telephone field input disabled. | -| appearance | `'fill' \| 'outline'` | `fill` | Material form field appearance. | -| autoIpLookup | `boolean` | `true` | Sets initial country code based on user's ip. | -| autoSelectCountry | `boolean` | `true` | Enables or disables auto selecting a country on initialization. | -| autoSelectedCountry | `CountryISO \| string` | `''` | Sets the country to be auto selected. | -| numberValidation | `boolean` | `true` | Enables or disables phone number validation. | -| enableSearch | `boolean` | `true` | Enables or disables country search. | -| includeDialCode | `boolean` | `false` | Includes the dial code in the phone number input. | -| emojiFlags | `boolean` | `false` | Use standard emoji icons for the country flags. | -| hidePhoneIcon | `boolean` | `false` | Hides phone icon. | -| preferredCountries | `(CountryISO \| string)[]` | `[]` | Shows the specified countries on top of the list. | -| visibleCountries | `(CountryISO \| string)[]` | `[]` | Shows only the specified countries. | -| excludedCountries | `(CountryISO \| string)[]` | `[]` | Exclude the specified countries from the list. | -| enablePlaceholder | `boolean` | `true` | Input placeholder text for every country national number. | -| iconMakeCall | `boolean` | `true` | Click on phone icon to trigger call action. | -| initialValue | `string` | `''` | Sets initial telephone number value | -| textLabels | `TextLabels` | {mainLabel: 'Phone number', codePlaceholder: 'Code', searchPlaceholderLabel: 'Search', noEntriesFoundLabel: 'No countries found', nationalNumberLabel: 'Number', hintLabel: 'Select country and type your phone number', invalidNumberError: 'Number is not valid', requiredError: 'This field is required'} | Overrides all component text labels | +| Options | Type | Default | Description | +| ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------ | +| fieldControl | `FormControl` | `FormControl('')` | Form control required to retrieve the value. | +| fieldControlName | `string` | `''` | Form control name to assign the control from a FormGroup. | +| required | `boolean` | `false` | Telephone field input required. | +| disabled | `boolean` | `false` | Telephone field input disabled. | +| appearance | `'fill' \| 'outline'` | `fill` | Material form field appearance. | +| autoIpLookup | `boolean` | `true` | Sets initial country code based on user's ip. | +| autoSelectCountry | `boolean` | `true` | Enables or disables auto selecting a country on initialization. | +| autoSelectedCountry | `CountryISO \| string` | `''` | Sets the country to be auto selected. | +| numberValidation | `boolean` | `true` | Enables or disables phone number validation. | +| enableSearch | `boolean` | `true` | Enables or disables country search. | +| includeDialCode | `boolean` | `false` | Includes the dial code in the phone number input. | +| emojiFlags | `boolean` | `false` | Use standard emoji icons for the country flags. | +| hidePhoneIcon | `boolean` | `false` | Hides phone icon. | +| preferredCountries | `(CountryISO \| string)[]` | `[]` | Shows the specified countries on top of the list. | +| visibleCountries | `(CountryISO \| string)[]` | `[]` | Shows only the specified countries. | +| excludedCountries | `(CountryISO \| string)[]` | `[]` | Exclude the specified countries from the list. | +| enablePlaceholder | `boolean` | `true` | Input placeholder text for every country national number. | +| iconMakeCall | `boolean` | `true` | Click on phone icon to trigger call action. | +| initialValue | `string` | `''` | Sets initial telephone number value | +| useMask | `boolean` | `false` | Use mask for phone number input. | +| forceSelectedCountryCode | `string` | `false` | If useMask is active it forces the selected country code to be displayed | +| showMaskPlaceholder | `string` | `false` | If useMask is active it shows the placeholder for the mask | +| textLabels | `TextLabels` | {mainLabel: 'Phone number', codePlaceholder: 'Code', searchPlaceholderLabel: 'Search', noEntriesFoundLabel: 'No countries found', nationalNumberLabel: 'Number', hintLabel: 'Select country and type your phone number', invalidNumberError: 'Number is not valid', requiredError: 'This field is required'} | Overrides all component text labels | ## Events @@ -149,3 +153,5 @@ Thanks goes to these wonderful people: This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome! + +[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/juanjotorres) diff --git a/apps/ngx-material-intl-tel-input/.eslintrc.json b/apps/ngx-material-intl-tel-input/.eslintrc.json deleted file mode 100644 index 03da83c..0000000 --- a/apps/ngx-material-intl-tel-input/.eslintrc.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "extends": ["../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts"], - "extends": [ - "plugin:@nx/angular", - "plugin:@angular-eslint/template/process-inline-templates" - ], - "rules": { - "@angular-eslint/directive-selector": [ - "error", - { - "type": "attribute", - "prefix": "ngxMaterialIntlTelInput", - "style": "camelCase" - } - ], - "@angular-eslint/component-selector": [ - "error", - { - "type": "element", - "prefix": "ngx-material-intl-tel-input", - "style": "kebab-case" - } - ] - } - }, - { - "files": ["*.html"], - "extends": ["plugin:@nx/angular-template"], - "rules": {} - } - ] -} diff --git a/apps/ngx-material-intl-tel-input/eslint.config.js b/apps/ngx-material-intl-tel-input/eslint.config.js new file mode 100644 index 0000000..e4c0b54 --- /dev/null +++ b/apps/ngx-material-intl-tel-input/eslint.config.js @@ -0,0 +1,53 @@ +const { FlatCompat } = require('@eslint/eslintrc'); +const js = require('@eslint/js'); +const baseConfig = require('../../eslint.config.js'); + +const compat = new FlatCompat({ + baseDirectory: __dirname, + recommendedConfig: js.configs.recommended +}); + +module.exports = [ + ...baseConfig, + ...compat + .config({ + extends: [ + 'plugin:@nx/angular', + 'plugin:@angular-eslint/template/process-inline-templates' + ] + }) + .map((config) => ({ + ...config, + files: ['**/*.ts'], + rules: { + ...config.rules, + '@angular-eslint/directive-selector': [ + 'error', + { + type: 'attribute', + prefix: 'ngxMaterialIntlTelInput', + style: 'camelCase' + } + ], + '@angular-eslint/component-selector': [ + 'error', + { + type: 'element', + prefix: 'ngx-material-intl-tel-input', + style: 'kebab-case' + } + ] + } + })), + ...compat + .config({ + extends: ['plugin:@nx/angular-template'] + }) + .map((config) => ({ + ...config, + files: ['**/*.html'], + rules: { + ...config.rules + } + })) +]; diff --git a/apps/ngx-material-intl-tel-input/jest.config.ts b/apps/ngx-material-intl-tel-input/jest.config.ts index 477a50f..70d3f86 100644 --- a/apps/ngx-material-intl-tel-input/jest.config.ts +++ b/apps/ngx-material-intl-tel-input/jest.config.ts @@ -1,4 +1,3 @@ -/* eslint-disable */ export default { displayName: 'ngx-material-intl-tel-input', preset: '../../jest.preset.js', @@ -9,14 +8,14 @@ export default { 'jest-preset-angular', { tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], + stringifyContentPathRegex: '\\.(html|svg)$' + } + ] }, transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], snapshotSerializers: [ 'jest-preset-angular/build/serializers/no-ng-attributes', 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], + 'jest-preset-angular/build/serializers/html-comment' + ] }; diff --git a/apps/ngx-material-intl-tel-input/src/app/app.component.html b/apps/ngx-material-intl-tel-input/src/app/app.component.html index d9d4f23..9769056 100644 --- a/apps/ngx-material-intl-tel-input/src/app/app.component.html +++ b/apps/ngx-material-intl-tel-input/src/app/app.component.html @@ -3,6 +3,11 @@