intl-tel-input 25.12.3 → 25.12.5

package/README.md

@@ -81,16 +81,16 @@ _Note: We have now dropped support for all versions of Internet Explorer because
 ## Getting Started (Using a CDN)
 1. Add the CSS
   ```html
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.3/build/css/intlTelInput.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/css/intlTelInput.css">
   ```
 
 2. Add the plugin script and initialise it on your input element
   ```html
-  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.3/build/js/intlTelInput.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/intlTelInput.min.js"></script>
   <script>
     const input = document.querySelector("#phone");
     window.intlTelInput(input, {
-      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.3/build/js/utils.js"),
+      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/utils.js"),
     });
   </script>
   ```
@@ -261,7 +261,7 @@ This will generate the following (hidden) elements, which will be automatically
 
 **i18n**  
 Type: `Object` Default: `{}`  
-Allows you to specify translation strings for the 200+ country names, as well as other user interface text (e.g. the placeholder text for the country search input). The easiest way to do this is to import one of the [provided translation modules](https://github.com/jackocnr/intl-tel-input/tree/master/build/js/i18n) and set `i18n` to that value (see option 1 below). You can also override one or more individual keys this way (see option 1 below). Alternatively, you can provide your own custom translations (see option 2 below). If providing your own, you will need to specify all the country names (which can be copied from the country-list project, e.g. here are the [country names in French](https://github.com/umpirsky/country-list/blob/master/data/fr/country.json)), as well as a few UI strings (listed below). [See example](https://intl-tel-input.com/examples/localise-countries.html).
+Allows you to specify translation strings for the 200+ country names, as well as other user interface text (e.g. the placeholder text for the country search input). The easiest way to do this is to import one of the [provided translation modules](https://github.com/jackocnr/intl-tel-input/tree/master/src/js/intl-tel-input/i18n) and set `i18n` to that value (see option 1 below). You can also override one or more individual keys this way (see option 1 below). Alternatively, you can provide your own custom translations (see option 2 below). If providing your own, you will need to specify all the country names (which can be copied from the country-list project, e.g. here are the [country names in French](https://github.com/umpirsky/country-list/blob/master/data/fr/country.json)), as well as a few UI strings (listed below). [See example](https://intl-tel-input.com/examples/localise-countries.html).
 
 If we don't currently support a language you need, it's easy to [contribute this](https://github.com/jackocnr/intl-tel-input/blob/master/.github/CONTRIBUTING.md#adding-a-new-translation) yourself - you only need to provide a handful of UI translation strings, as we automatically pull in the country names from the country-list project.
 
@@ -328,12 +328,12 @@ Set the initial country selection by specifying its country code, e.g. `"us"` fo
 Type: `() => Promise<module>` Default: `null`  
 This is one way to lazy load the included utils.js (to enable formatting/validation, etc) - see [Loading The Utilities Script](#loading-the-utilities-script) for more options.
 
-The `loadUtils` option takes a function which returns a Promise which resolves to the utils module. You can `import` the utils module in different ways: (A) from a CDN, (B) from your own hosted version of [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js), or (C) if you use a bundler like Webpack, Vite or Parcel, you can import it directly from the package.
+The `loadUtils` option takes a function that returns a Promise resolving to the utils module (see example code below). You can `import` the utils module in different ways: (A) from a CDN, (B) from your own hosted version of [utils.js](https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/utils.js), or (C) if you use a bundler like Webpack, Vite or Parcel, you can import it directly from the package.
 
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.3/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js
@@ -341,7 +341,7 @@ intlTelInput(htmlInputElement, {
   loadUtils: () => import("/path/to/utils.js"),
 });
 
-// (C) if your bundler supports it, you can import the utils module directly from the package
+// (C) with a bundler, you can import the utils module directly from the package
 intlTelInput(htmlInputElement, {
   loadUtils: () => import("intl-tel-input/utils"),
 });
@@ -583,9 +583,9 @@ Example:
 <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/vanilla-dark.png" alt="Screenshot" width="263" height="269" />
 
 ## Translations
-We provide [translations](https://github.com/jackocnr/intl-tel-input/tree/master/build/js/i18n) for the 200+ country names, as well as other user interface text (e.g. the placeholder text for the country search input) in over 40 languages. See the `i18n` option for details on how to use them. [See them in action](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--i18n).
+We provide [translations](https://github.com/jackocnr/intl-tel-input/tree/master/src/js/intl-tel-input/i18n) for the 200+ country names, as well as other user interface text (e.g. the placeholder text for the country search input) in over 40 languages. See the `i18n` option for details on how to use them. [See them in action](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--i18n).
 
-Supported languages: Arabic, Bengali, Bosnian, Bulgarian, Catalan, Chinese, Croatian, Czech, Danish, Dutch, English, Estonian, Finnish, French, German, Greek, Hindi, Hungarian, Indonesian, Italian, Japanese, Korean, Marathi, Norwegian, Persian, Polish, Portuguese, Romanian, Russian, Slovak, Spanish, Swedish, Telugu, Thai, Turkish, Ukrainian, Urdu, Uzbek, Vietnamese.
+Supported languages: Arabic, Albanian, Bengali, Bosnian, Bulgarian, Catalan, Chinese, Croatian, Czech, Danish, Dutch, English, Estonian, Finnish, French, German, Greek, Hindi, Hungarian, Indonesian, Italian, Japanese, Korean, Lithuanian, Marathi, Norwegian, Persian, Polish, Portuguese, Romanian, Russian, Serbian, Slovak, Slovenian, Spanish, Swedish, Telugu, Thai, Turkish, Ukrainian, Urdu, Uzbek, Vietnamese.
 
 If we don't currently support a language you need, it's easy to [contribute this](https://github.com/jackocnr/intl-tel-input/blob/master/.github/CONTRIBUTING.md#adding-a-new-translation) yourself - you only need to provide a handful of UI translation strings, as we automatically pull in the country names from the country-list project.
 
@@ -607,31 +607,11 @@ See [v25 discussion](https://github.com/jackocnr/intl-tel-input/discussions/1842
 The utils script provides lots of great functionality (see the above section), but comes at the cost of increased filesize (~260KB). There are two main ways to load the utils script, depending on whether you're concerned about filesize or not.
 
 **Option 1: intlTelInputWithUtils**  
-If you're not concerned about filesize (e.g. you're lazy loading the main plugin script), the easiest thing to do is to just use the full bundle (`/build/js/intlTelInputWithUtils.js`), which comes with the utils script included. This script can be used exactly like the main intlTelInput.js - so it can either be loaded directly onto the page (which defines `window.intlTelInput` like usual), or it can be imported like so: `import intlTelInput from "intl-tel-input/intlTelInputWithUtils"`.
+If you're not concerned about filesize (e.g. you're lazy loading the main plugin script), the easiest thing to do is to use the full bundle (`/build/js/intlTelInputWithUtils.js`), which comes with the utils script included. This script can be used exactly like the main intlTelInput.js - so it can either be loaded directly onto the page (which defines `window.intlTelInput` like usual), or it can be imported like so: `import intlTelInput from "intl-tel-input/intlTelInputWithUtils"`.
 
 **Option 2: loadUtils**  
 If you *are* concerned about filesize, you can lazy load the utils module when the plugin initialises, using the `loadUtils` initialisation option.
 
-The `loadUtils` option takes a function that returns a Promise resolving to the utils module. You can `import` the utils module in different ways (shown below): (A) from a CDN, (B) from your own hosted version of [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js), or (C) if you use a bundler like Webpack, Vite or Parcel, you can import it directly from the package.
-
-```js
-// (A) import utils module from a CDN
-intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.3/build/js/utils.js"),
-});
-
-// (B) import utils module from your own hosted version of utils.js
-intlTelInput(htmlInputElement, {
-  loadUtils: () => import("/path/to/utils.js"),
-});
-
-// (C) if your bundler supports it, you can import the utils module directly from the package
-intlTelInput(htmlInputElement, {
-  loadUtils: () => import("intl-tel-input/utils"),
-});
-```
-
-If you want more control over when this file is lazy-loaded, you can manually invoke the `attachUtils` static method whenever you like, instead of using the `loadUtils` initialisation option.
 
 ## Troubleshooting
 

package/angular/README.md

@@ -1,7 +1,9 @@
 # IntlTelInput Angular Component
+
 An Angular component wrapper 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).
 
 ## Table of Contents
+
 - [Demo](#demo)
 - [Getting Started](#getting-started)
 - [Props](#props)
@@ -10,9 +12,32 @@ An Angular component wrapper for the [intl-tel-input](https://github.com/jackocn
 - [Accessing Static Methods](#accessing-static-methods)
 
 ## Demo
-Try it for yourself by downloading the project and opening /angular/demo/validation/index.html (etc) in a browser.
+
+Try it yourself by running the demos locally:
+
+```bash
+# Clone the repository
+git clone https://github.com/jackocnr/intl-tel-input.git
+cd intl-tel-input
+
+# Initialize submodules (required for build)
+git submodule update --init --recursive
+
+# Install dependencies and build
+npm install
+npm run build
+
+# Serve from project root
+python3 -m http.server
+```
+
+> Then open [http://localhost:8000/angular/demo/simple/](http://localhost:8000/angular/demo/simple/) or other demos from the [angular demo folder](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/)
+
+> [!NOTE]
+> Make sure to serve from the project root, not from the demo folders.
 
 ## Getting Started
+
 ```html
 import { IntlTelInputComponent } from "intl-tel-input/angularWithUtils";
 import "intl-tel-input/styles";
@@ -29,58 +54,107 @@ import "intl-tel-input/styles";
 
 See the [validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/validation/validation.component.ts) for a more fleshed-out example of how to handle validation, or check out the [form demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/form/form.component.ts) for an alternative approach using `ReactiveFormsModule`.
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just `import { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.3/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just `import { IntlTelInputComponent } from "intl-tel-input/angularWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/angular"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.5/build/js/utils.js"`.
 
 ## Props
+
 Here's a list of all of the current props you can pass to the IntlTelInput Angular component.
 
-**disabled**  
-Type: `Boolean`, Default: `false`  
+**disabled**\
+Type: `Boolean`, Default: `false`\
 Sets the disabled attribute of both the telephone input and selected country button. _Note: we recommend using this instead of `inputProps.disabled`._
 
-**initialValue**  
-Type: `String`
+**initialValue**\
+Type: `String`\
 The initial value to put in the input. This will get auto-formatted on init (according to `formatOnDisplay` initialisation option). IntlTelInput is an uncontrolled input, and so will ignore any changes to this value.
 
-**initOptions**  
-Type: `Object`  
+**initOptions**\
+Type: `Object`\
 An object containing the [initialisation options](https://github.com/jackocnr/intl-tel-input?tab=readme-ov-file#initialisation-options) to pass to the plugin. You can use these exactly the same way as with the main JavaScript plugin.
 
-**inputProps**  
-Type: `Object`  
+**inputProps**\
+Type: `Object`\
 The props to pass to the input element e.g. `class`, `placeholder`, `required` etc. _Note: we recommend using the separate `disabled` prop instead of `inputProps.disabled`._
 
-**usePreciseValidation**  
-Type: `Boolean`, Default: `false`  
+**usePreciseValidation**\
+Type: `Boolean`, Default: `false`\
 By default we use `isValidNumber` for validation, but if you'd rather use `isValidNumberPrecise` you can set this to `true`.
 
 ## Events
+
 Here's a list of all of the current events you can listen to on the IntlTelInput angular component.
 
-**countryChange**  
-Type: `Function`  
+**countryChange**\
+Type: `Function`\
 A handler to be called when the selected country changes. It will be passed the new country iso2 code e.g. "gb" for UK.
 
-**errorCodeChange**  
-Type: `Function`  
+**errorCodeChange**\
+Type: `Function`\
 A handler to be called when the number validation error changes. It will be passed the new error code (or `null`).
 
-**numberChange**  
-Type: `Function`  
+**numberChange**\
+Type: `Function`\
 A handler to be called when the number changes. It will be passed the new number.
 
-**validityChange**  
-Type: `Function`  
+**validityChange**\
+Type: `Function`\
 A handler to be called when the number validity changes e.g. to true/false. It will be passed the new isValid boolean.
 
 ### Native Input Events
 
-Unlike the React and Vue version where events are passed through `inputProps`, in Angular you can directly bind to any native DOM event using the standard event binding syntax `(eventName)="handlerMethod()"`. This is more aligned with Angular's templating conventions and provides better type checking and autocompletion in your IDE.
+The component exposes several commonly used native DOM events that you can bind to using Angular's standard event binding syntax `(eventName)="handlerMethod($event)"`. For other native events not listed below, you can access the input element directly (see [Other Native Events](#other-native-events) section).
+
+#### Supported Events
+
+The following native input events are directly supported:
+- `blur` - Fired when the input loses focus (receives `FocusEvent`)
+- `focus` - Fired when the input receives focus (receives `FocusEvent`)
+- `keydown` - Fired when a key is pressed down (receives `KeyboardEvent`)
+- `keyup` - Fired when a key is released (receives `KeyboardEvent`)
+- `paste` - Fired when content is pasted (receives `ClipboardEvent`)
+- `click` - Fired when the input is clicked (receives `MouseEvent`)
+
+Example usage:
+```html
+<intl-tel-input
+  (blur)="handleBlur($event)"
+  (focus)="handleFocus($event)"
+  (keydown)="handleKeyDown($event)"
+  (paste)="handlePaste($event)"
+/>
+```
+
+#### Other Native Events
+
+For any other native DOM events not listed above, you can access the input element directly using a `ViewChild` reference and add event listeners manually:
+
+```typescript
+export class MyComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('telInput') telInput!: IntlTelInputComponent;
+
+  ngAfterViewInit() {
+    const input = this.telInput.getInput();
+    input?.addEventListener('mouseenter', this.handleMouseEnter);
+  }
+
+  ngOnDestroy() {
+    const input = this.telInput.getInput();
+    input?.removeEventListener('mouseenter', this.handleMouseEnter);
+  }
+
+  handleMouseEnter = (event: MouseEvent) => {
+    console.log('Mouse entered input:', event);
+  }
+}
+```
 
 ## Accessing Instance Methods
 
-You can access all of the plugin's [instance methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#instance-methods) (`setNumber`, `setCountry`, `setPlaceholderNumberType` etc) by using a ViewChild reference into the IntlTelInput component (using the `#ref` prop), and then calling `this.telInput.getInstance()` e.g. `this.telInput.getInstance().setNumber(...);`. See the [Set Number demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/set-number/set-number.component.tsx) for a full example. You can also access the input DOM element in a similar way: `this.telInput.getInput()`.
+You can access all of the plugin's [instance methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#instance-methods) (`setNumber`, `setCountry`, `setPlaceholderNumberType` etc) by using a ViewChild reference into the IntlTelInput component (using the `#ref` prop), and then calling `this.ref.getInstance()` e.g. `this.ref.getInstance().setNumber(...);`. See the [Set Number demo](https://github.com/jackocnr/intl-tel-input/blob/master/angular/demo/set-number/set-number.component.ts) for a full example. You can also access the input DOM element in a similar way: `this.ref.getInput()`.
+
+> [!IMPORTANT]
+> You must use `ngAfterViewInit` (not `ngOnInit` or `constructor`) to access instance or input methods, as the component needs to be fully initialized first.
 
 ## Accessing Static Methods
 
-You can access all of the plugin's [static methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#static-methods) by importing `intlTelInput` from the same file as the angular component e.g. `import { IntlTelInputComponent } from "intl-tel-input/angular"` (note the lower case "i" in "intlTelInput"). You can then use this as you would with the main plugin e.g. `intlTelInput.getCountryData()` or `intlTelInput.utils.numberType` etc.
+You can access all of the plugin's [static methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#static-methods) by importing `intlTelInput` from the same file as the angular component e.g. `import { intlTelInput } from "intl-tel-input/angular"` (note the lower case "i" in "intlTelInput"). You can then use this as you would with the main plugin e.g. `intlTelInput.getCountryData()` or `intlTelInput.utils.numberType` etc.

package/angular/build/IntlTelInput.js

@@ -3807,7 +3807,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.12.3"
+  version: "25.12.5"
 });
 var intl_tel_input_default = intlTelInput;
 
@@ -3828,12 +3828,17 @@ var IntlTelInputComponent = class {
     this.initialValue = "";
     this.usePreciseValidation = false;
     this.inputProps = {};
-    this.disabled = void 0;
     this.initOptions = {};
     this.numberChange = new EventEmitter();
     this.countryChange = new EventEmitter();
     this.validityChange = new EventEmitter();
     this.errorCodeChange = new EventEmitter();
+    this.blur = new EventEmitter();
+    this.focus = new EventEmitter();
+    this.keydown = new EventEmitter();
+    this.keyup = new EventEmitter();
+    this.paste = new EventEmitter();
+    this.click = new EventEmitter();
     this.iti = null;
     this.countryChangeHandler = () => this.handleInput();
     this.onChange = () => {
@@ -3849,11 +3854,6 @@ var IntlTelInputComponent = class {
     }
     this.inputRef.nativeElement.addEventListener("countrychange", this.countryChangeHandler);
     this.applyInputProps();
-    for (const key in this.inputProps) {
-      if (this.inputProps.hasOwnProperty(key)) {
-        this.inputRef.nativeElement.setAttribute(key, this.inputProps[key]);
-      }
-    }
   }
   ngAfterViewInit() {
     var _a, _b;
@@ -3888,12 +3888,36 @@ var IntlTelInputComponent = class {
     this.onChange(num);
     this.onValidatorChange();
   }
-  handleBlur() {
+  handleBlur(event) {
     this.onTouched();
+    this.blur.emit(event);
+  }
+  handleFocus(event) {
+    this.focus.emit(event);
+  }
+  handleKeyDown(event) {
+    this.keydown.emit(event);
+  }
+  handleKeyUp(event) {
+    this.keyup.emit(event);
   }
+  handlePaste(event) {
+    this.paste.emit(event);
+  }
+  handleClick(event) {
+    this.click.emit(event);
+  }
+  /**
+   * This method must be called in `ngAfterViewInit` or later lifecycle hooks,
+   * not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.
+   */
   getInstance() {
     return this.iti;
   }
+  /**
+   * This method must be called in `ngAfterViewInit` or later lifecycle hooks,
+   * not in `ngOnInit` or the `constructor`, as the component needs to be fully initialized.
+   */
   getInput() {
     return this.inputRef.nativeElement;
   }
@@ -3957,7 +3981,7 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
     let _t;
     i0.\u0275\u0275queryRefresh(_t = i0.\u0275\u0275loadQuery()) && (ctx.inputRef = _t.first);
   }
-}, inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputProps: "inputProps", disabled: "disabled", initOptions: "initOptions" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange" }, features: [i0.\u0275\u0275ProvidersFeature([
+}, inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputProps: "inputProps", disabled: "disabled", initOptions: "initOptions" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange", blur: "blur", focus: "focus", keydown: "keydown", keyup: "keyup", paste: "paste", click: "click" }, features: [i0.\u0275\u0275ProvidersFeature([
   {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => IntlTelInputComponent),
@@ -3968,16 +3992,31 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
     useExisting: forwardRef(() => IntlTelInputComponent),
     multi: true
   }
-]), i0.\u0275\u0275NgOnChangesFeature], decls: 2, vars: 0, consts: [["inputRef", ""], ["type", "tel", 3, "input", "blur"]], template: function IntlTelInputComponent_Template(rf, ctx) {
+]), i0.\u0275\u0275NgOnChangesFeature], decls: 2, vars: 0, consts: [["inputRef", ""], ["type", "tel", 3, "input", "blur", "focus", "keydown", "keyup", "paste", "click"]], template: function IntlTelInputComponent_Template(rf, ctx) {
   if (rf & 1) {
     const _r1 = i0.\u0275\u0275getCurrentView();
     i0.\u0275\u0275elementStart(0, "input", 1, 0);
     i0.\u0275\u0275listener("input", function IntlTelInputComponent_Template_input_input_0_listener() {
       i0.\u0275\u0275restoreView(_r1);
       return i0.\u0275\u0275resetView(ctx.handleInput());
-    })("blur", function IntlTelInputComponent_Template_input_blur_0_listener() {
+    })("blur", function IntlTelInputComponent_Template_input_blur_0_listener($event) {
+      i0.\u0275\u0275restoreView(_r1);
+      return i0.\u0275\u0275resetView(ctx.handleBlur($event));
+    })("focus", function IntlTelInputComponent_Template_input_focus_0_listener($event) {
+      i0.\u0275\u0275restoreView(_r1);
+      return i0.\u0275\u0275resetView(ctx.handleFocus($event));
+    })("keydown", function IntlTelInputComponent_Template_input_keydown_0_listener($event) {
       i0.\u0275\u0275restoreView(_r1);
-      return i0.\u0275\u0275resetView(ctx.handleBlur());
+      return i0.\u0275\u0275resetView(ctx.handleKeyDown($event));
+    })("keyup", function IntlTelInputComponent_Template_input_keyup_0_listener($event) {
+      i0.\u0275\u0275restoreView(_r1);
+      return i0.\u0275\u0275resetView(ctx.handleKeyUp($event));
+    })("paste", function IntlTelInputComponent_Template_input_paste_0_listener($event) {
+      i0.\u0275\u0275restoreView(_r1);
+      return i0.\u0275\u0275resetView(ctx.handlePaste($event));
+    })("click", function IntlTelInputComponent_Template_input_click_0_listener($event) {
+      i0.\u0275\u0275restoreView(_r1);
+      return i0.\u0275\u0275resetView(ctx.handleClick($event));
     });
     i0.\u0275\u0275elementEnd();
   }
@@ -3993,7 +4032,12 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
       type="tel"
       #inputRef
       (input)="handleInput()"
-      (blur)="handleBlur()"
+      (blur)="handleBlur($event)"
+      (focus)="handleFocus($event)"
+      (keydown)="handleKeyDown($event)"
+      (keyup)="handleKeyUp($event)"
+      (paste)="handlePaste($event)"
+      (click)="handleClick($event)"
     />
   `,
       providers: [
@@ -4030,10 +4074,22 @@ IntlTelInputComponent.\u0275cmp = /* @__PURE__ */ i0.\u0275\u0275defineComponent
     type: Output
   }], errorCodeChange: [{
     type: Output
+  }], blur: [{
+    type: Output
+  }], focus: [{
+    type: Output
+  }], keydown: [{
+    type: Output
+  }], keyup: [{
+    type: Output
+  }], paste: [{
+    type: Output
+  }], click: [{
+    type: Output
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInputComponent, { className: "IntlTelInputComponent", filePath: "intl-tel-input/angular.ts", lineNumber: 42 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInputComponent, { className: "IntlTelInputComponent", filePath: "intl-tel-input/angular.ts", lineNumber: 67 });
 })();
 export {
   IntlTelInputComponent,