Libraries configuration

The below line should merge your custom options.

options = $.extend(options, Drupal.webform.intlTelInput.options);

Please test the complete code below and ensure you have handled the order of script execution in Drupal.

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.customTelephone = {
    attach: function (context, settings) {
      // Define custom options for International Telephone Input.
      Drupal.webform = Drupal.webform || {};
      Drupal.webform.intlTelInput = Drupal.webform.intlTelInput || {};
      Drupal.webform.intlTelInput.options = {
        autoPlaceholder: "off"
      };
      console.log("Custom options set:", Drupal.webform.intlTelInput.options);

      // Initialize the plugin with extended options.
      $('input[type="tel"]', context).once('intlTelInput').each(function () {
        var options = {
          // Default options here
        };

        // Extend default options with custom options.
        options = $.extend(options, Drupal.webform.intlTelInput.options);
        console.log("Final options:", options);

        // Initialize the plugin with the final options.
        $(this).intlTelInput(options);
      });
    }
  };
})(jQuery, Drupal, drupalSettings);

custom_telephone:
  version: 1.x
  js:
    js/custom_telephone.js: { }
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
    - webform/webform.element.telephone

Hi guys

@jrockowitz, the line you told me is on the code of the module yet

@mubasshir-khan, I won't create a custom module, I would like to use the default code in web/modules/contrib/webform/js/webform.element.telephone.js

To be complete, the contrib webform module have the webform.element.telephone.js with

var options = {
  // The utilsScript is fetched when the page has finished.
  // @see \Drupal\webform\Plugin\WebformElement\Telephone::prepare
  // @see https://github.com/jackocnr/intl-tel-input
  utilsScript: drupalSettings.webform.intlTelInput.utilsScript,
  nationalMode: false
};
// Parse data attributes.
if ($telephone.attr('data-webform-telephone-international-initial-country')) {
  options.initialCountry = $telephone.attr('data-webform-telephone-international-initial-country');
}
if ($telephone.attr('data-webform-telephone-international-preferred-countries')) {
  options.preferredCountries = JSON.parse($telephone.attr('data-webform-telephone-international-preferred-countries'));
}
options = $.extend(options, Drupal.webform.intlTelInput.options);
$telephone.intlTelInput(options);

in this script I want to inject my custom setting

I think the challenge of customizing a webform element's JS options keeps coming up, and maybe we need to come up with a broader solution that allows a data-options attribute to be supported. ✨ Allow disabling of specific dates in jqueryui date picker. Active

To address the code example from #3

The Drupal.webform.intlTelInput.options should not be defined in a Drupal behavior but globally

One of the reasons Drupal behaviors are public is you can completely override and replace Drupal.behaviors.webformTelephoneInternational, which feels like the right solution for your project.

Below is an untested POC.

(function ($, Drupal) {

const defaultAttach = Drupal.behaviors.webformTelephoneInternational.attach;
Drupal.behaviors.webformTelephoneInternational.attach = function myCustomAttachCode(context) {
  Drupal.webform.intlTelInput.options.autoPlaceholder = "off";
  defaultAttach(context)
}

})(jQuery, Drupal);