smart.phoneinput.js

/* Smart UI v15.2.0 (2023-04-20) 
Copyright (c) 2011-2023 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart("smart-phone-input",class extends Smart.CountryInput{static get properties(){return{nationalMode:{value:!1,type:"boolean"},messages:{value:{en:{Example:"Example: ",IS_POSSIBLE:"Is possible",INVALID_COUNTRY_CODE:"Invalid country code",TOO_SHORT:"Too short",TOO_LONG:"Too long",IS_POSSIBLE_LOCAL_ONLY:"Is possible local only",INVALID_LENGTH:"Invalid length"}}}}}_autoSelectCountry(){const e=this;if((e.$.input.value.indexOf("+")>=0||e.$.input.value.startsWith("00")>=0)&&!e.nationalMode){const t=e.$.input.value.split(" ")[0],a=e.getItemByDialCode(t);a&&e.selectedCountry!==a.countryCode&&(e.selectedCountry=a.countryCode,e.refresh())}}propertyChangedHandler(e,t,a){super.propertyChangedHandler(e,t,a);const n=this;switch(e){case"nationalMode":case"value":n.isValidNumber()?(n.value=n.getNumber(),n.$.input.value=n.value):n.$.input.value="",n._autoSelectCountry(),n.validate();break;case"selectedCountry":n.selectItem(n.selectedCountry)}}template(){return'<div id="inputContainer" role="presentation"><input class="smart-input" id=\'input\' readonly=\'[[readonly]]\' placeholder=\'[[placeholder]]\' type=\'tel\' name=\'[[name]]\' disabled=\'[[disabled]]\' aria-label="[[placeholder]]" /><span class="smart-hidden smart-hint" id="span">[[hint]]</span><div id="dropDownButton" tabindex=-1 class="smart-drop-down-button smart-flag-box" role="button" aria-label="Toggle popup"></div></div>'}render(){const e=this;super.render(),e.readonly=!1,e.dropDownButtonPosition="left";const t=e.value;e.selectItem(e.selectedCountry),t&&(e.$.input.value=t,e._autoSelectCountry(),e.isValidNumber()?(e.value=e.getNumber(),e.$.input.value=t,e.validate()):e.$.input.value="")}_updatePlaceHolder(){const e=this,t=e.getSelectedItem(),a=window.phoneNumberUtils.getExampleNumber(t.value,e.nationalMode,1);e.placeholder=e.hint=a}getSelectedItem(){const e=this,t=e.getAttribute("data-label"),a=e.getAttribute("data-dial-code"),n=e.getAttribute("data-country-code");return{label:t,value:n,iso2:n,dialCode:a}}refresh(){const e=this,t=e.getItem(e.selectedCountry);if(!t)return;e.setAttribute("data-label",t.label),e.setAttribute("data-value",t.value),e.setAttribute("data-dial-code",t.dialCode),e.setAttribute("data-country-code",t.countryCode),e.selectedCountry=t.countryCode,e._updatePlaceHolder();const a='<div class="flag '+t.iso2+'"></div>';e.$.dropDownButton.innerHTML=a,e.$.dropDownButton.title=t.label+" +"+t.dialCode,e.validate()}selectItem(e){const t=this;super.selectItem(e),t.value=t.getNumber(),t.selectedCountry=e,t.refresh(),t.$.input.value=t.value}validate(){const e=this;if(e.isValidNumber()){e.classList.remove("invalid-number");const t=e.getSelectedItem(),a=e.nationalMode,n=window.phoneNumberUtils.getExampleNumber(t.value,a,1);e.setAttribute("title",e.localize("Example")+" "+n)}else{e.classList.add("invalid-number");const t={0:"IS_POSSIBLE",1:"INVALID_COUNTRY_CODE",2:"TOO_SHORT",3:"TOO_LONG",4:"IS_POSSIBLE_LOCAL_ONLY",5:"INVALID_LENGTH"};let a=window.phoneNumberUtils.getValidationError(e.$.input.value,e.selectedCountry);if(-99===a&&(a=5),t[a]){const n=e.localize(t[a]),l=e.getSelectedItem(),o=e.nationalMode,i=window.phoneNumberUtils.getExampleNumber(l.value,o,1);e.setAttribute("title",n+", "+e.localize("Example")+" "+i)}}}_blurHandler(){const e=this;super._blurHandler(),e.isValidNumber()&&(e.value=e.$.input.value=e.getNumber()),e.validate()}getItemByDialCode(e){const t=this;if(t.dataSource){let a=(e=""+e).indexOf("+")>=0?e.substring(1):e;if(e.startsWith("00")&&-1===e.indexOf("+")&&(a=e.substring(2)),"1"===a)return t.getItem("us");for(let e=0;e<t.dataSource.length;e++){const n=t.dataSource[e];if(n.dialCode===a)return n}}return null}getNumber(e){const t=this;if(window.phoneNumberUtils){const a=void 0===e?t.nationalMode:e,{NATIONAL:n,INTERNATIONAL:l}=window.phoneNumberUtils.numberFormat,o=a?n:l;let i=t.$.input.value;if(!a&&i.startsWith("00")){const e=t.getItem(t.selectedCountry).dialCode;i=i.substring(2+e.length).trim()}return window.phoneNumberUtils.formatNumber(i,this.selectedCountry,o)}return""}_performSelect(){const e=this,t=e.$.menu.querySelector(".active"),a=t.getAttribute("data-label"),n=t.dataValue,l=e.$.input.value,o=e.$.input.dataValue;e.$.input.dataValue=n,e.setAttribute("data-value",n),e.set("selectedIndex",t.index),e.set("selectedValues",[e.$.input.dataValue]),e.close();const i=t.querySelector(".smart-flag-box").innerHTML;e.$.dropDownButton.innerHTML=i;const r=t.getAttribute("data-dial-code");e.$.dropDownButton.title=a+" +"+r,a===l&&n===o||(e.$.fireEvent("change",{value:n,label:a,oldValue:o,oldLabel:l}),e._updateTargetValue());const s=t.getAttribute("data-country-code");e.setAttribute("data-label",a),e.setAttribute("data-value",n),e.setAttribute("data-dial-code",r),e.setAttribute("data-country-code",s),e.selectedCountry=s,e.set("value",e.$.input.value),e.nationalMode?e.$.input.value="":e.$.input.value="+"+r,e._updatePlaceHolder(),e.validate()}isValidNumber(){const e=this;let t=e.$.input.value.trim();const a=e.selectedCountry;if(t.startsWith("00")){const n=e.getItem(a).dialCode;t=t.substring(2+n.length)}return window.phoneNumberUtils?window.phoneNumberUtils.isValidNumber(t,a):null}_keyDownHandler(e){const t=this;t._suppressKeyPressRepeat=![40,38,9,13,27,16,17,18].includes(e.keyCode),t.opened&&(e.key.toUpperCase()!==e.key.toLowerCase()||e.key.codePointAt(0)>127)&&(e.preventDefault(),e.stopPropagation()),e.shiftKey||e.altKey||e.ctrlKey||t._move(e)}_keyUpHandler(e){const t=this;if(!e.shiftKey)switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:40===e.keyCode&&e.altKey&&t.open(),38===e.keyCode&&e.altKey&&t.close();break;case 9:case 13:if(!t.opened)return;t._performSelect(),e.stopPropagation(),e.preventDefault();break;case 27:if(!t.opened)return;t.close(),e.stopPropagation(),e.preventDefault();break;default:if(!e.ctrlKey&&!e.altKey&&" "!==e.key){t.validate();const e=t.isValidNumber();t.value=e?t.getNumber():""}" "===e.key&&t._autoSelectCountry(),!t.opened||e.ctrlKey||e.shiftKey||(t._lookup(e),e.stopPropagation(),e.preventDefault())}}_lookup(e){const t=this;if(t.query=t.$.input.value,t._incrementalSearchQuery||(t._incrementalSearchQuery=""),t._incrementalSearchQuery+=e.key,t._incrementalSearchTimer&&clearTimeout(t._incrementalSearchTimer),t.query=t._incrementalSearchQuery,t._incrementalSearchTimer=setTimeout((function(){t._incrementalSearchQuery=""}),700),t.query.length<t.minLength)return void t.close();const a=function(e){clearTimeout(t._autoCompleteTimeout),t._autoCompleteTimeout=setTimeout((()=>{const a=t.context;t.context=t,t._process(e),t.context=a}),t.autoCompleteDelay)};"function"==typeof t.dataSource?t.dataSource(t.query,a):a(t.dataSource)}_render(e){const t=this;let a=0;const n=t.query?null:t.getSelectedItem(),l=e.map((function(e){let l=e,o=e;"object"==typeof e&&(l=e.label,o=void 0!==e.value?e.value:l),l=""+l;const i=document.createElement("li"),r=document.createElement("a");return r.href="#",i.id=t.id+"Item"+Math.floor(65536*(1+Math.random())).toString(16).substring(1),i.setAttribute("data-label",l),i.index=a++,i.dataValue=o,"string"==typeof o?i.setAttribute("value",o):i.setAttribute("value",JSON.stringify(o)),i.setAttribute("role","option"),i.setAttribute("aria-label",l),l='<div class="smart-flag-box"><div class="flag '+e.iso2+'"></div></div><span class="country-name">'+e.label+'</span><span class="dial-code">+'+e.dialCode+"</span>",r.innerHTML=l,r.setAttribute("aria-hidden",!0),i.classList.add("country"),i.setAttribute("data-dial-code",e.dialCode),i.setAttribute("data-country-code",e.iso2),i.appendChild(r),n&&n.value===e.iso2&&(i.classList.add("active"),t._setActiveDescendant(i)),i}));function o(){const e=t.$.menu.getElementsByClassName("active");e[0]&&e[0].classList.remove("active"),this.classList.add("active"),t._setActiveDescendant(this)}l.length>0&&!n&&(l[0].classList.add("active"),t._setActiveDescendant(l[0])),t.$.menu.innerHTML="";for(let e=0;e<l.length;e++){const a=l[e];t.$.menu.appendChild(a),a.onmouseenter=o,a.onmouseleave=function(){this.classList.remove("active"),t._setActiveDescendant(null)},a.onclick=o}}});