Arabic, right to left

<div class="demo" dir="rtl" lang="ar">
  <div class="demo-field">
    <label class="demo-label" for="phone">رقم الجوال</label>
    <input id="phone">
    <p class="demo-hint">جرّب كتابة ٠٥٠١٢٣٤٥٦٧</p>
  </div>
  <p class="demo-out" id="value" dir="ltr"></p>
</div>

import { createPhoneInput } from 'https://devix.pk/cdn/oss/phone-input@1.2.0/index.js';

const phone = createPhoneInput(document.getElementById('phone'), {
  initialCountry: 'sa',
  locale: 'ar',
  preferredCountries: ['sa', 'ae', 'qa', 'kw', 'bh', 'om', 'eg'],
  strings: { searchPlaceholder: 'ابحث عن دولة أو رمز', noResults: 'لا توجد نتائج', dialogLabel: 'اختر الدولة' },
});
phone.input.addEventListener('dx:phonechange', (e) => (document.getElementById('value').textContent = e.detail.e164 ?? ''));

@import url('https://devix.pk/cdn/oss/phone-input@1.2.0/phone-input.min.css');