diff --git a/README.md b/README.md
index 750e4728..71fdab4a 100644
--- a/README.md
+++ b/README.md
@@ -80,45 +80,47 @@ Or this:
```html
```
## Options
-| Options | Type | Default | Description |
-| ------------------------ | ------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| cssClass | `string` | `control-form` | Bootstrap input css class or your own custom one. |
-| preferredCountries | `[]` | `[]` | List of countries, which will appear at the top. |
-| onlyCountries | `[]` | `[]` | List of manually selected countries, which will appear in the dropdown. |
-| enableAutoCountrySelect | `boolean` | `true` | Toggle automatic country (flag) selection based on user input. |
-| enablePlaceholder | `boolean` | `true` | Input placeholder text, which adapts to the country selected. |
-| customPlaceholder | `string` | `None` | Custom string to be inserted as a placeholder. |
-| numberFormat | `` | `PhoneNumberFormat.International` | Custom string to be inserted as a placeholder. |
-| searchCountryFlag | `boolean` | `false` | Enables input search box for countries in the flag dropdown. |
-| searchCountryField | `[]` | `[SearchCountryField.All]` | Customize which fields to search in, if `searchCountryFlag` is enabled. Use `SearchCountryField` helper enum. |
-| searchCountryPlaceholder | `string` | `'Search Country'` | Placeholder value for `searchCountryField` |
-| maxLength | `number` | `None` | Add character limit. |
-| selectFirstCountry | `boolean` | `true` | Selects first country from `preferredCountries` if is set. If not then uses main list. |
-| phoneValidation | `boolean` | `true` | Disable phone validation. |
-| inputId | `string` | `phone` | Unique ID for `` element. |
-| selectedCountryISO | `` | `None` | Set specific country on load. |
-| separateDialCode | `boolean` | `false` | Visually separate dialcode into the drop down element. |
-| countryChange | `` | `None` | Emits country value when the user selects a country from the dropdown. |
+| Options | Type | Default | Description |
+| ------------------------ | ------------------------------------------------------ | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| cssClass | `string` | `control-form` | Bootstrap input css class or your own custom one. |
+| preferredCountries | `[]` | `[]` | List of countries, which will appear at the top. |
+| onlyCountries | `[]` | `[]` | List of manually selected countries, which will appear in the dropdown. |
+| enableAutoCountrySelect | `boolean` | `true` | Toggle automatic country (flag) selection based on user input. |
+| enablePlaceholder | `boolean` | `true` | Input placeholder text, which adapts to the country selected. |
+| customPlaceholder | `string` | `None` | Custom string to be inserted as a placeholder. |
+| numberFormat | `` | `PhoneNumberFormat.International` | Custom string to be inserted as a placeholder. |
+| searchCountryFlag | `boolean` | `false` | Enables input search box for countries in the flag dropdown. |
+| searchCountryField | `[]` | `[SearchCountryField.All]` | Customize which fields to search in, if `searchCountryFlag` is enabled. Use `SearchCountryField` helper enum. |
+| searchCountryPlaceholder | `string` | `'Search Country'` | Placeholder value for `searchCountryField` |
+| maxLength | `number` | `None` | Add character limit. |
+| selectFirstCountry | `boolean` | `true` | Selects first country from `preferredCountries` if is set. If not then uses main list. |
+| phoneValidation | `boolean` | `true` | Disable phone validation. |
+| inputId | `string` | `phone` | Unique ID for `` element. |
+| selectedCountryISO | `` | `None` | Set specific country on load. |
+| separateDialCode | `boolean` | `false` | Visually separate dialcode into the drop down element. |
+| countryChange | `` | `None` | Emits country value when the user selects a country from the dropdown. |
+| scrollIntoViewOptions | `{ behavior: string, block: string, inline: string }` | `{ behavior: 'smooth', block: 'nearest', inline: 'nearest' }` | Options to display countries in different positions of the dropdown using the scorllIntoView options: behavior: Defines the transition animation => 'auto'-'smooth', block: Defines vertical alignment => 'start' - 'center' - 'end' - 'nearest', inline: Defines horizontal alignment => 'start' - 'center' - 'end' - 'nearest' |
## Supported Formats
diff --git a/projects/ngx-intl-tel-input/package.json b/projects/ngx-intl-tel-input/package.json
index fbc64140..d29ac46e 100644
--- a/projects/ngx-intl-tel-input/package.json
+++ b/projects/ngx-intl-tel-input/package.json
@@ -1,6 +1,6 @@
{
"name": "ngx-intl-tel-input",
- "version": "3.1.1",
+ "version": "3.1.2",
"peerDependencies": {
"@angular/common": "8.x - 11.x",
"@angular/core": "8.x - 11.x",
@@ -37,4 +37,4 @@
"devDependencies": {
"@types/google-libphonenumber": "^7.4.17"
}
-}
+}
\ No newline at end of file
diff --git a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts
index 069fa536..641a7706 100644
--- a/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts
+++ b/projects/ngx-intl-tel-input/src/lib/ngx-intl-tel-input.component.ts
@@ -62,6 +62,12 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
@Input() phoneValidation = true;
@Input() inputId = 'phone';
@Input() separateDialCode = false;
+ @Input() scrollIntoViewOptions: {
+ behavior: string,
+ block: string,
+ inline: string,
+ };
+
separateDialCodeClass: string;
@Output() readonly countryChange = new EventEmitter();
@@ -88,8 +94,8 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
@ViewChild('countryList') countryList: ElementRef;
- onTouched = () => {};
- propagateChange = (_: ChangeData) => {};
+ onTouched = () => { };
+ propagateChange = (_: ChangeData) => { };
constructor(private countryCodeData: CountryCode) {
// If this is not set, ngx-bootstrap will try to use the bs3 CSS (which is not what we've embedded) and will
@@ -139,6 +145,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
}
this.updateSelectedCountry();
this.checkSeparateDialCodeStyle();
+ if (!this.scrollIntoViewOptions) this.scrollIntoViewOptions = { behavior: 'smooth', block: 'nearest', inline: 'nearest' };
}
setSelectedCountry(country: Country) {
@@ -154,9 +161,9 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
this.countryList.nativeElement
.querySelector('.iti__country-list li')
.scrollIntoView({
- behavior: 'smooth',
- block: 'nearest',
- inline: 'nearest',
+ behavior: this.scrollIntoViewOptions.behavior,
+ block: this.scrollIntoViewOptions.block,
+ inline: this.scrollIntoViewOptions.inline,
});
return;
}
@@ -199,9 +206,9 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
);
if (el) {
el.scrollIntoView({
- behavior: 'smooth',
- block: 'nearest',
- inline: 'nearest',
+ behavior: this.scrollIntoViewOptions.behavior,
+ block: this.scrollIntoViewOptions.block,
+ inline: this.scrollIntoViewOptions.inline,
});
}
}
@@ -384,7 +391,7 @@ export class NgxIntlTelInputComponent implements OnInit, OnChanges {
let number: lpn.PhoneNumber;
try {
number = this.phoneUtil.parse(phoneNumber, countryCode.toUpperCase());
- } catch (e) {}
+ } catch (e) { }
return number;
}