@intl-tel-input/angular 29.1.2 → 29.2.0

package/dist/IntlTelInput.d.ts

@@ -21,6 +21,7 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     allowedNumberTypes?: AllOptions["allowedNumberTypes"];
     allowNumberExtensions?: AllOptions["allowNumberExtensions"];
     allowPhonewords?: AllOptions["allowPhonewords"];
+    classNames?: AllOptions["classNames"];
     containerClass?: AllOptions["containerClass"];
     countryNameLocale?: AllOptions["countryNameLocale"];
     countryNameOverrides?: AllOptions["countryNameOverrides"];
@@ -68,6 +69,7 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     private lastEmittedErrorCode?;
     private pendingWriteValue?;
     private pendingUpdate;
+    private isWritingModelValue;
     private onChange;
     private onTouched;
     private onValidatorChange;
@@ -77,6 +79,7 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     ngAfterViewInit(): void;
     private buildInitOptions;
     ngOnChanges(changes: SimpleChanges): void;
+    private setNumberFromModel;
     handleInput: () => void;
     handleBlur(event: FocusEvent): void;
     handleFocus(event: FocusEvent): void;
@@ -104,6 +107,6 @@ declare class IntlTelInput implements AfterViewInit, OnDestroy, OnChanges, Contr
     validate(_control: AbstractControl): ValidationErrors | null;
     registerOnValidatorChange(fn: () => void): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IntlTelInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IntlTelInput, "intl-tel-input", never, { "initialValue": { "alias": "initialValue"; "required": false; }; "usePreciseValidation": { "alias": "usePreciseValidation"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "countrySelectorMode": { "alias": "countrySelectorMode"; "required": false; }; "allowedNumberTypes": { "alias": "allowedNumberTypes"; "required": false; }; "allowNumberExtensions": { "alias": "allowNumberExtensions"; "required": false; }; "allowPhonewords": { "alias": "allowPhonewords"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "countryNameLocale": { "alias": "countryNameLocale"; "required": false; }; "countryNameOverrides": { "alias": "countryNameOverrides"; "required": false; }; "countryOrder": { "alias": "countryOrder"; "required": false; }; "countrySearch": { "alias": "countrySearch"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "dropdownAlwaysOpen": { "alias": "dropdownAlwaysOpen"; "required": false; }; "dropdownParent": { "alias": "dropdownParent"; "required": false; }; "excludeCountries": { "alias": "excludeCountries"; "required": false; }; "matchDropdownWidth": { "alias": "matchDropdownWidth"; "required": false; }; "formatAsYouType": { "alias": "formatAsYouType"; "required": false; }; "hiddenInputs": { "alias": "hiddenInputs"; "required": false; }; "uiTranslations": { "alias": "uiTranslations"; "required": false; }; "initialCountry": { "alias": "initialCountry"; "required": false; }; "initialCountryLookup": { "alias": "initialCountryLookup"; "required": false; }; "loadUtils": { "alias": "loadUtils"; "required": false; }; "numberDisplayFormat": { "alias": "numberDisplayFormat"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "placeholderNumberPolicy": { "alias": "placeholderNumberPolicy"; "required": false; }; "placeholderNumberType": { "alias": "placeholderNumberType"; "required": false; }; "searchInputClass": { "alias": "searchInputClass"; "required": false; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; }; "showFlags": { "alias": "showFlags"; "required": false; }; "strictMode": { "alias": "strictMode"; "required": false; }; "strictRejectAnimation": { "alias": "strictRejectAnimation"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; "openCountrySelector": "openCountrySelector"; "closeCountrySelector": "closeCountrySelector"; "strictReject": "strictReject"; "blur": "blur"; "focus": "focus"; "keydown": "keydown"; "keyup": "keyup"; "paste": "paste"; "click": "click"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IntlTelInput, "intl-tel-input", never, { "initialValue": { "alias": "initialValue"; "required": false; }; "usePreciseValidation": { "alias": "usePreciseValidation"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "countrySelectorMode": { "alias": "countrySelectorMode"; "required": false; }; "allowedNumberTypes": { "alias": "allowedNumberTypes"; "required": false; }; "allowNumberExtensions": { "alias": "allowNumberExtensions"; "required": false; }; "allowPhonewords": { "alias": "allowPhonewords"; "required": false; }; "classNames": { "alias": "classNames"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "countryNameLocale": { "alias": "countryNameLocale"; "required": false; }; "countryNameOverrides": { "alias": "countryNameOverrides"; "required": false; }; "countryOrder": { "alias": "countryOrder"; "required": false; }; "countrySearch": { "alias": "countrySearch"; "required": false; }; "customPlaceholder": { "alias": "customPlaceholder"; "required": false; }; "dropdownAlwaysOpen": { "alias": "dropdownAlwaysOpen"; "required": false; }; "dropdownParent": { "alias": "dropdownParent"; "required": false; }; "excludeCountries": { "alias": "excludeCountries"; "required": false; }; "matchDropdownWidth": { "alias": "matchDropdownWidth"; "required": false; }; "formatAsYouType": { "alias": "formatAsYouType"; "required": false; }; "hiddenInputs": { "alias": "hiddenInputs"; "required": false; }; "uiTranslations": { "alias": "uiTranslations"; "required": false; }; "initialCountry": { "alias": "initialCountry"; "required": false; }; "initialCountryLookup": { "alias": "initialCountryLookup"; "required": false; }; "loadUtils": { "alias": "loadUtils"; "required": false; }; "numberDisplayFormat": { "alias": "numberDisplayFormat"; "required": false; }; "onlyCountries": { "alias": "onlyCountries"; "required": false; }; "placeholderNumberPolicy": { "alias": "placeholderNumberPolicy"; "required": false; }; "placeholderNumberType": { "alias": "placeholderNumberType"; "required": false; }; "searchInputClass": { "alias": "searchInputClass"; "required": false; }; "separateDialCode": { "alias": "separateDialCode"; "required": false; }; "showFlags": { "alias": "showFlags"; "required": false; }; "strictMode": { "alias": "strictMode"; "required": false; }; "strictRejectAnimation": { "alias": "strictRejectAnimation"; "required": false; }; }, { "numberChange": "numberChange"; "countryChange": "countryChange"; "validityChange": "validityChange"; "errorCodeChange": "errorCodeChange"; "openCountrySelector": "openCountrySelector"; "closeCountrySelector": "closeCountrySelector"; "strictReject": "strictReject"; "blur": "blur"; "focus": "focus"; "keydown": "keydown"; "keyup": "keyup"; "paste": "paste"; "click": "click"; }, never, never, true, never>;
 }
 export default IntlTelInput;

package/dist/IntlTelInput.js

@@ -13,8 +13,8 @@ var rawCountryData = [
     // Åland Islands (AKA Aland Islands)
     "358",
     1,
-    ["18", "4"],
-    // (4 is a mobile range shared with FI)
+    ["18", "4", "50"],
+    // (4 and 50 are mobile ranges shared with FI)
     // NOTE: https://en.wikipedia.org/wiki/Telephone%20numbers%20in%20%C3%85land says some 4XXX ranges (e.g. 4570) are specific to AX, but LPN doesn't respect this (https://libphonenumber.appspot.com/phonenumberparser?number=%2B3584570123456 says region=FI) so we won't either. Also it's too much of a maintenance burden to keep track of. Keep the 4 area code range here so that if the user selects AX and types this kind of number, we wont change the flag to FI. Whereas if they type a FI-only range then we will.
     "0"
   ],
@@ -561,8 +561,8 @@ var rawCountryData = [
     // Finland
     "358",
     0,
-    ["4"],
-    // (mobile range shared with AX)
+    ["4", "50"],
+    // (mobile ranges shared with AX)
     "0"
   ],
   [
@@ -669,7 +669,8 @@ var rawCountryData = [
     // Guernsey
     "44",
     1,
-    ["1481", "7781", "7839", "7911"],
+    //* Only 79111 and 79117 belong to GG - the rest of 7911 is GB (e.g. 79110).
+    ["1481", "7781", "7839", "79111", "79117"],
     "0"
   ],
   [
@@ -800,7 +801,8 @@ var rawCountryData = [
     // Jersey
     "44",
     3,
-    ["1534", "7509", "7700", "7797", "7829", "7937"],
+    //* Only 77003/77007/77008 belong to JE - the rest of 7700 is GB (e.g. 77001).
+    ["1534", "7509", "77003", "77007", "77008", "7797", "7829", "7937"],
     "0"
   ],
   [
@@ -995,7 +997,7 @@ var rawCountryData = [
     // Mayotte
     "262",
     1,
-    ["269", "639"],
+    ["2689", "269", "639", "7093"],
     "0"
   ],
   [
@@ -1759,6 +1761,29 @@ var EVENTS = {
   // used for synthetic input trigger
   STRICT_REJECT: "strict:reject"
 };
+var ITI_SLOTS = [
+  "container",
+  "input",
+  "countryContainer",
+  "selectedCountry",
+  "selectedCountryPrimary",
+  "selectedFlag",
+  "arrow",
+  "selectedDialCode",
+  "countrySelector",
+  "countrySelectorContainer",
+  "searchWrapper",
+  "searchIcon",
+  "searchInput",
+  "searchClear",
+  "countryList",
+  "countryListItem",
+  "countryListItemFlag",
+  "countryName",
+  "dialCode",
+  "countryCheck",
+  "noResults"
+];
 var CLASSES = {
   HIDE: "iti__hide",
   V_HIDE: "iti__v-hide",
@@ -1935,6 +1960,8 @@ var defaults = {
   allowNumberExtensions: false,
   // Allow alphanumeric "phonewords" (e.g. +1 800 FLOWERS) as valid numbers
   allowPhonewords: false,
+  //* Add custom classes to the elements we generate, keyed by slot name e.g. { selectedCountry: "rounded-l-lg" }.
+  classNames: {},
   //* Add a custom class to the (injected) container element.
   containerClass: "",
   //* Locale for localising country names via Intl.DisplayNames.
@@ -1997,6 +2024,7 @@ var isElLike = (val) => {
   return v.nodeType === 1 && typeof v.tagName === "string" && typeof v.appendChild === "function";
 };
 var placeholderPolicySet = new Set(Object.values(PLACEHOLDER_POLICY));
+var slotSet = new Set(ITI_SLOTS);
 var warn = (message) => {
   console.warn(`[intl-tel-input] ${message}`);
 };
@@ -2097,6 +2125,26 @@ var validateOptions = (customOptions) => {
         }
         validatedOptions[key] = value;
         break;
+      case "classNames": {
+        if (!isPlainObject(value)) {
+          warnOption("classNames", "an object", value);
+          break;
+        }
+        const validSlots = {};
+        for (const [slot, slotValue] of Object.entries(value)) {
+          if (!slotSet.has(slot)) {
+            warn(
+              `Unknown slot '${slot}' in 'classNames'. Valid slots: ${ITI_SLOTS.join(", ")}. Skipping.`
+            );
+          } else if (typeof slotValue !== "string") {
+            warnOption(`classNames.${slot}`, "a string", slotValue);
+          } else {
+            validSlots[slot] = slotValue.trim().replace(/\s+/g, " ");
+          }
+        }
+        validatedOptions[key] = validSlots;
+        break;
+      }
       case "countryOrder": {
         if (value === null) {
           validatedOptions[key] = value;
@@ -2509,11 +2557,18 @@ var UI = class {
       );
     }
   }
+  //* Append any consumer-supplied classes (via the classNames option) for the given slot to our own classes for that element.
+  #withSlotClass(slot, ourClasses) {
+    const custom = this.#options.classNames[slot];
+    return custom ? `${ourClasses} ${custom}` : ourClasses;
+  }
   //* Generate all of the markup for the core library: the selected country overlay, and the country selector.
   buildMarkup(countries, searchTokens) {
     this.#countries = countries;
     this.#searchTokens = searchTokens;
-    this.telInputEl.classList.add("iti__tel-input");
+    this.telInputEl.classList.add(
+      ...this.#withSlotClass("input", "iti__tel-input").split(" ")
+    );
     if (!this.telInputEl.hasAttribute("type")) {
       this.telInputEl.setAttribute("type", "tel");
     }
@@ -2541,7 +2596,9 @@ var UI = class {
       "iti--inline-country-selector": countrySelectorMode !== COUNTRY_SELECTOR_MODE.FULLSCREEN,
       [containerClass]: Boolean(containerClass)
     });
-    const wrapper = createEl("div", { class: parentClasses });
+    const wrapper = createEl("div", {
+      class: this.#withSlotClass("container", parentClasses)
+    });
     if (this.#isRTL) {
       wrapper.setAttribute("dir", "ltr");
     }
@@ -2557,7 +2614,12 @@ var UI = class {
     this.#countryContainerEl = createEl(
       "div",
       // visibly hidden until we measure its width to set the input padding correctly
-      { class: `iti__country-container ${CLASSES.V_HIDE}` },
+      {
+        class: this.#withSlotClass(
+          "countryContainer",
+          `iti__country-container ${CLASSES.V_HIDE}`
+        )
+      },
       wrapper
     );
     if (enableCountrySelector) {
@@ -2565,7 +2627,7 @@ var UI = class {
         "button",
         {
           type: "button",
-          class: "iti__selected-country",
+          class: this.#withSlotClass("selectedCountry", "iti__selected-country"),
           [ARIA.EXPANDED]: "false",
           [ARIA.LABEL]: this.#options.uiTranslations.noCountrySelected,
           [ARIA.HASPOPUP]: "dialog",
@@ -2579,31 +2641,44 @@ var UI = class {
     } else {
       this.#selectedCountryEl = createEl(
         "div",
-        { class: "iti__selected-country" },
+        { class: this.#withSlotClass("selectedCountry", "iti__selected-country") },
         this.#countryContainerEl
       );
     }
     const selectedCountryPrimary = createEl(
       "div",
-      { class: "iti__selected-country-primary" },
+      {
+        class: this.#withSlotClass(
+          "selectedCountryPrimary",
+          "iti__selected-country-primary"
+        )
+      },
       this.#selectedCountryEl
     );
     this.#selectedFlagEl = createEl(
       "div",
-      { class: CLASSES.FLAG },
+      { class: this.#withSlotClass("selectedFlag", CLASSES.FLAG) },
       selectedCountryPrimary
     );
     if (enableCountrySelector) {
       this.#arrowEl = createEl(
         "div",
-        { class: "iti__arrow", [ARIA.HIDDEN]: "true" },
+        {
+          class: this.#withSlotClass("arrow", "iti__arrow"),
+          [ARIA.HIDDEN]: "true"
+        },
         selectedCountryPrimary
       );
     }
     if (separateDialCode) {
       this.#selectedDialCodeEl = createEl(
         "div",
-        { class: "iti__selected-dial-code" },
+        {
+          class: this.#withSlotClass(
+            "selectedDialCode",
+            "iti__selected-dial-code"
+          )
+        },
         this.#selectedCountryEl
       );
     }
@@ -2634,7 +2709,10 @@ var UI = class {
     const extraClasses = matchDropdownWidth ? "" : "iti--flexible-dropdown-width";
     this.#countrySelectorEl = createEl("div", {
       id: `iti-${this.#id}__country-selector`,
-      class: `iti__country-selector ${CLASSES.HIDE} ${extraClasses}`,
+      class: this.#withSlotClass(
+        "countrySelector",
+        `iti__country-selector ${CLASSES.HIDE} ${extraClasses}`
+      ),
       role: "dialog",
       [ARIA.MODAL]: "true"
     });
@@ -2647,7 +2725,7 @@ var UI = class {
     this.#countryListEl = createEl(
       "ul",
       {
-        class: "iti__country-list",
+        class: this.#withSlotClass("countryList", "iti__country-list"),
         id: `iti-${this.#id}__country-listbox`,
         role: "listbox",
         [ARIA.LABEL]: uiTranslations.countryListAriaLabel
@@ -2666,7 +2744,9 @@ var UI = class {
         "iti--inline-country-selector": !isFullscreen,
         [containerClass]: Boolean(containerClass)
       });
-      this.#detachedCountrySelectorEl = createEl("div", { class: wrapperClasses });
+      this.#detachedCountrySelectorEl = createEl("div", {
+        class: this.#withSlotClass("countrySelectorContainer", wrapperClasses)
+      });
       this.#detachedCountrySelectorEl.appendChild(this.#countrySelectorEl);
     } else {
       this.#countryContainerEl.appendChild(this.#countrySelectorEl);
@@ -2687,13 +2767,13 @@ var UI = class {
     const { uiTranslations, searchInputClass } = this.#options;
     const searchWrapper = createEl(
       "div",
-      { class: "iti__search-input-wrapper" },
+      { class: this.#withSlotClass("searchWrapper", "iti__search-input-wrapper") },
       this.#countrySelectorEl
     );
     this.#searchIconEl = createEl(
       "span",
       {
-        class: "iti__search-icon",
+        class: this.#withSlotClass("searchIcon", "iti__search-icon"),
         [ARIA.HIDDEN]: "true"
       },
       searchWrapper
@@ -2705,7 +2785,10 @@ var UI = class {
         id: `iti-${this.#id}__search-input`,
         // Chrome says inputs need either a name or an id
         type: "search",
-        class: `iti__search-input ${searchInputClass}`,
+        class: this.#withSlotClass(
+          "searchInput",
+          `iti__search-input ${searchInputClass}`
+        ),
         placeholder: uiTranslations.searchPlaceholder,
         // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
         role: "combobox",
@@ -2721,7 +2804,10 @@ var UI = class {
       "button",
       {
         type: "button",
-        class: `iti__search-clear ${CLASSES.HIDE}`,
+        class: this.#withSlotClass(
+          "searchClear",
+          `iti__search-clear ${CLASSES.HIDE}`
+        ),
         [ARIA.LABEL]: uiTranslations.clearSearchAriaLabel,
         tabindex: "-1"
       },
@@ -2736,7 +2822,7 @@ var UI = class {
     this.#noResultsMessageEl = createEl(
       "div",
       {
-        class: `iti__no-results ${CLASSES.HIDE}`,
+        class: this.#withSlotClass("noResults", `iti__no-results ${CLASSES.HIDE}`),
         [ARIA.HIDDEN]: "true"
         // all a11y messaging happens in this.#searchResultsLiveRegionEl
       },
@@ -2790,11 +2876,9 @@ var UI = class {
   //* For each country: add a country list item <li> to the countryList <ul> container.
   #appendListItems() {
     const frag = document.createDocumentFragment();
+    const liClass = this.#withSlotClass("countryListItem", CLASSES.COUNTRY_ITEM);
     for (let i = 0; i < this.#countries.length; i++) {
       const c = this.#countries[i];
-      const liClass = buildClassNames({
-        [CLASSES.COUNTRY_ITEM]: true
-      });
       const listItem = createEl("li", {
         id: `iti-${this.#id}__item-${c.iso2}`,
         class: liClass,
@@ -2806,11 +2890,28 @@ var UI = class {
       listItem.dataset[DATA_KEYS.ISO2] = c.iso2;
       this.#listItemByIso2.set(c.iso2, listItem);
       if (this.#options.showFlags) {
-        createEl("div", { class: `${CLASSES.FLAG} iti__${c.iso2}` }, listItem);
+        createEl(
+          "div",
+          {
+            class: this.#withSlotClass(
+              "countryListItemFlag",
+              `${CLASSES.FLAG} iti__${c.iso2}`
+            )
+          },
+          listItem
+        );
       }
-      const nameEl = createEl("span", { class: "iti__country-name" }, listItem);
+      const nameEl = createEl(
+        "span",
+        { class: this.#withSlotClass("countryName", "iti__country-name") },
+        listItem
+      );
       nameEl.textContent = `${c.name} `;
-      const dialEl = createEl("span", { class: "iti__dial-code" }, nameEl);
+      const dialEl = createEl(
+        "span",
+        { class: this.#withSlotClass("dialCode", "iti__dial-code") },
+        nameEl
+      );
       if (this.#isRTL) {
         dialEl.setAttribute("dir", "ltr");
       }
@@ -3257,7 +3358,10 @@ var UI = class {
         newListItem.setAttribute(ARIA.SELECTED, "true");
         const checkIcon = createEl(
           "span",
-          { class: "iti__country-check", [ARIA.HIDDEN]: "true" },
+          {
+            class: this.#withSlotClass("countryCheck", "iti__country-check"),
+            [ARIA.HIDDEN]: "true"
+          },
           newListItem
         );
         checkIcon.appendChild(buildCheckIcon());
@@ -3444,7 +3548,10 @@ var UI = class {
       this.#updateSelectedListItem(iso2);
     }
     if (this.#selectedCountryEl) {
-      const flagClass = iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`;
+      const flagClass = this.#withSlotClass(
+        "selectedFlag",
+        iso2 && showFlags ? `${CLASSES.FLAG} iti__${iso2}` : `${CLASSES.FLAG} ${CLASSES.GLOBE}`
+      );
       let ariaLabel, title;
       let flagContent = null;
       if (iso2) {
@@ -4841,7 +4948,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "29.1.2",
+    version: "29.2.0",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR,
@@ -4872,6 +4979,7 @@ var IntlTelInput = class _IntlTelInput {
   allowedNumberTypes;
   allowNumberExtensions;
   allowPhonewords;
+  classNames;
   containerClass;
   countryNameLocale;
   countryNameOverrides;
@@ -4922,6 +5030,10 @@ var IntlTelInput = class _IntlTelInput {
   pendingWriteValue;
   // if an input event fires before utils has loaded, we defer the update until the promise resolves
   pendingUpdate = false;
+  //* setNumber dispatches a synthetic input event, which handleInput would otherwise treat as a
+  //* user edit and report via onChange - and Angular marks a control dirty on any onChange call.
+  //* Set while we write a value that came FROM the form model, so we can skip that callback.
+  isWritingModelValue = false;
   // eslint-disable-next-line class-methods-use-this
   onChange = () => {
   };
@@ -4937,8 +5049,9 @@ var IntlTelInput = class _IntlTelInput {
     this.strictReject.emit(e.detail);
   };
   ngAfterViewInit() {
+    const classesBeforeInit = new Set(this.inputRef.nativeElement.classList);
     this.iti = intlTelInput_default(this.inputRef.nativeElement, this.buildInitOptions());
-    this.libraryInputClasses = this.inputRef.nativeElement.className;
+    this.libraryInputClasses = Array.from(this.inputRef.nativeElement.classList).filter((className) => !classesBeforeInit.has(className)).join(" ");
     this.inputRef.nativeElement.addEventListener("input", this.handleInput);
     this.inputRef.nativeElement.addEventListener("open:countryselector", this.handleOpenCountrySelector);
     this.inputRef.nativeElement.addEventListener("close:countryselector", this.handleCloseCountrySelector);
@@ -4955,10 +5068,10 @@ var IntlTelInput = class _IntlTelInput {
         return;
       }
       if (this.pendingWriteValue !== void 0) {
-        this.iti.setNumber(this.pendingWriteValue);
+        this.setNumberFromModel(this.pendingWriteValue);
         this.pendingWriteValue = void 0;
       } else if (this.initialValue) {
-        this.iti.setNumber(this.initialValue);
+        this.setNumberFromModel(this.initialValue);
       }
       if (this.pendingUpdate) {
         this.pendingUpdate = false;
@@ -4974,6 +5087,7 @@ var IntlTelInput = class _IntlTelInput {
       allowedNumberTypes: this.allowedNumberTypes,
       allowNumberExtensions: this.allowNumberExtensions,
       allowPhonewords: this.allowPhonewords,
+      classNames: this.classNames,
       containerClass: this.containerClass,
       countryNameLocale: this.countryNameLocale,
       countryNameOverrides: this.countryNameOverrides,
@@ -5013,6 +5127,16 @@ var IntlTelInput = class _IntlTelInput {
       this.applyInputAttrs();
     }
   }
+  //* Write a value that came from the form model (writeValue/initialValue), without reporting it
+  //* back to the model as a user change.
+  setNumberFromModel(value) {
+    this.isWritingModelValue = true;
+    try {
+      this.iti?.setNumber(value);
+    } finally {
+      this.isWritingModelValue = false;
+    }
+  }
   handleInput = () => {
     if (!this.iti) {
       return;
@@ -5027,7 +5151,9 @@ var IntlTelInput = class _IntlTelInput {
     if (num !== this.lastEmittedNumber) {
       this.lastEmittedNumber = num;
       this.numberChange.emit(num);
-      this.onChange(num);
+      if (!this.isWritingModelValue) {
+        this.onChange(num);
+      }
       hasChanged = true;
     }
     if (countryIso !== this.lastEmittedCountry) {
@@ -5121,7 +5247,7 @@ var IntlTelInput = class _IntlTelInput {
     if (this.iti) {
       this.iti.promise.then(() => {
         if (this.iti?.isActive()) {
-          this.iti.setNumber(next);
+          this.setNumberFromModel(next);
         }
       });
     } else {
@@ -5166,7 +5292,7 @@ var IntlTelInput = class _IntlTelInput {
       let _t;
       i0.\u0275\u0275queryRefresh(_t = i0.\u0275\u0275loadQuery()) && (ctx.inputRef = _t.first);
     }
-  }, inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputAttributes: "inputAttributes", disabled: "disabled", readonly: "readonly", countrySelectorMode: "countrySelectorMode", allowedNumberTypes: "allowedNumberTypes", allowNumberExtensions: "allowNumberExtensions", allowPhonewords: "allowPhonewords", containerClass: "containerClass", countryNameLocale: "countryNameLocale", countryNameOverrides: "countryNameOverrides", countryOrder: "countryOrder", countrySearch: "countrySearch", customPlaceholder: "customPlaceholder", dropdownAlwaysOpen: "dropdownAlwaysOpen", dropdownParent: "dropdownParent", excludeCountries: "excludeCountries", matchDropdownWidth: "matchDropdownWidth", formatAsYouType: "formatAsYouType", hiddenInputs: "hiddenInputs", uiTranslations: "uiTranslations", initialCountry: "initialCountry", initialCountryLookup: "initialCountryLookup", loadUtils: "loadUtils", numberDisplayFormat: "numberDisplayFormat", onlyCountries: "onlyCountries", placeholderNumberPolicy: "placeholderNumberPolicy", placeholderNumberType: "placeholderNumberType", searchInputClass: "searchInputClass", separateDialCode: "separateDialCode", showFlags: "showFlags", strictMode: "strictMode", strictRejectAnimation: "strictRejectAnimation" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange", openCountrySelector: "openCountrySelector", closeCountrySelector: "closeCountrySelector", strictReject: "strictReject", blur: "blur", focus: "focus", keydown: "keydown", keyup: "keyup", paste: "paste", click: "click" }, features: [i0.\u0275\u0275ProvidersFeature([
+  }, inputs: { initialValue: "initialValue", usePreciseValidation: "usePreciseValidation", inputAttributes: "inputAttributes", disabled: "disabled", readonly: "readonly", countrySelectorMode: "countrySelectorMode", allowedNumberTypes: "allowedNumberTypes", allowNumberExtensions: "allowNumberExtensions", allowPhonewords: "allowPhonewords", classNames: "classNames", containerClass: "containerClass", countryNameLocale: "countryNameLocale", countryNameOverrides: "countryNameOverrides", countryOrder: "countryOrder", countrySearch: "countrySearch", customPlaceholder: "customPlaceholder", dropdownAlwaysOpen: "dropdownAlwaysOpen", dropdownParent: "dropdownParent", excludeCountries: "excludeCountries", matchDropdownWidth: "matchDropdownWidth", formatAsYouType: "formatAsYouType", hiddenInputs: "hiddenInputs", uiTranslations: "uiTranslations", initialCountry: "initialCountry", initialCountryLookup: "initialCountryLookup", loadUtils: "loadUtils", numberDisplayFormat: "numberDisplayFormat", onlyCountries: "onlyCountries", placeholderNumberPolicy: "placeholderNumberPolicy", placeholderNumberType: "placeholderNumberType", searchInputClass: "searchInputClass", separateDialCode: "separateDialCode", showFlags: "showFlags", strictMode: "strictMode", strictRejectAnimation: "strictRejectAnimation" }, outputs: { numberChange: "numberChange", countryChange: "countryChange", validityChange: "validityChange", errorCodeChange: "errorCodeChange", openCountrySelector: "openCountrySelector", closeCountrySelector: "closeCountrySelector", strictReject: "strictReject", blur: "blur", focus: "focus", keydown: "keydown", keyup: "keyup", paste: "paste", click: "click" }, features: [i0.\u0275\u0275ProvidersFeature([
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => _IntlTelInput),
@@ -5249,6 +5375,8 @@ var IntlTelInput = class _IntlTelInput {
     type: Input
   }], allowPhonewords: [{
     type: Input
+  }], classNames: [{
+    type: Input
   }], containerClass: [{
     type: Input
   }], countryNameLocale: [{