Tel

<ins-input-tel label="Phone"
  areacode-placeholder="Area Code"
  areacode-value="1300"
  phonenum-placeholder="Phone Number"
  phonenum-value="12345"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-input-tel>

<ins-input-tel label="Phone"
  no-areacode
  phonenum-placeholder="Phone Number"
  phonenum-value="12345">
</ins-input-tel>

<ins-input-tel
  label="Phone"
  areacode-placeholder="Area Code"
  areacode-value="1300"
  phonenum-placeholder="Phone Number"
  phonenum-value="12345">
</ins-input-tel>

<ins-input-tel></ins-input-tel>

<ins-input-tel 
  has-error error-message="This is a required field">
</ins-input-tel>

<ins-input-tel 
  id="directSetDataInputtel">
</ins-input-tel>

<script>
  var label_inputtel = 'Telephone',
      areaCode = '130',
      phoneNum = '636991';

  var phoneField = document.getElementById('directSetDataInputtel');
  phoneField.addEventListener('didLoad', function(e){
    // Update `label` attribute of the element
    phoneField.setAttribute('label', label);

    // Update `countryCode` attribute of the element
    phoneField.setCountryCode('+1');

    // Update `areacodeValue` attribute of the element
    phoneField.setAttribute('areacode-value', areaCode);

    // Update `phonenumValue` attribute of the element
    phoneField.setAttribute('phonenum-value', phoneNum);
  });
</script>

<ins-input-tel 
  label="Phone" 
  areacode-value="1300" 
  phonenum-value="12345">
</ins-input-tel>

<ins-input-tel 
  label="Phone">
</ins-input-tel>

<ins-input-tel 
  areacode-value="1300">
</ins-input-tel>

<ins-input-tel 
  Phonenum-value="12345">
</ins-input-tel>

<ins-input-tel
  id="insValueChange"
  label="Phone"
  areacode-placeholder="Area Code"
  phonenum-placeholder="Phone Number">

</ins-input-tel>

<p id="demo"></p>
<p id="demo1"></p>

<script>
const insInputTelChange = document.getElementById('insValueChange')
insInputTelChange.addEventListener('insValueChange', event => {
  console.log(event);
  console.log(event.detail.field);
  console.log(event.detail.value);
  if (event.detail.field == "area_code") {
    document.getElementById("demo").innerHTML = event.detail.field + event.detail.value;
  } else {
    document.getElementById("demo1").innerHTML = event.detail.field + event.detail.value;
  }
});
</script>