@intl-tel-input/angular 29.0.2 → 29.0.4

package/dist/IntlTelInput.d.ts

@@ -77,7 +77,7 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     ngAfterViewInit(): void;
     private buildInitOptions;
     ngOnChanges(changes: SimpleChanges): void;
-    handleInput(): void;
+    handleInput: () => void;
     handleBlur(event: FocusEvent): void;
     handleFocus(event: FocusEvent): void;
     handleKeyDown(event: KeyboardEvent): void;

package/dist/IntlTelInput.js

@@ -2658,9 +2658,13 @@ var UI = class _UI {
       this.#updateSearchResultsA11yText();
     }
     if (!isFullscreen) {
-      this.#inlineDropdownHeight = this.#getHiddenInlineDropdownHeight();
+      const { height, width } = this.#getHiddenInlineDropdownSize();
+      this.#inlineDropdownHeight = height;
       if (countrySearch) {
-        this.#countrySelectorEl.style.height = `${this.#inlineDropdownHeight}px`;
+        this.#countrySelectorEl.style.height = `${height}px`;
+        if (!matchDropdownWidth && width > 0) {
+          this.#countrySelectorEl.style.width = `${width}px`;
+        }
       }
     }
     if (detachedParent) {
@@ -2881,8 +2885,8 @@ var UI = class _UI {
     body.removeChild(containerClone);
     return width;
   }
-  // Get the dropdown height (before it is added to the DOM)
-  #getHiddenInlineDropdownHeight() {
+  // Get the dropdown size (before it is added to the DOM)
+  #getHiddenInlineDropdownSize() {
     const body = _UI.#getBody();
     this.#countrySelectorEl.classList.remove(CLASSES.HIDE);
     const tempContainer = createEl("div", {
@@ -2892,10 +2896,14 @@ var UI = class _UI {
     tempContainer.style.visibility = "hidden";
     body.appendChild(tempContainer);
     const height = this.#countrySelectorEl.offsetHeight;
+    const width = this.#countrySelectorEl.offsetWidth;
     body.removeChild(tempContainer);
     tempContainer.style.visibility = "";
     this.#countrySelectorEl.classList.add(CLASSES.HIDE);
-    return height > 0 ? height : LAYOUT.FALLBACK_DROPDOWN_HEIGHT;
+    return {
+      height: height > 0 ? height : LAYOUT.FALLBACK_DROPDOWN_HEIGHT,
+      width
+    };
   }
   //* Update search results text (for a11y).
   #updateSearchResultsA11yText() {
@@ -4820,7 +4828,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "29.0.2",
+    version: "29.0.4",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR,
@@ -4918,6 +4926,7 @@ var IntlTelInput = class _IntlTelInput {
   ngAfterViewInit() {
     this.iti = intlTelInput_default(this.inputRef.nativeElement, this.buildInitOptions());
     this.libraryInputClasses = this.inputRef.nativeElement.className;
+    this.inputRef.nativeElement.addEventListener("input", this.handleInput);
     this.inputRef.nativeElement.addEventListener("open:countryselector", this.handleOpenCountrySelector);
     this.inputRef.nativeElement.addEventListener("close:countryselector", this.handleCloseCountrySelector);
     this.inputRef.nativeElement.addEventListener("strict:reject", this.handleStrictReject);
@@ -4991,7 +5000,7 @@ var IntlTelInput = class _IntlTelInput {
       this.applyInputAttrs();
     }
   }
-  handleInput() {
+  handleInput = () => {
     if (!this.iti) {
       return;
     }
@@ -5028,7 +5037,7 @@ var IntlTelInput = class _IntlTelInput {
     if (hasChanged) {
       this.onValidatorChange();
     }
-  }
+  };
   handleBlur(event) {
     this.onTouched();
     this.blur.emit(event);
@@ -5063,6 +5072,7 @@ var IntlTelInput = class _IntlTelInput {
     return this.inputRef.nativeElement;
   }
   ngOnDestroy() {
+    this.inputRef.nativeElement.removeEventListener("input", this.handleInput);
     this.inputRef.nativeElement.removeEventListener("open:countryselector", this.handleOpenCountrySelector);
     this.inputRef.nativeElement.removeEventListener("close:countryselector", this.handleCloseCountrySelector);
     this.inputRef.nativeElement.removeEventListener("strict:reject", this.handleStrictReject);
@@ -5154,12 +5164,10 @@ var IntlTelInput = class _IntlTelInput {
       useExisting: forwardRef(() => _IntlTelInput),
       multi: true
     }
-  ]), i0.\u0275\u0275NgOnChangesFeature], decls: 2, vars: 0, consts: [["inputRef", ""], ["type", "tel", 3, "input", "blur", "focus", "keydown", "keyup", "paste", "click"]], template: function IntlTelInput_Template(rf, ctx) {
+  ]), i0.\u0275\u0275NgOnChangesFeature], decls: 2, vars: 0, consts: [["inputRef", ""], ["type", "tel", 3, "blur", "focus", "keydown", "keyup", "paste", "click"]], template: function IntlTelInput_Template(rf, ctx) {
     if (rf & 1) {
       i0.\u0275\u0275domElementStart(0, "input", 1, 0);
-      i0.\u0275\u0275domListener("input", function IntlTelInput_Template_input_input_0_listener() {
-        return ctx.handleInput();
-      })("blur", function IntlTelInput_Template_input_blur_0_listener($event) {
+      i0.\u0275\u0275domListener("blur", function IntlTelInput_Template_input_blur_0_listener($event) {
         return ctx.handleBlur($event);
       })("focus", function IntlTelInput_Template_input_focus_0_listener($event) {
         return ctx.handleFocus($event);
@@ -5186,7 +5194,6 @@ var IntlTelInput = class _IntlTelInput {
     <input
       type="tel"
       #inputRef
-      (input)="handleInput()"
       (blur)="handleBlur($event)"
       (focus)="handleFocus($event)"
       (keydown)="handleKeyDown($event)"
@@ -5308,7 +5315,7 @@ var IntlTelInput = class _IntlTelInput {
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInput, { className: "IntlTelInput", filePath: "IntlTelInput.ts", lineNumber: 72 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInput, { className: "IntlTelInput", filePath: "IntlTelInput.ts", lineNumber: 71 });
 })();
 var IntlTelInput_default = IntlTelInput;
 export {

package/dist/IntlTelInputWithUtils.js

@@ -2658,9 +2658,13 @@ var UI = class _UI {
       this.#updateSearchResultsA11yText();
     }
     if (!isFullscreen) {
-      this.#inlineDropdownHeight = this.#getHiddenInlineDropdownHeight();
+      const { height, width } = this.#getHiddenInlineDropdownSize();
+      this.#inlineDropdownHeight = height;
       if (countrySearch) {
-        this.#countrySelectorEl.style.height = `${this.#inlineDropdownHeight}px`;
+        this.#countrySelectorEl.style.height = `${height}px`;
+        if (!matchDropdownWidth && width > 0) {
+          this.#countrySelectorEl.style.width = `${width}px`;
+        }
       }
     }
     if (detachedParent) {
@@ -2881,8 +2885,8 @@ var UI = class _UI {
     body.removeChild(containerClone);
     return width;
   }
-  // Get the dropdown height (before it is added to the DOM)
-  #getHiddenInlineDropdownHeight() {
+  // Get the dropdown size (before it is added to the DOM)
+  #getHiddenInlineDropdownSize() {
     const body = _UI.#getBody();
     this.#countrySelectorEl.classList.remove(CLASSES.HIDE);
     const tempContainer = createEl("div", {
@@ -2892,10 +2896,14 @@ var UI = class _UI {
     tempContainer.style.visibility = "hidden";
     body.appendChild(tempContainer);
     const height = this.#countrySelectorEl.offsetHeight;
+    const width = this.#countrySelectorEl.offsetWidth;
     body.removeChild(tempContainer);
     tempContainer.style.visibility = "";
     this.#countrySelectorEl.classList.add(CLASSES.HIDE);
-    return height > 0 ? height : LAYOUT.FALLBACK_DROPDOWN_HEIGHT;
+    return {
+      height: height > 0 ? height : LAYOUT.FALLBACK_DROPDOWN_HEIGHT,
+      width
+    };
   }
   //* Update search results text (for a11y).
   #updateSearchResultsA11yText() {
@@ -4820,7 +4828,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "29.0.2",
+    version: "29.0.4",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR,
@@ -11199,6 +11207,7 @@ var IntlTelInput = class _IntlTelInput {
   ngAfterViewInit() {
     this.iti = intlTelInput_default(this.inputRef.nativeElement, this.buildInitOptions());
     this.libraryInputClasses = this.inputRef.nativeElement.className;
+    this.inputRef.nativeElement.addEventListener("input", this.handleInput);
     this.inputRef.nativeElement.addEventListener("open:countryselector", this.handleOpenCountrySelector);
     this.inputRef.nativeElement.addEventListener("close:countryselector", this.handleCloseCountrySelector);
     this.inputRef.nativeElement.addEventListener("strict:reject", this.handleStrictReject);
@@ -11272,7 +11281,7 @@ var IntlTelInput = class _IntlTelInput {
       this.applyInputAttrs();
     }
   }
-  handleInput() {
+  handleInput = () => {
     if (!this.iti) {
       return;
     }
@@ -11309,7 +11318,7 @@ var IntlTelInput = class _IntlTelInput {
     if (hasChanged) {
       this.onValidatorChange();
     }
-  }
+  };
   handleBlur(event) {
     this.onTouched();
     this.blur.emit(event);
@@ -11344,6 +11353,7 @@ var IntlTelInput = class _IntlTelInput {
     return this.inputRef.nativeElement;
   }
   ngOnDestroy() {
+    this.inputRef.nativeElement.removeEventListener("input", this.handleInput);
     this.inputRef.nativeElement.removeEventListener("open:countryselector", this.handleOpenCountrySelector);
     this.inputRef.nativeElement.removeEventListener("close:countryselector", this.handleCloseCountrySelector);
     this.inputRef.nativeElement.removeEventListener("strict:reject", this.handleStrictReject);
@@ -11435,12 +11445,10 @@ var IntlTelInput = class _IntlTelInput {
       useExisting: forwardRef(() => _IntlTelInput),
       multi: true
     }
-  ]), i0.\u0275\u0275NgOnChangesFeature], decls: 2, vars: 0, consts: [["inputRef", ""], ["type", "tel", 3, "input", "blur", "focus", "keydown", "keyup", "paste", "click"]], template: function IntlTelInput_Template(rf, ctx) {
+  ]), i0.\u0275\u0275NgOnChangesFeature], decls: 2, vars: 0, consts: [["inputRef", ""], ["type", "tel", 3, "blur", "focus", "keydown", "keyup", "paste", "click"]], template: function IntlTelInput_Template(rf, ctx) {
     if (rf & 1) {
       i0.\u0275\u0275domElementStart(0, "input", 1, 0);
-      i0.\u0275\u0275domListener("input", function IntlTelInput_Template_input_input_0_listener() {
-        return ctx.handleInput();
-      })("blur", function IntlTelInput_Template_input_blur_0_listener($event) {
+      i0.\u0275\u0275domListener("blur", function IntlTelInput_Template_input_blur_0_listener($event) {
         return ctx.handleBlur($event);
       })("focus", function IntlTelInput_Template_input_focus_0_listener($event) {
         return ctx.handleFocus($event);
@@ -11467,7 +11475,6 @@ var IntlTelInput = class _IntlTelInput {
     <input
       type="tel"
       #inputRef
-      (input)="handleInput()"
       (blur)="handleBlur($event)"
       (focus)="handleFocus($event)"
       (keydown)="handleKeyDown($event)"
@@ -11589,7 +11596,7 @@ var IntlTelInput = class _IntlTelInput {
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInput, { className: "IntlTelInput", filePath: "IntlTelInput.ts", lineNumber: 72 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && i0.\u0275setClassDebugInfo(IntlTelInput, { className: "IntlTelInput", filePath: "IntlTelInput.ts", lineNumber: 71 });
 })();
 var IntlTelInput_default = IntlTelInput;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intl-tel-input/angular",
-  "version": "29.0.2",
+  "version": "29.0.4",
   "description": "An Angular component for intl-tel-input, for entering, formatting, and validating international telephone numbers",
   "type": "module",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "README.md"
   ],
   "dependencies": {
-    "intl-tel-input": "^29.0.2"
+    "intl-tel-input": "^29.0.4"
   },
   "peerDependencies": {
     "@angular/common": ">=17",