intl-tel-input 25.12.2 → 25.12.4

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.2/build/css/intlTelInput.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.4/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.2/build/js/intlTelInput.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.4/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.2/build/js/utils.js"),
+      loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.4/build/js/utils.js"),
     });
   </script>
   ```
@@ -333,7 +333,7 @@ The `loadUtils` option takes a function which returns a Promise which resolves t
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.2/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.4/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js
@@ -617,7 +617,7 @@ The `loadUtils` option takes a function that returns a Promise resolving to the
 ```js
 // (A) import utils module from a CDN
 intlTelInput(htmlInputElement, {
-  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.2/build/js/utils.js"),
+  loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.4/build/js/utils.js"),
 });
 
 // (B) import utils module from your own hosted version of utils.js

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,11 @@ 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.
 
 ## Getting Started
+
 ```html
 import { IntlTelInputComponent } from "intl-tel-input/angularWithUtils";
 import "intl-tel-input/styles";
@@ -29,58 +33,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.2/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.4/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

@@ -3400,6 +3400,10 @@ var Iti = class _Iti {
         return iso2Codes[0];
       }
     } else if (number.startsWith("+") && numeric.length) {
+      const currentDial = this.selectedCountryData.dialCode || "";
+      if (currentDial && currentDial.startsWith(numeric)) {
+        return null;
+      }
       return "";
     } else if ((!number || number === "+") && !selectedIso2) {
       return this.defaultCountry;
@@ -3534,19 +3538,23 @@ var Iti = class _Iti {
     let dialCode = "";
     if (number.startsWith("+")) {
       let numericChars = "";
+      let foundBaseDialCode = false;
       for (let i = 0; i < number.length; i++) {
         const c = number.charAt(i);
         if (/[0-9]/.test(c)) {
           numericChars += c;
-          const isMatch = Boolean(this.dialCodeToIso2Map[numericChars]);
-          if (!isMatch) {
+          const hasMapEntry = Boolean(this.dialCodeToIso2Map[numericChars]);
+          if (!hasMapEntry) {
             break;
           }
-          if (includeAreaCode) {
+          if (this.dialCodes.has(numericChars)) {
             dialCode = number.substring(0, i + 1);
-          } else if (this.dialCodes.has(numericChars)) {
+            foundBaseDialCode = true;
+            if (!includeAreaCode) {
+              break;
+            }
+          } else if (includeAreaCode && foundBaseDialCode) {
             dialCode = number.substring(0, i + 1);
-            break;
           }
           if (numericChars.length === this.dialCodeMaxLen) {
             break;
@@ -3799,7 +3807,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.12.2"
+  version: "25.12.4"
 });
 var intl_tel_input_default = intlTelInput;
 
@@ -3820,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 = () => {
@@ -3841,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;
@@ -3880,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;
   }
@@ -3949,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),
@@ -3960,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());
+      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.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();
   }
@@ -3985,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: [
@@ -4022,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,

package/angular/build/IntlTelInputWithUtils.js

@@ -3400,6 +3400,10 @@ var Iti = class _Iti {
         return iso2Codes[0];
       }
     } else if (number.startsWith("+") && numeric.length) {
+      const currentDial = this.selectedCountryData.dialCode || "";
+      if (currentDial && currentDial.startsWith(numeric)) {
+        return null;
+      }
       return "";
     } else if ((!number || number === "+") && !selectedIso2) {
       return this.defaultCountry;
@@ -3534,19 +3538,23 @@ var Iti = class _Iti {
     let dialCode = "";
     if (number.startsWith("+")) {
       let numericChars = "";
+      let foundBaseDialCode = false;
       for (let i = 0; i < number.length; i++) {
         const c = number.charAt(i);
         if (/[0-9]/.test(c)) {
           numericChars += c;
-          const isMatch = Boolean(this.dialCodeToIso2Map[numericChars]);
-          if (!isMatch) {
+          const hasMapEntry = Boolean(this.dialCodeToIso2Map[numericChars]);
+          if (!hasMapEntry) {
             break;
           }
-          if (includeAreaCode) {
+          if (this.dialCodes.has(numericChars)) {
             dialCode = number.substring(0, i + 1);
-          } else if (this.dialCodes.has(numericChars)) {
+            foundBaseDialCode = true;
+            if (!includeAreaCode) {
+              break;
+            }
+          } else if (includeAreaCode && foundBaseDialCode) {
             dialCode = number.substring(0, i + 1);
-            break;
           }
           if (numericChars.length === this.dialCodeMaxLen) {
             break;
@@ -3799,7 +3807,7 @@ var intlTelInput = Object.assign((input, options) => {
   attachUtils,
   startedLoadingUtilsScript: false,
   startedLoadingAutoCountry: false,
-  version: "25.12.2"
+  version: "25.12.4"
 });
 var intl_tel_input_default = intlTelInput;
 
@@ -10300,12 +10308,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 = () => {
@@ -10321,11 +10334,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;
@@ -10360,12 +10368,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;
   }
@@ -10429,7 +10461,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),
@@ -10440,16 +10472,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());
+      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.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();
   }
@@ -10465,7 +10512,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: [
@@ -10502,10 +10554,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/angularwithutils.ts", lineNumber: 43 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInputComponent, { className: "IntlTelInputComponent", filePath: "intl-tel-input/angularwithutils.ts", lineNumber: 68 });
 })();
 export {
   IntlTelInputComponent,

package/angular/build/types/intl-tel-input/angular.d.ts

@@ -11,12 +11,18 @@ export declare class IntlTelInputComponent implements OnInit, AfterViewInit, OnD
     initialValue: string;
     usePreciseValidation: boolean;
     inputProps: object;
-    disabled: boolean | undefined;
+    disabled?: boolean;
     initOptions: SomeOptions;
     numberChange: EventEmitter<string>;
     countryChange: EventEmitter<string>;
     validityChange: EventEmitter<boolean>;
     errorCodeChange: EventEmitter<number>;
+    blur: EventEmitter<FocusEvent>;
+    focus: EventEmitter<FocusEvent>;
+    keydown: EventEmitter<KeyboardEvent>;
+    keyup: EventEmitter<KeyboardEvent>;
+    paste: EventEmitter<ClipboardEvent>;
+    click: EventEmitter<MouseEvent>;
     private iti;
     private countryChangeHandler;
     private onChange;
@@ -26,8 +32,21 @@ export declare class IntlTelInputComponent implements OnInit, AfterViewInit, OnD
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     handleInput(): void;
-    handleBlur(): void;
+    handleBlur(event: FocusEvent): void;
+    handleFocus(event: FocusEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(event: KeyboardEvent): void;
+    handlePaste(event: ClipboardEvent): void;
+    handleClick(event: MouseEvent): void;
+    /**
+     * 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(): Iti | null;
+    /**
+     * 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(): HTMLInputElement | null;
     ngOnDestroy(): void;
     private applyInputProps;
@@ -38,5 +57,5 @@ export declare class IntlTelInputComponent implements OnInit, AfterViewInit, OnD
     validate(control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IntlTelInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IntlTelInputComponent, "intl-tel-input", never, { "initialValue": { "alias": "initialValue"; "required": false; }; "usePreciseValidation": { "alias": "usePreciseValidation"; "required": false; }; "inputProps": { "alias": "inputProps"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "initOptions": { "alias": "initOptions"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IntlTelInputComponent, "intl-tel-input", never, { "initialValue": { "alias": "initialValue"; "required": false; }; "usePreciseValidation": { "alias": "usePreciseValidation"; "required": false; }; "inputProps": { "alias": "inputProps"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "initOptions": { "alias": "initOptions"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; "blur": "blur"; "focus": "focus"; "keydown": "keydown"; "keyup": "keyup"; "paste": "paste"; "click": "click"; }, never, never, true, never>;
 }