phone-number-input-field
Version:
HTML input component that formats and validates phone numbers.
3 lines (2 loc) • 9.75 kB
JavaScript
!function(n){"use strict";var r={},o=[],id=n=>n,i=o.map,s=Array.isArray,a="undefined"!=typeof requestAnimationFrame?requestAnimationFrame:setTimeout,createClass=n=>{var r="";if("string"==typeof n)return n;if(s(n))for(var o,i=0;i<n.length;i++)(o=createClass(n[i]))&&(r+=(r&&" ")+o);else for(var i in n)n[i]&&(r+=(r&&" ")+i);return r},shouldRestart=(n,r)=>{for(var o in{...n,...r})if("function"==typeof(s(n[o])?n[o][0]:n[o]))r[o]=n[o];else if(n[o]!==r[o])return!0},getKey=n=>null==n?n:n.key,patchProperty=(n,r,o,i,s,a)=>{if("style"===r)for(var u in{...o,...i})o=null==i||null==i[u]?"":i[u],"-"===u[0]?n[r].setProperty(u,o):n[r][u]=o;else"o"===r[0]&&"n"===r[1]?((n.events||(n.events={}))[r=r.slice(2)]=i)?o||n.addEventListener(r,s):n.removeEventListener(r,s):!a&&"list"!==r&&"form"!==r&&r in n?n[r]=null==i?"":i:null==i||!1===i?n.removeAttribute(r):n.setAttribute(r,i)},createNode=(n,r,o)=>{var i=n.props,s=3===n.type?document.createTextNode(n.tag):(o=o||"svg"===n.tag)?document.createElementNS("http://www.w3.org/2000/svg",n.tag,i.is&&i):document.createElement(n.tag,i.is&&i);for(var a in i)patchProperty(s,a,null,i[a],r,o);for(var u=0;u<n.children.length;u++)s.appendChild(createNode(n.children[u]=maybeVNode(n.children[u]),r,o));return n.node=s},patch=(n,r,o,i,s,a)=>{if(o===i);else if(null!=o&&3===o.type&&3===i.type)o.tag!==i.tag&&(r.nodeValue=i.tag);else if(null==o||o.tag!==i.tag)r=n.insertBefore(createNode(i=maybeVNode(i),s,a),r),null!=o&&n.removeChild(o.node);else{var u,l,c,p,f=o.props,d=i.props,m=o.children,v=i.children,y=0,g=0,b=m.length-1,E=v.length-1;for(var N in a=a||"svg"===i.tag,{...f,...d})("value"===N||"selected"===N||"checked"===N?r[N]:f[N])!==d[N]&&patchProperty(r,N,f[N],d[N],s,a);for(;g<=E&&y<=b&&null!=(c=getKey(m[y]))&&c===getKey(v[g]);)patch(r,m[y].node,m[y],v[g]=maybeVNode(v[g++],m[y++]),s,a);for(;g<=E&&y<=b&&null!=(c=getKey(m[b]))&&c===getKey(v[E]);)patch(r,m[b].node,m[b],v[E]=maybeVNode(v[E--],m[b--]),s,a);if(y>b)for(;g<=E;)r.insertBefore(createNode(v[g]=maybeVNode(v[g++]),s,a),(l=m[y])&&l.node);else if(g>E)for(;y<=b;)r.removeChild(m[y++].node);else{var C={},w={};for(N=y;N<=b;N++)null!=(c=m[N].key)&&(C[c]=m[N]);for(;g<=E;)c=getKey(l=m[y]),p=getKey(v[g]=maybeVNode(v[g],l)),w[c]||null!=p&&p===getKey(m[y+1])?(null==c&&r.removeChild(l.node),y++):null==p||1===o.type?(null==c&&(patch(r,l&&l.node,l,v[g],s,a),g++),y++):(c===p?(patch(r,l.node,l,v[g],s,a),w[p]=!0,y++):null!=(u=C[p])?(patch(r,r.insertBefore(u.node,l&&l.node),u,v[g],s,a),w[p]=!0):patch(r,l&&l.node,null,v[g],s,a),g++);for(;y<=b;)null==getKey(l=m[y++])&&r.removeChild(l.node);for(var N in C)null==w[N]&&r.removeChild(C[N].node)}}return i.node=r},maybeVNode=(n,r)=>!0!==n&&!1!==n&&n?"function"==typeof n.tag?((!r||null==r.memo||((n,r)=>{for(var o in n)if(n[o]!==r[o])return!0;for(var o in r)if(n[o]!==r[o])return!0})(r.memo,n.memo))&&((r=n.tag(n.memo)).memo=n.memo),r):n:text(""),recycleNode=n=>3===n.nodeType?text(n.nodeValue,n):createVNode(n.nodeName.toLowerCase(),r,i.call(n.childNodes,recycleNode),1,n),createVNode=(n,{key:r,...o},i,s,a)=>({tag:n,props:o,key:r,children:i,type:s,node:a}),text=(n,i)=>createVNode(n,r,o,3,i);function dispatchEventEffect(n,{eventType:r,eventInit:o}){const i=new CustomEvent(r,o);this.dispatchEvent(i)}function setOnEventListenerEffect(n,{eventType:r,oldVal:o,newVal:i}){null!==o&&this.removeEventListener(r,o),null!==i&&this.addEventListener(r,i)}function eventSubscriber(n,{target:r,eventType:o,action:i}){return(r=r||window).addEventListener(o,handleEvent),()=>{r.removeEventListener(o,handleEvent)};function handleEvent(r){n([i,r])}}function initNativeProperties(n,r){for(const n in r)this[n]=r[n]}function setValidity(n,{input:r,isValid:o,errorMsg:i}){r.setCustomValidity(o?"":i)}const u=new WeakMap;function debounceEffect(n,{action:r,props:o,interval:i}){!function cancelAction(n){const r=u.get(n);r&&(clearTimeout(r),u.delete(n))}(r);const s=setTimeout(()=>{u.delete(r),n(r,o)},i);u.set(r,s)}const l="phone-parse",c="phone-country-change",p="E.164";function parsePhoneNumber(r,{defaultCountry:o,value:i,action:s}){const a=n.parsePhoneNumberFromString(i,o);r(s,{country:a?.country,phoneIsPossible:a?.isPossible()||!1,phoneIsValid:a?.isValid()||!1,phoneType:a?.getType(),phoneE164:a?.format(p)})}function formatPhoneNumber(r,{defaultCountry:o,input:i}){const s=new n.AsYouType(o).input(i.value);if(i.value!==s){const n=i.selectionStart,r=i.selectionEnd,o=n!==i.value.length;i.value=s,o&&i.setSelectionRange(n,r)}}function createSetValidityEffect({self:n,phoneIsValid:r,errorMsg:o}){return[setValidity,{input:n,isValid:r,errorMsg:o||"Invalid phone number!"}]}const f=function debounce(n,r=250){return function(o,i){return[o,[debounceEffect,{action:n,props:i,interval:r}]]}}((function HandleInput(n,r){return[n,[parsePhoneNumber,{defaultCountry:n.defaultCountry,value:r.target.value,action:UpdatePhoneNumber}]]}),250);function UpdatePhoneNumber(n,r){const o={...n,...r},i=[createSetValidityEffect(o),[formatPhoneNumber,{defaultCountry:o.defaultCountry,input:o.self}],[dispatchEventEffect,{eventType:l}]];return n.country!==o.country&&i.push([dispatchEventEffect,{eventType:c,eventInit:{detail:o.country}}]),[o,...i]}const d=function t({app:n,init:r,view:o,subscriptions:i,dispatch:s,exposedConfig:a=[],exposedMethods:u={},useShadowDOM:l=!0,parent:c=HTMLElement}){const[p,f]=function(){const n=new Map,r=new Map;for(const o of a)o.propName&&n.set(o.propName,o),o.attrName&&r.set(o.attrName.toLowerCase(),o),"function"!=typeof o.setter&&(o.setter=o.eventType?h(o):PatchState);return[n,r]}();class CustomElement extends c{constructor(){super();const a=(l?this.attachShadow({mode:"open"}):this._fragment=document.createDocumentFragment()).appendChild(document.createElement("span")),u=this.wrapDispatch.bind(this);var c,p;"function"==typeof s?(c=u,p=s,s=function(n){return c(p(n))}):s=u,n({init:r,view:o,subscriptions:i,dispatch:s,node:a})}connectedCallback(){l||c!==HTMLElement||this.appendChild(this._fragment)}disconnectedCallback(){this._dispatch(),this._dispatch=void 0,this._fragment=void 0}wrapDispatch(n){const e=n=>{const r=n.bind(this);return n.$isWrapped&&(r.$isWrapped=!0),r};return this._dispatch=n,(r,o)=>{let i;if("function"==typeof r)r=e(r);else if(Array.isArray(r))if("function"==typeof r[0])r[0]=e(r[0]);else{i=r[0];for(let n=1;n<r.length;n++){const o=r[n];Array.isArray(o)?o[0]=e(o[0]):r[n]=e(o)}}else i=r;void 0!==i&&(this._state=i),n(r,o),void 0!==i&&this.syncAttributes()}}dispatchAction(n,r){this._dispatch(n,r)}syncAttributes(){for(const n in this._state)if(p.has(n)){const r=p.get(n);r.attrName&&this.syncAttribute(r,this._state[n])}}syncAttribute(n,r){if(n.eventType)return;const o=n.attrName;"boolean"==typeof r?r?this.setAttribute(o,""):this.removeAttribute(o):null==r||""===r?this.removeAttribute(o):this.setAttribute(o,r)}getProperty(n){return(p.get(n).getter||(r=>r?.[n]))(this._state)}setProperty(n,r){const o=p.get(n).setter;this.dispatchAction(o,{[n]:r})}attributeChangedCallback(n,r,o){if(r===o)return;const i=f.get(n.toLowerCase()),s=i.setter,a=i.propName||i.attrName;(""===o&&null===r||null===o&&""===r||null===o&&r===n||o===n&&null===r)&&(o=!(null===o)),this.dispatchAction(s,{[a]:o})}static get observedAttributes(){return f.keys()}}function PatchState(n,r){return{...n,...r}}function h({propName:n,attrName:r,eventType:o}){return function SetOnEventHandler(i,s){const a=n||r;let u=s[a];u&&"function"!=typeof u&&(u=new Function("event",u),Object.defineProperty(u,"name",{value:a}));const l=i[a];return[{...i,[a]:u},[setOnEventListenerEffect,{eventType:o,oldVal:l,newVal:u}]]}}return p.forEach((n,r)=>{const o={configurable:!1,enumerable:!0,get(){return this.getProperty(r)},set(n){this.setProperty(r,n)}};Object.defineProperty(CustomElement.prototype,r,o)}),function(){for(const n in u)CustomElement.prototype[n]=function(){this.dispatchAction(u[n])}}(),CustomElement}({app:({node:n,view:i,subscriptions:u,dispatch:l=id,init:c=r})=>{var p,f,d=n&&recycleNode(n),m=[],update=n=>{p!==n&&(null==(p=n)&&(l=u=render=id),u&&(m=((n,r=o,i)=>{for(var s,a,u=[],l=0;l<n.length||l<r.length;l++)s=n[l],a=r[l],u.push(a&&!0!==a?!s||a[0]!==s[0]||shouldRestart(a[1],s[1])?[a[0],a[1],(s&&s[2](),a[0](i,a[1]))]:s:s&&s[2]());return u})(m,u(p),l)),i&&!f&&a(render,f=!0))},render=()=>n=patch(n.parentNode,n,d,d=i(p),listener,f=!1),listener=function(n){l(this.events[n.type],n)};return(l=l((n,r)=>"function"==typeof n?l(n(p,r)):s(n)?"function"==typeof n[0]?l(n[0],n[1]):n.slice(1).map(n=>n&&!0!==n&&(n[0]||n)(l,n[1]),update(n[0])):update(n)))(c),l},init:[function InitialiseState(n={}){return[{...n,self:this},[initNativeProperties,{type:"tel"}]]},{}],view:()=>((n,{class:i,...a},u=o)=>createVNode(n,{...a,...i?{class:createClass(i)}:r},s(u)?u:[u]))("span",{}),subscriptions:function subscriptions(n){return[[eventSubscriber,{target:n.self,eventType:"input",action:f}]]},exposedConfig:[{propName:"defaultCountry",attrName:"default-country",setter:function SetDefaultCountry(n,{defaultCountry:r}){const o={...n,defaultCountry:r};return[o,[parsePhoneNumber,{defaultCountry:r,value:o.self.value,action:UpdatePhoneNumber}]]}},{propName:"errorMsg",attrName:"error-msg",setter:function SetErrorMessage(n,{errorMsg:r}){return[{...n,errorMsg:r},createSetValidityEffect(n)]}},{propName:"phoneIsValid",attrName:"phone-is-valid"},{propName:"phoneIsPossible",attrName:"phone-is-possible"},{propName:"country",attrName:"country"},{propName:"phoneType",attrName:"phone-type"},{propName:"phoneE164",attrName:"phone-e164"},{propName:"onparse",attrName:"onparse",eventType:l},{propName:"oncountrychange",attrName:"oncountrychange",eventType:c}],useShadowDOM:!1,parent:HTMLInputElement});customElements.define("phone-number-input",d,{extends:"input"})}(libphonenumber);
//# sourceMappingURL=phone-number-input.min.js.map