@desource/phone-mask-svelte 1.4.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/README.md +2 -0
- package/dist/core.cjs +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @desource/phone-mask-svelte
|
|
2
2
|
|
|
3
|
+
## 1.4.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Core/Vue/React/Svelte/Nuxt Upgrades:
|
|
8
|
+
- Made an internal tooling update
|
|
9
|
+
- Updated development environment dependencies for better stability and security
|
|
10
|
+
|
|
11
|
+
- Updated dependencies []:
|
|
12
|
+
- @desource/phone-mask@1.4.1
|
|
13
|
+
|
|
3
14
|
## 1.4.0
|
|
4
15
|
|
|
5
16
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
> Svelte 5 phone input component with Google's libphonenumber data
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@desource/phone-mask-svelte)
|
|
6
|
+
[](https://codewiki.google/github.com/desource-labs/phone-mask)
|
|
6
7
|
[](https://bundlephobia.com/package/@desource/phone-mask-svelte)
|
|
8
|
+
[](https://context7.com/desource-labs/phone-mask)
|
|
7
9
|
[](https://github.com/DeSource-Labs/phone-mask/blob/main/LICENSE)
|
|
8
10
|
|
|
9
11
|
Beautiful, accessible, extreme small & tree-shakeable Svelte 5 phone input with auto-formatting, country selector, and validation.
|
package/dist/core.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=require(
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=require("@desource/phone-mask");Object.keys(e).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});var t=require("@desource/phone-mask/kit");Object.keys(t).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));require(`svelte/internal/disclose-version`);let c=require(`svelte/internal/client`),l=s(c,1);c=s(c);let u=require(`svelte`),d=require(`@desource/phone-mask/kit`),f=require(`@desource/phone-mask`);function p({country:e,locale:t,detect:n,onCountryChange:r}={}){let i=l.state(l.proxy((0,d.parseCountryCode)(e?.(),`US`))),a=l.derived(()=>t?.()||(0,d.getNavigatorLang)()),o=l.derived(()=>(0,d.getCountry)(l.get(i),l.get(a))),s=e=>{let t=(0,d.parseCountryCode)(e);return t?(l.set(i,t,!0),!0):!1},c=async()=>{s(await(0,d.detectByGeoIp)())||s((0,d.detectCountryFromLocale)())};return l.user_effect(()=>{let t=e?.();t&&t!==l.get(i)&&s(t)}),l.user_effect(()=>{n?.()&&!e?.()&&c()}),l.user_effect(()=>{r?.(l.get(o))}),{get country(){return l.get(o)},get locale(){return l.get(a)},setCountry:s}}function m({country:e,value:t,onChange:n,onPhoneChange:r,onValidationChange:i}){let a=l.derived(()=>(0,d.createPhoneFormatter)(e())),o=l.derived(()=>l.get(a).getMaxDigits()),s=l.derived(()=>(0,d.extractDigits)(t(),l.get(o))),c=l.derived(()=>l.get(a).getPlaceholder()),u=l.derived(()=>l.get(a).formatDisplay(l.get(s))),f=l.derived(()=>l.get(s)?`${e().code}${l.get(s)}`:``),p=l.derived(()=>l.get(u)?`${e().code} ${l.get(u)}`:``),m=l.derived(()=>l.get(a).isComplete(l.get(s))),h=l.derived(()=>l.get(s).length===0),g=l.derived(()=>!l.get(h)&&!l.get(m)),_=l.derived(()=>({full:l.get(f),fullFormatted:l.get(p),digits:l.get(s)}));return l.user_pre_effect(()=>{let e=t(),r=l.get(s);e!==r&&n(r)}),l.user_effect(()=>{r?.(l.get(_))}),l.user_effect(()=>{i?.(l.get(m))}),{get digits(){return l.get(s)},get formatter(){return l.get(a)},get displayPlaceholder(){return l.get(c)},get displayValue(){return l.get(u)},get full(){return l.get(f)},get fullFormatted(){return l.get(p)},get isComplete(){return l.get(m)},get isEmpty(){return l.get(h)},get shouldShowWarn(){return l.get(g)}}}function h(){let e=null,t=()=>{e&&=(clearTimeout(e),null)};return(0,u.onDestroy)(t),{set:(n,r)=>{t(),e=setTimeout(n,r)},clear:t}}function g(){let e=l.state(!1),t=h();return{get showValidationHint(){return l.get(e)},clearValidationHint:(n=!0)=>{n&&l.set(e,!1),t.clear()},scheduleValidationHint:n=>{l.set(e,!1),t.set(()=>{l.set(e,!0)},n)}}}var _=500,v=300;function y(e){let{formatter:t,digits:n,inactive:r,onChange:i,scheduleValidationHint:a}=e,o=(e,n)=>{(0,u.tick)().then(()=>{e&&(0,d.setCaret)(e,t().getCaretPosition(n))})};return{handleBeforeInput:e=>{(0,d.processBeforeInput)(e)},handleInput:e=>{if(r?.())return;let n=(0,d.processInput)(e,{formatter:t()});n&&(i?.(n.newDigits),o(e.target,n.caretDigitIndex),a?.(_))},handleKeydown:e=>{if(r?.())return;let s=(0,d.processKeydown)(e,{digits:n(),formatter:t()});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(v))},handlePaste:e=>{if(r?.())return;let s=(0,d.processPaste)(e,{digits:n(),formatter:t()});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(v))}}}function b({rootRef:e,dropdownRef:t,searchRef:n,selectorRef:r,locale:i,countryOption:a,inactive:o,onSelectCountry:s,onAfterSelect:c}){let p=l.state(``),m=l.state(!1),h=l.state(0),g=!1,_=l.derived(()=>(0,f.MasksFull)(i())),v=l.derived(()=>(0,d.filterCountries)(l.get(_),l.get(p))),y=l.derived(()=>!a?.()&&l.get(_).length>1),b=e=>{l.set(h,typeof e==`function`?e(l.get(h)):e,!0)},x=()=>{(0,u.tick)().then(()=>n()?.focus({preventScroll:!0}))},S=()=>{l.set(p,``),b(0),g=!1},C=()=>{(0,d.positionCountryDropdown)(e(),t())},w=()=>{l.set(m,!1),S()},T=()=>{if(o?.()||!l.get(y)||l.get(m))return;let e=t(),n=r();!e||!n||(C(),b(0),l.set(m,!0))},ee=()=>{o?.()||!l.get(y)||(l.get(m)?w():T())},E=e=>{s(e),w(),c?.()},te=e=>{l.set(p,e.target.value,!0),b(0)},ne=e=>{(0,u.tick)().then(()=>(0,d.scrollCountryOptionIntoView)(t(),e))};return l.user_effect(()=>{(o?.()||!l.get(y))&&l.get(m)&&w()}),l.user_effect(()=>{if(l.get(m))return C(),g&&x(),(0,d.bindCountryDropdownListeners)(()=>t(),()=>r(),w,C)}),{get dropdownOpen(){return l.get(m)},get search(){return l.get(p)},get focusedIndex(){return l.get(h)},get filteredCountries(){return l.get(v)},get hasDropdown(){return l.get(y)},openDropdown:T,closeDropdown:w,toggleDropdown:ee,selectCountry:E,setFocusedIndex:b,handleSearchChange:te,handleSearchKeydown:e=>{(0,d.handleCountrySearchKeydown)(e,l.get(h),l.get(v),b,ne,e=>E(e.id))},handleSelectorPointerDown:e=>{g=e.pointerType===`mouse`},handleSelectorKeydown:e=>{(0,d.handleCountryButtonKeydown)(e,l.get(m),()=>{g=!0},x,T)}}}function x(e=1800){let t=l.state(!1),n=l.state(!1),r=h();return{get copied(){return l.get(t)},get isCopying(){return l.get(n)},copy:async i=>{if(l.get(n))return!1;let a=i.trim();if(!a)return!1;l.set(n,!0);try{return await navigator.clipboard.writeText(a),l.set(t,!0),r.set(()=>{l.set(t,!1)},e),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{l.set(n,!1)}}}}var S=1800;function C({liveRef:e,fullFormatted:t,onCopy:n}){let r=h(),i=x(S),a=l.derived(()=>i.copied?`Copied`:`Copy ${t()}`),o=l.derived(()=>i.copied?`Copied`:`Copy phone number`),s=t=>{let n=e?.();n&&(n.textContent=t,r.set(()=>{let t=e?.();t&&(t.textContent=``)},S))};return{get copied(){return i.copied},get copyAriaLabel(){return l.get(a)},get copyButtonTitle(){return l.get(o)},onCopyClick:async()=>{let e=t().trim();await i.copy(e)&&(n?.(e),s(`Phone number copied to clipboard`))}}}function w({theme:e}){let t=l.state(!1),n=l.derived(()=>(()=>{let n=e();return n===`auto`?l.get(t)?`theme-dark`:`theme-light`:`theme-${n}`})());return l.user_effect(()=>{let e=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null;if(!e)return;l.set(t,e.matches,!0);let n=e=>{l.set(t,e.matches,!0)};return e.addEventListener(`change`,n),()=>e.removeEventListener(`change`,n)}),{get themeClass(){return l.get(n)}}}var T=c.from_svg(`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`),ee=c.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z" fill="currentColor"></path></svg>`),E=c.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z" fill="currentColor"></path></svg>`),te=c.from_html(`<button type="button"><!></button>`),ne=c.from_svg(`<svg width="11" height="11" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="currentColor"></path></svg>`),re=c.from_html(`<button type="button" class="pi-btn pi-btn-clear"><!></button>`),ie=c.from_html(`<li role="option"><span class="pi-flag" role="img"><!></span> <span class="pi-opt-name"> </span> <span class="pi-opt-code"> </span></li>`),ae=c.from_html(`<li class="pi-empty"> </li>`),oe=c.from_html(`<div class="pi-search-wrap"><input name="search" type="search" class="pi-search" aria-label="Search"/></div> <ul class="pi-options" role="listbox" tabindex="-1"></ul>`,1),se=c.from_html(`<div role="dialog" aria-modal="false" aria-label="Country"><!></div>`),ce=c.from_html(`<div><div class="pi-selector"><button type="button"><span class="pi-flag" role="img"><!></span> <span class="pi-code"> </span> <!></button></div> <div class="pi-input-wrap"><input type="tel" inputmode="tel" autocomplete="tel-national" autocorrect="off" autocapitalize="off" spellcheck="false" class="pi-input"/> <div class="pi-actions" role="toolbar" aria-label="Phone input actions"><!> <!> <!></div></div></div> <!> <div class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>`,1);function le(e,t){c.push(t,!0);let n=c.prop(t,`value`,15,``),r=c.prop(t,`detect`,3,!0),i=c.prop(t,`size`,3,`normal`),a=c.prop(t,`theme`,3,`auto`),o=c.prop(t,`disabled`,3,!1),s=c.prop(t,`readonly`,3,!1),l=c.prop(t,`showCopy`,3,!0),d=c.prop(t,`showClear`,3,!1),f=c.prop(t,`withValidity`,3,!0),h=c.prop(t,`searchPlaceholder`,3,`Search country or code...`),_=c.prop(t,`noResultsText`,3,`No countries found`),v=c.prop(t,`clearButtonLabel`,3,`Clear phone number`),x=c.prop(t,`dropdownClass`,3,``),S=c.prop(t,`disableDefaultStyles`,3,!1),le=c.rest_props(t,`$$slots.$$events.$$legacy.value.id.name.country.detect.locale.size.theme.disabled.readonly.showCopy.showClear.withValidity.searchPlaceholder.noResultsText.clearButtonLabel.dropdownClass.disableDefaultStyles.onchange.oncountrychange.onvalidationchange.onfocus.onblur.oncopy.onclear.flag.copysvg.clearsvg.actionsbefore.class`.split(`.`)),D=c.state(null),O=c.state(null),k=c.state(null),A=c.state(null),j=c.state(null),M=c.state(null),N=p({country:()=>t.country,locale:()=>t.locale,detect:()=>r(),onCountryChange:(...e)=>t.oncountrychange?.(...e)}),P=m({country:()=>N.country,value:()=>n(),onChange:e=>n(e),onPhoneChange:(...e)=>t.onchange?.(...e),onValidationChange:(...e)=>t.onvalidationchange?.(...e)}),F=g(),I=c.derived(()=>o()||s()),L=c.derived(()=>F.showValidationHint&&P.shouldShowWarn),ue=c.derived(()=>l()&&!P.isEmpty&&!o()),de=c.derived(()=>d()&&!P.isEmpty&&!c.get(I)),R=C({liveRef:()=>c.get(k),fullFormatted:()=>P.fullFormatted,onCopy:(...e)=>t.oncopy?.(...e)}),z=()=>(0,u.tick)().then(()=>c.get(O)?.focus()),B=b({rootRef:()=>c.get(D),dropdownRef:()=>c.get(A),searchRef:()=>c.get(j),selectorRef:()=>c.get(M),locale:()=>N.locale,countryOption:()=>t.country,inactive:()=>c.get(I),onSelectCountry:N.setCountry,onAfterSelect:z}),V=c.state(`0`);(0,u.onMount)(()=>{c.set(V,Math.random().toString(36).slice(2,10),!0)});let H=c.derived(()=>`pi-options-${c.get(V)}`),U=c.derived(()=>`pi-dropdown-${c.get(V)}`),W=e=>`pi-option-${c.get(V)}-${e}`,fe=c.derived(()=>B.dropdownOpen&&B.filteredCountries[B.focusedIndex]?W(B.focusedIndex):void 0),G=y({formatter:()=>P.formatter,digits:()=>P.digits,inactive:()=>c.get(I),onChange:e=>n(e),scheduleValidationHint:F.scheduleValidationHint}),pe=e=>{F.clearValidationHint(!1),B.closeDropdown(),t.onfocus?.(e)},me=e=>t.onblur?.(e);function he(){z()}function ge(){c.get(O)?.blur()}function _e(){n(``),F.clearValidationHint(),t.onclear?.()}function ve(e){N.setCountry(e)}function ye(){return P.full}function be(){return P.fullFormatted}function xe(){return P.digits}function Se(){return P.isComplete}function Ce(){return P.isComplete}let we=()=>{_e(),z()},Te=w({theme:()=>a()}),Ee=c.derived(()=>[`phone-input`,`size-${i()}`,Te.themeClass,o()&&`is-disabled`,s()&&`is-readonly`,S()&&`is-unstyled`,f()&&c.get(L)&&`is-incomplete`,f()&&P.isComplete&&`is-complete`,t.class].filter(Boolean).join(` `)),De=c.derived(()=>+c.get(ue)+ +c.get(de)+ +!!t.actionsbefore),K=c.derived(()=>B.hasDropdown&&!c.get(I)),Oe=c.derived(()=>B.hasDropdown&&(!c.get(I)||B.dropdownOpen)),ke=e=>(document.body.appendChild(e),{destroy:()=>e.remove()});var Ae={focus:he,blur:ge,clear:_e,selectCountry:ve,getFullNumber:ye,getFullFormattedNumber:be,getDigits:xe,isValid:Se,isComplete:Ce},je=ce(),q=c.first_child(je);c.attribute_effect(q,()=>({class:c.get(Ee),...le,role:`group`,"aria-label":`Phone input`,[c.STYLE]:{"--pi-actions-count":c.get(De)}}));var J=c.child(q),Y=c.child(J);let Me;var X=c.child(Y),Ne=c.child(X),Pe=e=>{var n=c.comment(),r=c.first_child(n);c.snippet(r,()=>t.flag,()=>N.country),c.append(e,n)},Fe=e=>{var t=c.text();c.template_effect(()=>c.set_text(t,N.country.flag)),c.append(e,t)};c.if(Ne,e=>{t.flag?e(Pe):e(Fe,-1)}),c.reset(X);var Z=c.sibling(X,2),Ie=c.child(Z,!0);c.reset(Z);var Le=c.sibling(Z,2),Re=e=>{var t=T();let n;c.template_effect(()=>n=c.set_class(t,0,`pi-chevron`,null,n,{"is-open":B.dropdownOpen})),c.append(e,t)};c.if(Le,e=>{c.get(K)&&e(Re)}),c.reset(Y),c.bind_this(Y,e=>c.set(M,e),()=>c.get(M)),c.reset(J);var ze=c.sibling(J,2),Q=c.child(ze);c.remove_input_defaults(Q),c.bind_this(Q,e=>c.set(O,e),()=>c.get(O));var Be=c.sibling(Q,2),Ve=c.child(Be),He=e=>{var n=c.comment(),r=c.first_child(n);c.snippet(r,()=>t.actionsbefore),c.append(e,n)};c.if(Ve,e=>{t.actionsbefore&&e(He)});var Ue=c.sibling(Ve,2),We=e=>{var n=te();let r;var i=c.child(n),a=e=>{var n=c.comment(),r=c.first_child(n);c.snippet(r,()=>t.copysvg,()=>R.copied),c.append(e,n)},o=e=>{var t=ee();c.append(e,t)},s=e=>{var t=E();c.append(e,t)};c.if(i,e=>{t.copysvg?e(a):R.copied?e(o,1):e(s,-1)}),c.reset(n),c.template_effect(()=>{r=c.set_class(n,1,`pi-btn pi-btn-copy`,null,r,{"is-copied":R.copied}),c.set_attribute(n,`aria-label`,R.copyAriaLabel),c.set_attribute(n,`title`,R.copyButtonTitle)}),c.delegated(`click`,n,function(...e){R.onCopyClick?.apply(this,e)}),c.append(e,n)};c.if(Ue,e=>{c.get(ue)&&e(We)});var Ge=c.sibling(Ue,2),Ke=e=>{var n=re(),r=c.child(n),i=e=>{var n=c.comment(),r=c.first_child(n);c.snippet(r,()=>t.clearsvg),c.append(e,n)},a=e=>{var t=ne();c.append(e,t)};c.if(r,e=>{t.clearsvg?e(i):e(a,-1)}),c.reset(n),c.template_effect(()=>{c.set_attribute(n,`aria-label`,v()),c.set_attribute(n,`title`,v())}),c.delegated(`click`,n,we),c.append(e,n)};c.if(Ge,e=>{c.get(de)&&e(Ke)}),c.reset(Be),c.reset(ze),c.reset(q),c.bind_this(q,e=>c.set(D,e),()=>c.get(D));var $=c.sibling(q,2),qe=e=>{var n=se();let r;var i=c.child(n),a=e=>{var n=oe(),r=c.first_child(n),i=c.child(r);c.remove_input_defaults(i),c.bind_this(i,e=>c.set(j,e),()=>c.get(j)),c.reset(r);var a=c.sibling(r,2);c.each(a,23,()=>B.filteredCountries,e=>e.id,(e,n,r)=>{var i=ie();let a;var o=c.child(i),s=c.child(o),l=e=>{var r=c.comment(),i=c.first_child(r);c.snippet(i,()=>t.flag,()=>c.get(n)),c.append(e,r)},u=e=>{var t=c.text();c.template_effect(()=>c.set_text(t,c.get(n).flag)),c.append(e,t)};c.if(s,e=>{t.flag?e(l):e(u,-1)}),c.reset(o);var d=c.sibling(o,2),f=c.child(d,!0);c.reset(d);var p=c.sibling(d,2),m=c.child(p,!0);c.reset(p),c.reset(i),c.template_effect(e=>{c.set_attribute(i,`id`,e),a=c.set_class(i,1,`pi-option`,null,a,{"is-focused":c.get(r)===B.focusedIndex,"is-selected":c.get(n).id===N.country.id}),c.set_attribute(i,`aria-selected`,c.get(n).id===N.country.id),c.set_attribute(i,`title`,c.get(n).name),c.set_attribute(o,`aria-label`,`${c.get(n).name??``} flag`),c.set_text(f,c.get(n).name),c.set_text(m,c.get(n).code)},[()=>W(c.get(r))]),c.delegated(`click`,i,()=>B.selectCountry(c.get(n).id)),c.event(`mouseenter`,i,()=>B.setFocusedIndex(c.get(r))),c.append(e,i)},e=>{var t=ae(),n=c.child(t,!0);c.reset(t),c.template_effect(()=>c.set_text(n,_())),c.append(e,t)}),c.reset(a),c.template_effect(()=>{c.set_attribute(i,`placeholder`,h()),c.set_attribute(i,`aria-controls`,c.get(H)),c.set_attribute(i,`aria-activedescendant`,c.get(fe)),c.set_value(i,B.search),c.set_attribute(a,`id`,c.get(H))}),c.delegated(`keydown`,i,function(...e){B.handleSearchKeydown?.apply(this,e)}),c.delegated(`input`,i,function(...e){B.handleSearchChange?.apply(this,e)}),c.append(e,n)};c.if(i,e=>{B.dropdownOpen&&e(a)}),c.reset(n),c.bind_this(n,e=>c.set(A,e),()=>c.get(A)),c.action(n,e=>ke?.(e)),c.template_effect(()=>{c.set_attribute(n,`id`,c.get(U)),r=c.set_class(n,1,`phone-dropdown ${x()??``} ${Te.themeClass??``}`,null,r,{"is-open":B.dropdownOpen})}),c.append(e,n)};c.if($,e=>{c.get(Oe)&&e(qe)});var Je=c.sibling($,2);return c.bind_this(Je,e=>c.set(k,e),()=>c.get(k)),c.template_effect(()=>{Me=c.set_class(Y,1,`pi-selector-btn`,null,Me,{"no-dropdown":!c.get(K)}),Y.disabled=o(),c.set_attribute(Y,`tabindex`,c.get(K)?void 0:-1),c.set_attribute(Y,`aria-label`,`Selected country: ${N.country.name??``}`),c.set_attribute(Y,`aria-expanded`,c.get(K)&&B.dropdownOpen),c.set_attribute(Y,`aria-haspopup`,c.get(K)?`dialog`:void 0),c.set_attribute(Y,`aria-controls`,c.get(K)?c.get(U):void 0),c.set_attribute(X,`aria-label`,`${N.country.name??``} flag`),c.set_text(Ie,N.country.code),c.set_attribute(Q,`id`,t.id),c.set_attribute(Q,`name`,t.name),c.set_attribute(Q,`placeholder`,P.displayPlaceholder),c.set_value(Q,P.displayValue),Q.disabled=o(),Q.readOnly=s(),c.set_attribute(Q,`aria-invalid`,c.get(L))}),c.delegated(`pointerdown`,Y,function(...e){B.handleSelectorPointerDown?.apply(this,e)}),c.delegated(`keydown`,Y,function(...e){B.handleSelectorKeydown?.apply(this,e)}),c.delegated(`click`,Y,function(...e){B.toggleDropdown?.apply(this,e)}),c.delegated(`beforeinput`,Q,function(...e){G.handleBeforeInput?.apply(this,e)}),c.delegated(`input`,Q,function(...e){G.handleInput?.apply(this,e)}),c.delegated(`keydown`,Q,function(...e){G.handleKeydown?.apply(this,e)}),c.event(`paste`,Q,function(...e){G.handlePaste?.apply(this,e)}),c.event(`focus`,Q,pe),c.event(`blur`,Q,me),c.append(e,je),c.pop(Ae)}c.delegate([`pointerdown`,`keydown`,`click`,`beforeinput`,`input`]);function D(e){let t=l.state(null),n=p({country:e.country,locale:e.locale,detect:e.detect,onCountryChange:e.onCountryChange}),r=m({country:()=>n.country,value:e.value,onChange:e.onChange,onPhoneChange:e.onPhoneChange}),{handleBeforeInput:i,handleInput:a,handleKeydown:o,handlePaste:s}=y({formatter:()=>r.formatter,digits:()=>r.digits,onChange:e.onChange});return l.user_effect(()=>{let e=l.get(t);if(e)return e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.addEventListener(`beforeinput`,i),e.addEventListener(`input`,a),e.addEventListener(`keydown`,o),e.addEventListener(`paste`,s),()=>{e.removeEventListener(`beforeinput`,i),e.removeEventListener(`input`,a),e.removeEventListener(`keydown`,o),e.removeEventListener(`paste`,s)}}),l.user_effect(()=>{let e=l.get(t);e&&(e.value=r.displayValue,e.setAttribute(`placeholder`,r.displayPlaceholder))}),{get inputRef(){return l.get(t)},set inputRef(e){l.set(t,e,!0)},get digits(){return r.digits},get formatter(){return r.formatter},get full(){return r.full},get fullFormatted(){return r.fullFormatted},get isComplete(){return r.isComplete},get isEmpty(){return r.isEmpty},get shouldShowWarn(){return r.shouldShowWarn},get country(){return n.country},get locale(){return n.locale},setCountry:n.setCountry,clear:()=>{e.onChange(``)}}}function O(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function k(e){return t=>{if(t.tagName!==`INPUT`){console.warn(`[phoneMaskAttachment] Attachment can only be used on input elements`);return}let n=O(e),r=l.effect_root(()=>{let e=l.state(l.proxy(t.value||``)),r=D({country:()=>n.country,locale:()=>n.locale,detect:()=>n.detect,value:()=>l.get(e),onChange:t=>{l.set(e,t,!0)},onPhoneChange:n.onChange,onCountryChange:n.onCountryChange});r.inputRef=t,t.__phoneMaskState={get country(){return r.country},get formatter(){return r.formatter},get digits(){return r.digits},get locale(){return r.locale},options:n,setCountry:e=>r.setCountry(e)}});return()=>{r(),delete t.__phoneMaskState}}}function A(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function j(e,t,n){if(t.digits=n,e.value=t.formatter.formatDisplay(t.digits),t.options.onChange){let n=e.value?`${t.country.code} ${e.value}`:``,r=t.digits?`${t.country.code}${t.digits}`:``;t.options.onChange({full:r,fullFormatted:n,digits:t.digits})}}function M(e,t){let n=t.formatter.getMaxDigits(),r=(0,d.extractDigits)(e.value,n),i=t.formatter.formatDisplay(r);(r!==t.digits||e.value!==i)&&j(e,t,r)}function N(e){let t=e.country.id,n=(0,d.parseCountryCode)(e.options.country);n&&n!==t&&e.setCountry(n)}function P(e,t,n){return r=>{let i=n(r,t);i&&(j(e,t,i.newDigits),Promise.resolve().then(()=>{(0,d.setCaret)(e,t.formatter.getCaretPosition(i.caretDigitIndex))}))}}async function F(e){let t=(0,d.parseCountryCode)(e.country);if(t)return t;if(e.detect){let e=(0,d.parseCountryCode)(await(0,d.detectByGeoIp)());if(e)return e;let t=(0,d.parseCountryCode)((0,d.detectCountryFromLocale)());if(t)return t}return`US`}function I(e,t){if(e.tagName!==`INPUT`)return console.warn(`[phoneMaskAction] Action can only be used on input elements`),{update(){},destroy(){}};e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.setAttribute(`placeholder`,``);let n=A(t),r=n.locale||(0,d.getNavigatorLang)(),i=(0,d.getCountry)((0,d.parseCountryCode)(n.country,`US`),r),a={country:i,formatter:(0,d.createPhoneFormatter)(i),digits:``,locale:r,options:n,setCountry(t){let n=(0,d.parseCountryCode)(t);if(!n)return!1;let r=(0,d.getCountry)(n,this.locale);return this.country=r,this.options.onCountryChange?.(r),this.formatter=(0,d.createPhoneFormatter)(r),e.placeholder=this.formatter.getPlaceholder(),M(e,this),!0}};e.__phoneMaskState=a;let o=P(e,a,d.processInput),s=P(e,a,d.processKeydown),c=P(e,a,d.processPaste);return e.addEventListener(`beforeinput`,d.processBeforeInput),e.addEventListener(`input`,o),e.addEventListener(`keydown`,s),e.addEventListener(`paste`,c),F(n).then(t=>{e.__phoneMaskState===a&&a.setCountry(t)}),{update(t){a.options=A(t),N(a),M(e,a)},destroy(){e.removeEventListener(`beforeinput`,d.processBeforeInput),e.removeEventListener(`input`,o),e.removeEventListener(`keydown`,s),e.removeEventListener(`paste`,c),delete e.__phoneMaskState}}}var L=le;exports.PhoneInput=L,exports.phoneMaskAction=I,exports.phoneMaskAttachment=k,exports.usePhoneMask=D;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));require("svelte/internal/disclose-version");let c=require("svelte/internal/client"),l=s(c,1);c=s(c);let u=require("svelte"),d=require("@desource/phone-mask/kit"),f=require("@desource/phone-mask");function p({country:e,locale:t,detect:n,onCountryChange:r}={}){let i=l.state(l.proxy((0,d.parseCountryCode)(e?.(),`US`))),a=l.derived(()=>t?.()||(0,d.getNavigatorLang)()),o=l.derived(()=>(0,d.getCountry)(l.get(i),l.get(a))),s=e=>{let t=(0,d.parseCountryCode)(e);return t?(l.set(i,t,!0),!0):!1},c=async()=>{s(await(0,d.detectByGeoIp)())||s((0,d.detectCountryFromLocale)())};return l.user_effect(()=>{let t=e?.();t&&t!==l.get(i)&&s(t)}),l.user_effect(()=>{n?.()&&!e?.()&&c()}),l.user_effect(()=>{r?.(l.get(o))}),{get country(){return l.get(o)},get locale(){return l.get(a)},setCountry:s}}function m({country:e,value:t,onChange:n,onPhoneChange:r,onValidationChange:i}){let a=l.derived(()=>(0,d.createPhoneFormatter)(e())),o=l.derived(()=>l.get(a).getMaxDigits()),s=l.derived(()=>(0,d.extractDigits)(t(),l.get(o))),c=l.derived(()=>l.get(a).getPlaceholder()),u=l.derived(()=>l.get(a).formatDisplay(l.get(s))),f=l.derived(()=>l.get(s)?`${e().code}${l.get(s)}`:``),p=l.derived(()=>l.get(u)?`${e().code} ${l.get(u)}`:``),m=l.derived(()=>l.get(a).isComplete(l.get(s))),h=l.derived(()=>l.get(s).length===0),g=l.derived(()=>!l.get(h)&&!l.get(m)),_=l.derived(()=>({full:l.get(f),fullFormatted:l.get(p),digits:l.get(s)}));return l.user_pre_effect(()=>{let e=t(),r=l.get(s);e!==r&&n(r)}),l.user_effect(()=>{r?.(l.get(_))}),l.user_effect(()=>{i?.(l.get(m))}),{get digits(){return l.get(s)},get formatter(){return l.get(a)},get displayPlaceholder(){return l.get(c)},get displayValue(){return l.get(u)},get full(){return l.get(f)},get fullFormatted(){return l.get(p)},get isComplete(){return l.get(m)},get isEmpty(){return l.get(h)},get shouldShowWarn(){return l.get(g)}}}function h(){let e=null,t=()=>{e&&=(clearTimeout(e),null)};return(0,u.onDestroy)(t),{set:(n,r)=>{t(),e=setTimeout(n,r)},clear:t}}function g(){let e=l.state(!1),t=h();return{get showValidationHint(){return l.get(e)},clearValidationHint:(n=!0)=>{n&&l.set(e,!1),t.clear()},scheduleValidationHint:n=>{l.set(e,!1),t.set(()=>{l.set(e,!0)},n)}}}var _=500,v=300;function y(e){let{formatter:t,digits:n,inactive:r,onChange:i,scheduleValidationHint:a}=e,o=(e,n)=>{(0,u.tick)().then(()=>{e&&(0,d.setCaret)(e,t().getCaretPosition(n))})};return{handleBeforeInput:e=>{(0,d.processBeforeInput)(e)},handleInput:e=>{if(r?.())return;let n=(0,d.processInput)(e,{formatter:t()});n&&(i?.(n.newDigits),o(e.target,n.caretDigitIndex),a?.(_))},handleKeydown:e=>{if(r?.())return;let s=(0,d.processKeydown)(e,{digits:n(),formatter:t()});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(v))},handlePaste:e=>{if(r?.())return;let s=(0,d.processPaste)(e,{digits:n(),formatter:t()});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(v))}}}function b({rootRef:e,dropdownRef:t,searchRef:n,selectorRef:r,locale:i,countryOption:a,inactive:o,onSelectCountry:s,onAfterSelect:c}){let p=l.state(``),m=l.state(!1),h=l.state(0),g=!1,_=l.derived(()=>(0,f.MasksFull)(i())),v=l.derived(()=>(0,d.filterCountries)(l.get(_),l.get(p))),y=l.derived(()=>!a?.()&&l.get(_).length>1),b=e=>{l.set(h,typeof e==`function`?e(l.get(h)):e,!0)},x=()=>{(0,u.tick)().then(()=>n()?.focus({preventScroll:!0}))},S=()=>{l.set(p,``),b(0),g=!1},C=()=>{(0,d.positionCountryDropdown)(e(),t())},w=()=>{l.set(m,!1),S()},T=()=>{if(o?.()||!l.get(y)||l.get(m))return;let e=t(),n=r();!e||!n||(C(),b(0),l.set(m,!0))},ee=()=>{o?.()||!l.get(y)||(l.get(m)?w():T())},E=e=>{s(e),w(),c?.()},te=e=>{l.set(p,e.target.value,!0),b(0)},ne=e=>{(0,u.tick)().then(()=>(0,d.scrollCountryOptionIntoView)(t(),e))};return l.user_effect(()=>{(o?.()||!l.get(y))&&l.get(m)&&w()}),l.user_effect(()=>{if(l.get(m))return C(),g&&x(),(0,d.bindCountryDropdownListeners)(()=>t(),()=>r(),w,C)}),{get dropdownOpen(){return l.get(m)},get search(){return l.get(p)},get focusedIndex(){return l.get(h)},get filteredCountries(){return l.get(v)},get hasDropdown(){return l.get(y)},openDropdown:T,closeDropdown:w,toggleDropdown:ee,selectCountry:E,setFocusedIndex:b,handleSearchChange:te,handleSearchKeydown:e=>{(0,d.handleCountrySearchKeydown)(e,l.get(h),l.get(v),b,ne,e=>E(e.id))},handleSelectorPointerDown:e=>{g=e.pointerType===`mouse`},handleSelectorKeydown:e=>{(0,d.handleCountryButtonKeydown)(e,l.get(m),()=>{g=!0},x,T)}}}function x(e=1800){let t=l.state(!1),n=l.state(!1),r=h();return{get copied(){return l.get(t)},get isCopying(){return l.get(n)},copy:async i=>{if(l.get(n))return!1;let a=i.trim();if(!a)return!1;l.set(n,!0);try{return await navigator.clipboard.writeText(a),l.set(t,!0),r.set(()=>{l.set(t,!1)},e),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{l.set(n,!1)}}}}var S=1800;function C({liveRef:e,fullFormatted:t,onCopy:n}){let r=h(),i=x(S),a=l.derived(()=>i.copied?`Copied`:`Copy ${t()}`),o=l.derived(()=>i.copied?`Copied`:`Copy phone number`),s=t=>{let n=e?.();n&&(n.textContent=t,r.set(()=>{let t=e?.();t&&(t.textContent=``)},S))};return{get copied(){return i.copied},get copyAriaLabel(){return l.get(a)},get copyButtonTitle(){return l.get(o)},onCopyClick:async()=>{let e=t().trim();await i.copy(e)&&(n?.(e),s(`Phone number copied to clipboard`))}}}function w({theme:e}){let t=l.state(!1),n=l.derived(()=>(()=>{let n=e();return n===`auto`?l.get(t)?`theme-dark`:`theme-light`:`theme-${n}`})());return l.user_effect(()=>{let e=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null;if(!e)return;l.set(t,e.matches,!0);let n=e=>{l.set(t,e.matches,!0)};return e.addEventListener(`change`,n),()=>e.removeEventListener(`change`,n)}),{get themeClass(){return l.get(n)}}}var T=new Set(`$$slots.$$events.$$legacy.value.id.name.country.detect.locale.size.theme.disabled.readonly.showCopy.showClear.withValidity.searchPlaceholder.noResultsText.clearButtonLabel.dropdownClass.disableDefaultStyles.onchange.oncountrychange.onvalidationchange.onfocus.onblur.oncopy.onclear.flag.copysvg.clearsvg.actionsbefore.class`.split(`.`)),ee=c.from_svg(`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`),E=c.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z" fill="currentColor"></path></svg>`),te=c.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z" fill="currentColor"></path></svg>`),ne=c.from_html(`<button type="button"><!></button>`),re=c.from_svg(`<svg width="11" height="11" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="currentColor"></path></svg>`),ie=c.from_html(`<button type="button" class="pi-btn pi-btn-clear"><!></button>`),ae=c.from_html(`<li role="option"><span class="pi-flag" role="img"><!></span> <span class="pi-opt-name"> </span> <span class="pi-opt-code"> </span></li>`),oe=c.from_html(`<li class="pi-empty"> </li>`),se=c.from_html(`<div class="pi-search-wrap"><input name="search" type="search" class="pi-search" aria-label="Search"/></div> <ul class="pi-options" role="listbox" tabindex="-1"></ul>`,1),ce=c.from_html(`<div role="dialog" aria-modal="false" aria-label="Country"><!></div>`),le=c.from_html(`<div><div class="pi-selector"><button type="button"><span class="pi-flag" role="img"><!></span> <span class="pi-code"> </span> <!></button></div> <div class="pi-input-wrap"><input type="tel" inputmode="tel" autocomplete="tel-national" autocorrect="off" autocapitalize="off" spellcheck="false" class="pi-input"/> <div class="pi-actions" role="toolbar" aria-label="Phone input actions"><!> <!> <!></div></div></div> <!> <div class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>`,1);function D(e,t){c.push(t,!0);let n=c.prop(t,`value`,15,``),r=c.prop(t,`detect`,3,!0),i=c.prop(t,`size`,3,`normal`),a=c.prop(t,`theme`,3,`auto`),o=c.prop(t,`disabled`,3,!1),s=c.prop(t,`readonly`,3,!1),l=c.prop(t,`showCopy`,3,!0),d=c.prop(t,`showClear`,3,!1),f=c.prop(t,`withValidity`,3,!0),h=c.prop(t,`searchPlaceholder`,3,`Search country or code...`),_=c.prop(t,`noResultsText`,3,`No countries found`),v=c.prop(t,`clearButtonLabel`,3,`Clear phone number`),x=c.prop(t,`dropdownClass`,3,``),S=c.prop(t,`disableDefaultStyles`,3,!1),D=c.rest_props(t,T),O=c.state(null),k=c.state(null),A=c.state(null),j=c.state(null),M=c.state(null),N=c.state(null),P=p({country:()=>t.country,locale:()=>t.locale,detect:()=>r(),onCountryChange:(...e)=>t.oncountrychange?.(...e)}),F=m({country:()=>P.country,value:()=>n(),onChange:e=>n(e),onPhoneChange:(...e)=>t.onchange?.(...e),onValidationChange:(...e)=>t.onvalidationchange?.(...e)}),I=g(),L=c.derived(()=>o()||s()),R=c.derived(()=>I.showValidationHint&&F.shouldShowWarn),z=c.derived(()=>l()&&!F.isEmpty&&!o()),B=c.derived(()=>d()&&!F.isEmpty&&!c.get(L)),V=C({liveRef:()=>c.get(A),fullFormatted:()=>F.fullFormatted,onCopy:(...e)=>t.oncopy?.(...e)}),H=()=>(0,u.tick)().then(()=>c.get(k)?.focus()),U=b({rootRef:()=>c.get(O),dropdownRef:()=>c.get(j),searchRef:()=>c.get(M),selectorRef:()=>c.get(N),locale:()=>P.locale,countryOption:()=>t.country,inactive:()=>c.get(L),onSelectCountry:P.setCountry,onAfterSelect:H}),W=c.state(`0`);(0,u.onMount)(()=>{c.set(W,Math.random().toString(36).slice(2,10),!0)});let ue=c.derived(()=>`pi-options-${c.get(W)}`),de=c.derived(()=>`pi-dropdown-${c.get(W)}`),fe=e=>`pi-option-${c.get(W)}-${e}`,pe=c.derived(()=>U.dropdownOpen&&U.filteredCountries[U.focusedIndex]?fe(U.focusedIndex):void 0),G=y({formatter:()=>F.formatter,digits:()=>F.digits,inactive:()=>c.get(L),onChange:e=>n(e),scheduleValidationHint:I.scheduleValidationHint}),me=e=>{I.clearValidationHint(!1),U.closeDropdown(),t.onfocus?.(e)},he=e=>t.onblur?.(e);function ge(){H()}function _e(){c.get(k)?.blur()}function ve(){n(``),I.clearValidationHint(),t.onclear?.()}function ye(e){P.setCountry(e)}function be(){return F.full}function xe(){return F.fullFormatted}function Se(){return F.digits}function Ce(){return F.isComplete}function we(){return F.isComplete}let Te=()=>{ve(),H()},Ee=w({theme:()=>a()}),De=c.derived(()=>[`phone-input`,`size-${i()}`,Ee.themeClass,o()&&`is-disabled`,s()&&`is-readonly`,S()&&`is-unstyled`,f()&&c.get(R)&&`is-incomplete`,f()&&F.isComplete&&`is-complete`,t.class].filter(Boolean).join(` `)),Oe=c.derived(()=>+c.get(z)+ +c.get(B)+ +!!t.actionsbefore),K=c.derived(()=>U.hasDropdown&&!c.get(L)),ke=c.derived(()=>U.hasDropdown&&(!c.get(L)||U.dropdownOpen)),Ae=e=>(document.body.appendChild(e),{destroy:()=>e.remove()});var je={focus:ge,blur:_e,clear:ve,selectCountry:ye,getFullNumber:be,getFullFormattedNumber:xe,getDigits:Se,isValid:Ce,isComplete:we},Me=le(),q=c.first_child(Me);c.attribute_effect(q,()=>({class:c.get(De),...D,role:`group`,"aria-label":`Phone input`,[c.STYLE]:{"--pi-actions-count":c.get(Oe)}}));var J=c.child(q),Y=c.child(J);let Ne;var X=c.child(Y),Pe=c.child(X),Fe=e=>{var n=c.comment(),r=c.first_child(n);c.snippet(r,()=>t.flag,()=>P.country),c.append(e,n)},Ie=e=>{var t=c.text();c.template_effect(()=>c.set_text(t,P.country.flag)),c.append(e,t)};c.if(Pe,e=>{t.flag?e(Fe):e(Ie,-1)}),c.reset(X);var Z=c.sibling(X,2),Le=c.child(Z,!0);c.reset(Z);var Re=c.sibling(Z,2),ze=e=>{var t=ee();let n;c.template_effect(()=>n=c.set_class(t,0,`pi-chevron`,null,n,{"is-open":U.dropdownOpen})),c.append(e,t)};c.if(Re,e=>{c.get(K)&&e(ze)}),c.reset(Y),c.bind_this(Y,e=>c.set(N,e),()=>c.get(N)),c.reset(J);var Be=c.sibling(J,2),Q=c.child(Be);c.remove_input_defaults(Q),c.bind_this(Q,e=>c.set(k,e),()=>c.get(k));var Ve=c.sibling(Q,2),He=c.child(Ve),Ue=e=>{var n=c.comment(),r=c.first_child(n);c.snippet(r,()=>t.actionsbefore),c.append(e,n)};c.if(He,e=>{t.actionsbefore&&e(Ue)});var We=c.sibling(He,2),Ge=e=>{var n=ne();let r;var i=c.child(n),a=e=>{var n=c.comment(),r=c.first_child(n);c.snippet(r,()=>t.copysvg,()=>V.copied),c.append(e,n)},o=e=>{var t=E();c.append(e,t)},s=e=>{var t=te();c.append(e,t)};c.if(i,e=>{t.copysvg?e(a):V.copied?e(o,1):e(s,-1)}),c.reset(n),c.template_effect(()=>{r=c.set_class(n,1,`pi-btn pi-btn-copy`,null,r,{"is-copied":V.copied}),c.set_attribute(n,`aria-label`,V.copyAriaLabel),c.set_attribute(n,`title`,V.copyButtonTitle)}),c.delegated(`click`,n,function(...e){V.onCopyClick?.apply(this,e)}),c.append(e,n)};c.if(We,e=>{c.get(z)&&e(Ge)});var Ke=c.sibling(We,2),qe=e=>{var n=ie(),r=c.child(n),i=e=>{var n=c.comment(),r=c.first_child(n);c.snippet(r,()=>t.clearsvg),c.append(e,n)},a=e=>{var t=re();c.append(e,t)};c.if(r,e=>{t.clearsvg?e(i):e(a,-1)}),c.reset(n),c.template_effect(()=>{c.set_attribute(n,`aria-label`,v()),c.set_attribute(n,`title`,v())}),c.delegated(`click`,n,Te),c.append(e,n)};c.if(Ke,e=>{c.get(B)&&e(qe)}),c.reset(Ve),c.reset(Be),c.reset(q),c.bind_this(q,e=>c.set(O,e),()=>c.get(O));var $=c.sibling(q,2),Je=e=>{var n=ce();let r;var i=c.child(n),a=e=>{var n=se(),r=c.first_child(n),i=c.child(r);c.remove_input_defaults(i),c.bind_this(i,e=>c.set(M,e),()=>c.get(M)),c.reset(r);var a=c.sibling(r,2);c.each(a,23,()=>U.filteredCountries,e=>e.id,(e,n,r)=>{var i=ae();let a;var o=c.child(i),s=c.child(o),l=e=>{var r=c.comment(),i=c.first_child(r);c.snippet(i,()=>t.flag,()=>c.get(n)),c.append(e,r)},u=e=>{var t=c.text();c.template_effect(()=>c.set_text(t,c.get(n).flag)),c.append(e,t)};c.if(s,e=>{t.flag?e(l):e(u,-1)}),c.reset(o);var d=c.sibling(o,2),f=c.child(d,!0);c.reset(d);var p=c.sibling(d,2),m=c.child(p,!0);c.reset(p),c.reset(i),c.template_effect(e=>{c.set_attribute(i,`id`,e),a=c.set_class(i,1,`pi-option`,null,a,{"is-focused":c.get(r)===U.focusedIndex,"is-selected":c.get(n).id===P.country.id}),c.set_attribute(i,`aria-selected`,c.get(n).id===P.country.id),c.set_attribute(i,`title`,c.get(n).name),c.set_attribute(o,`aria-label`,`${c.get(n).name??``} flag`),c.set_text(f,c.get(n).name),c.set_text(m,c.get(n).code)},[()=>fe(c.get(r))]),c.delegated(`click`,i,()=>U.selectCountry(c.get(n).id)),c.event(`mouseenter`,i,()=>U.setFocusedIndex(c.get(r))),c.append(e,i)},e=>{var t=oe(),n=c.child(t,!0);c.reset(t),c.template_effect(()=>c.set_text(n,_())),c.append(e,t)}),c.reset(a),c.template_effect(()=>{c.set_attribute(i,`placeholder`,h()),c.set_attribute(i,`aria-controls`,c.get(ue)),c.set_attribute(i,`aria-activedescendant`,c.get(pe)),c.set_value(i,U.search),c.set_attribute(a,`id`,c.get(ue))}),c.delegated(`keydown`,i,function(...e){U.handleSearchKeydown?.apply(this,e)}),c.delegated(`input`,i,function(...e){U.handleSearchChange?.apply(this,e)}),c.append(e,n)};c.if(i,e=>{U.dropdownOpen&&e(a)}),c.reset(n),c.bind_this(n,e=>c.set(j,e),()=>c.get(j)),c.action(n,e=>Ae?.(e)),c.template_effect(()=>{c.set_attribute(n,`id`,c.get(de)),r=c.set_class(n,1,`phone-dropdown ${x()??``} ${Ee.themeClass??``}`,null,r,{"is-open":U.dropdownOpen})}),c.append(e,n)};c.if($,e=>{c.get(ke)&&e(Je)});var Ye=c.sibling($,2);return c.bind_this(Ye,e=>c.set(A,e),()=>c.get(A)),c.template_effect(()=>{Ne=c.set_class(Y,1,`pi-selector-btn`,null,Ne,{"no-dropdown":!c.get(K)}),Y.disabled=o(),c.set_attribute(Y,`tabindex`,c.get(K)?void 0:-1),c.set_attribute(Y,`aria-label`,`Selected country: ${P.country.name??``}`),c.set_attribute(Y,`aria-expanded`,c.get(K)&&U.dropdownOpen),c.set_attribute(Y,`aria-haspopup`,c.get(K)?`dialog`:void 0),c.set_attribute(Y,`aria-controls`,c.get(K)?c.get(de):void 0),c.set_attribute(X,`aria-label`,`${P.country.name??``} flag`),c.set_text(Le,P.country.code),c.set_attribute(Q,`id`,t.id),c.set_attribute(Q,`name`,t.name),c.set_attribute(Q,`placeholder`,F.displayPlaceholder),c.set_value(Q,F.displayValue),Q.disabled=o(),Q.readOnly=s(),c.set_attribute(Q,`aria-invalid`,c.get(R))}),c.delegated(`pointerdown`,Y,function(...e){U.handleSelectorPointerDown?.apply(this,e)}),c.delegated(`keydown`,Y,function(...e){U.handleSelectorKeydown?.apply(this,e)}),c.delegated(`click`,Y,function(...e){U.toggleDropdown?.apply(this,e)}),c.delegated(`beforeinput`,Q,function(...e){G.handleBeforeInput?.apply(this,e)}),c.delegated(`input`,Q,function(...e){G.handleInput?.apply(this,e)}),c.delegated(`keydown`,Q,function(...e){G.handleKeydown?.apply(this,e)}),c.event(`paste`,Q,function(...e){G.handlePaste?.apply(this,e)}),c.event(`focus`,Q,me),c.event(`blur`,Q,he),c.append(e,Me),c.pop(je)}c.delegate([`pointerdown`,`keydown`,`click`,`beforeinput`,`input`]);function O(e){let t=l.state(null),n=p({country:e.country,locale:e.locale,detect:e.detect,onCountryChange:e.onCountryChange}),r=m({country:()=>n.country,value:e.value,onChange:e.onChange,onPhoneChange:e.onPhoneChange}),{handleBeforeInput:i,handleInput:a,handleKeydown:o,handlePaste:s}=y({formatter:()=>r.formatter,digits:()=>r.digits,onChange:e.onChange});return l.user_effect(()=>{let e=l.get(t);if(e)return e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.addEventListener(`beforeinput`,i),e.addEventListener(`input`,a),e.addEventListener(`keydown`,o),e.addEventListener(`paste`,s),()=>{e.removeEventListener(`beforeinput`,i),e.removeEventListener(`input`,a),e.removeEventListener(`keydown`,o),e.removeEventListener(`paste`,s)}}),l.user_effect(()=>{let e=l.get(t);e&&(e.value=r.displayValue,e.setAttribute(`placeholder`,r.displayPlaceholder))}),{get inputRef(){return l.get(t)},set inputRef(e){l.set(t,e,!0)},get digits(){return r.digits},get formatter(){return r.formatter},get full(){return r.full},get fullFormatted(){return r.fullFormatted},get isComplete(){return r.isComplete},get isEmpty(){return r.isEmpty},get shouldShowWarn(){return r.shouldShowWarn},get country(){return n.country},get locale(){return n.locale},setCountry:n.setCountry,clear:()=>{e.onChange(``)}}}function k(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function A(e){return t=>{if(t.tagName!==`INPUT`){console.warn(`[phoneMaskAttachment] Attachment can only be used on input elements`);return}let n=k(e),r=l.effect_root(()=>{let e=l.state(l.proxy(t.value||``)),r=O({country:()=>n.country,locale:()=>n.locale,detect:()=>n.detect,value:()=>l.get(e),onChange:t=>{l.set(e,t,!0)},onPhoneChange:n.onChange,onCountryChange:n.onCountryChange});r.inputRef=t,t.__phoneMaskState={get country(){return r.country},get formatter(){return r.formatter},get digits(){return r.digits},get locale(){return r.locale},options:n,setCountry:e=>r.setCountry(e)}});return()=>{r(),delete t.__phoneMaskState}}}function j(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function M(e,t,n){if(t.digits=n,e.value=t.formatter.formatDisplay(t.digits),t.options.onChange){let n=e.value?`${t.country.code} ${e.value}`:``,r=t.digits?`${t.country.code}${t.digits}`:``;t.options.onChange({full:r,fullFormatted:n,digits:t.digits})}}function N(e,t){let n=t.formatter.getMaxDigits(),r=(0,d.extractDigits)(e.value,n),i=t.formatter.formatDisplay(r);(r!==t.digits||e.value!==i)&&M(e,t,r)}function P(e){let t=e.country.id,n=(0,d.parseCountryCode)(e.options.country);n&&n!==t&&e.setCountry(n)}function F(e,t,n){return r=>{let i=n(r,t);i&&(M(e,t,i.newDigits),Promise.resolve().then(()=>{(0,d.setCaret)(e,t.formatter.getCaretPosition(i.caretDigitIndex))}))}}async function I(e){let t=(0,d.parseCountryCode)(e.country);if(t)return t;if(e.detect){let e=(0,d.parseCountryCode)(await(0,d.detectByGeoIp)());if(e)return e;let t=(0,d.parseCountryCode)((0,d.detectCountryFromLocale)());if(t)return t}return`US`}function L(e,t){if(e.tagName!==`INPUT`)return console.warn(`[phoneMaskAction] Action can only be used on input elements`),{update(){},destroy(){}};e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.setAttribute(`placeholder`,``);let n=j(t),r=n.locale||(0,d.getNavigatorLang)(),i=(0,d.getCountry)((0,d.parseCountryCode)(n.country,`US`),r),a={country:i,formatter:(0,d.createPhoneFormatter)(i),digits:``,locale:r,options:n,setCountry(t){let n=(0,d.parseCountryCode)(t);if(!n)return!1;let r=(0,d.getCountry)(n,this.locale);return this.country=r,this.options.onCountryChange?.(r),this.formatter=(0,d.createPhoneFormatter)(r),e.placeholder=this.formatter.getPlaceholder(),N(e,this),!0}};e.__phoneMaskState=a;let o=F(e,a,d.processInput),s=F(e,a,d.processKeydown),c=F(e,a,d.processPaste);return e.addEventListener(`beforeinput`,d.processBeforeInput),e.addEventListener(`input`,o),e.addEventListener(`keydown`,s),e.addEventListener(`paste`,c),I(n).then(t=>{e.__phoneMaskState===a&&a.setCountry(t)}),{update(t){a.options=j(t),P(a),N(e,a)},destroy(){e.removeEventListener(`beforeinput`,d.processBeforeInput),e.removeEventListener(`input`,o),e.removeEventListener(`keydown`,s),e.removeEventListener(`paste`,c),delete e.__phoneMaskState}}}var R=D;exports.PhoneInput=R,exports.phoneMaskAction=L,exports.phoneMaskAttachment=A,exports.usePhoneMask=O;
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"svelte/internal/disclose-version";import*as e from"svelte/internal/client";import{onDestroy as t,onMount as n,tick as r}from"svelte";import{bindCountryDropdownListeners as i,createPhoneFormatter as a,detectByGeoIp as o,detectCountryFromLocale as s,extractDigits as c,filterCountries as l,getCountry as u,getNavigatorLang as d,handleCountryButtonKeydown as f,handleCountrySearchKeydown as p,parseCountryCode as m,positionCountryDropdown as h,processBeforeInput as g,processInput as _,processKeydown as v,processPaste as y,scrollCountryOptionIntoView as b,setCaret as x}from"@desource/phone-mask/kit";import{MasksFull as S}from"@desource/phone-mask";function C({country:t,locale:n,detect:r,onCountryChange:i}={}){let a=e.state(e.proxy(m(t?.(),`US`))),c=e.derived(()=>n?.()||d()),l=e.derived(()=>u(e.get(a),e.get(c))),f=t=>{let n=m(t);return n?(e.set(a,n,!0),!0):!1},p=async()=>{f(await o())||f(s())};return e.user_effect(()=>{let n=t?.();n&&n!==e.get(a)&&f(n)}),e.user_effect(()=>{r?.()&&!t?.()&&p()}),e.user_effect(()=>{i?.(e.get(l))}),{get country(){return e.get(l)},get locale(){return e.get(c)},setCountry:f}}function w({country:t,value:n,onChange:r,onPhoneChange:i,onValidationChange:o}){let s=e.derived(()=>a(t())),l=e.derived(()=>e.get(s).getMaxDigits()),u=e.derived(()=>c(n(),e.get(l))),d=e.derived(()=>e.get(s).getPlaceholder()),f=e.derived(()=>e.get(s).formatDisplay(e.get(u))),p=e.derived(()=>e.get(u)?`${t().code}${e.get(u)}`:``),m=e.derived(()=>e.get(f)?`${t().code} ${e.get(f)}`:``),h=e.derived(()=>e.get(s).isComplete(e.get(u))),g=e.derived(()=>e.get(u).length===0),_=e.derived(()=>!e.get(g)&&!e.get(h)),v=e.derived(()=>({full:e.get(p),fullFormatted:e.get(m),digits:e.get(u)}));return e.user_pre_effect(()=>{let t=n(),i=e.get(u);t!==i&&r(i)}),e.user_effect(()=>{i?.(e.get(v))}),e.user_effect(()=>{o?.(e.get(h))}),{get digits(){return e.get(u)},get formatter(){return e.get(s)},get displayPlaceholder(){return e.get(d)},get displayValue(){return e.get(f)},get full(){return e.get(p)},get fullFormatted(){return e.get(m)},get isComplete(){return e.get(h)},get isEmpty(){return e.get(g)},get shouldShowWarn(){return e.get(_)}}}function T(){let e=null,n=()=>{e&&=(clearTimeout(e),null)};return t(n),{set:(t,r)=>{n(),e=setTimeout(t,r)},clear:n}}function E(){let t=e.state(!1),n=T();return{get showValidationHint(){return e.get(t)},clearValidationHint:(r=!0)=>{r&&e.set(t,!1),n.clear()},scheduleValidationHint:r=>{e.set(t,!1),n.set(()=>{e.set(t,!0)},r)}}}var D=500,O=300;function k(e){let{formatter:t,digits:n,inactive:i,onChange:a,scheduleValidationHint:o}=e,s=(e,n)=>{r().then(()=>{e&&x(e,t().getCaretPosition(n))})};return{handleBeforeInput:e=>{g(e)},handleInput:e=>{if(i?.())return;let n=_(e,{formatter:t()});n&&(a?.(n.newDigits),s(e.target,n.caretDigitIndex),o?.(D))},handleKeydown:e=>{if(i?.())return;let r=v(e,{digits:n(),formatter:t()});r&&(a?.(r.newDigits),s(e.target,r.caretDigitIndex),o?.(O))},handlePaste:e=>{if(i?.())return;let r=y(e,{digits:n(),formatter:t()});r&&(a?.(r.newDigits),s(e.target,r.caretDigitIndex),o?.(O))}}}function A({rootRef:t,dropdownRef:n,searchRef:a,selectorRef:o,locale:s,countryOption:c,inactive:u,onSelectCountry:d,onAfterSelect:m}){let g=e.state(``),_=e.state(!1),v=e.state(0),y=!1,x=e.derived(()=>S(s())),C=e.derived(()=>l(e.get(x),e.get(g))),w=e.derived(()=>!c?.()&&e.get(x).length>1),T=t=>{e.set(v,typeof t==`function`?t(e.get(v)):t,!0)},E=()=>{r().then(()=>a()?.focus({preventScroll:!0}))},D=()=>{e.set(g,``),T(0),y=!1},O=()=>{h(t(),n())},k=()=>{e.set(_,!1),D()},A=()=>{if(u?.()||!e.get(w)||e.get(_))return;let t=n(),r=o();!t||!r||(O(),T(0),e.set(_,!0))},j=()=>{u?.()||!e.get(w)||(e.get(_)?k():A())},M=e=>{d(e),k(),m?.()},ee=t=>{e.set(g,t.target.value,!0),T(0)},te=e=>{r().then(()=>b(n(),e))};return e.user_effect(()=>{(u?.()||!e.get(w))&&e.get(_)&&k()}),e.user_effect(()=>{if(e.get(_))return O(),y&&E(),i(()=>n(),()=>o(),k,O)}),{get dropdownOpen(){return e.get(_)},get search(){return e.get(g)},get focusedIndex(){return e.get(v)},get filteredCountries(){return e.get(C)},get hasDropdown(){return e.get(w)},openDropdown:A,closeDropdown:k,toggleDropdown:j,selectCountry:M,setFocusedIndex:T,handleSearchChange:ee,handleSearchKeydown:t=>{p(t,e.get(v),e.get(C),T,te,e=>M(e.id))},handleSelectorPointerDown:e=>{y=e.pointerType===`mouse`},handleSelectorKeydown:t=>{f(t,e.get(_),()=>{y=!0},E,A)}}}function j(t=1800){let n=e.state(!1),r=e.state(!1),i=T();return{get copied(){return e.get(n)},get isCopying(){return e.get(r)},copy:async a=>{if(e.get(r))return!1;let o=a.trim();if(!o)return!1;e.set(r,!0);try{return await navigator.clipboard.writeText(o),e.set(n,!0),i.set(()=>{e.set(n,!1)},t),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{e.set(r,!1)}}}}var M=1800;function ee({liveRef:t,fullFormatted:n,onCopy:r}){let i=T(),a=j(M),o=e.derived(()=>a.copied?`Copied`:`Copy ${n()}`),s=e.derived(()=>a.copied?`Copied`:`Copy phone number`),c=e=>{let n=t?.();n&&(n.textContent=e,i.set(()=>{let e=t?.();e&&(e.textContent=``)},M))};return{get copied(){return a.copied},get copyAriaLabel(){return e.get(o)},get copyButtonTitle(){return e.get(s)},onCopyClick:async()=>{let e=n().trim();await a.copy(e)&&(r?.(e),c(`Phone number copied to clipboard`))}}}function te({theme:t}){let n=e.state(!1),r=e.derived(()=>(()=>{let r=t();return r===`auto`?e.get(n)?`theme-dark`:`theme-light`:`theme-${r}`})());return e.user_effect(()=>{let t=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null;if(!t)return;e.set(n,t.matches,!0);let r=t=>{e.set(n,t.matches,!0)};return t.addEventListener(`change`,r),()=>t.removeEventListener(`change`,r)}),{get themeClass(){return e.get(r)}}}var ne=e.from_svg(`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`),re=e.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z" fill="currentColor"></path></svg>`),ie=e.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z" fill="currentColor"></path></svg>`),ae=e.from_html(`<button type="button"><!></button>`),oe=e.from_svg(`<svg width="11" height="11" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="currentColor"></path></svg>`),se=e.from_html(`<button type="button" class="pi-btn pi-btn-clear"><!></button>`),ce=e.from_html(`<li role="option"><span class="pi-flag" role="img"><!></span> <span class="pi-opt-name"> </span> <span class="pi-opt-code"> </span></li>`),le=e.from_html(`<li class="pi-empty"> </li>`),ue=e.from_html(`<div class="pi-search-wrap"><input name="search" type="search" class="pi-search" aria-label="Search"/></div> <ul class="pi-options" role="listbox" tabindex="-1"></ul>`,1),de=e.from_html(`<div role="dialog" aria-modal="false" aria-label="Country"><!></div>`),fe=e.from_html(`<div><div class="pi-selector"><button type="button"><span class="pi-flag" role="img"><!></span> <span class="pi-code"> </span> <!></button></div> <div class="pi-input-wrap"><input type="tel" inputmode="tel" autocomplete="tel-national" autocorrect="off" autocapitalize="off" spellcheck="false" class="pi-input"/> <div class="pi-actions" role="toolbar" aria-label="Phone input actions"><!> <!> <!></div></div></div> <!> <div class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>`,1);function N(t,i){e.push(i,!0);let a=e.prop(i,`value`,15,``),o=e.prop(i,`detect`,3,!0),s=e.prop(i,`size`,3,`normal`),c=e.prop(i,`theme`,3,`auto`),l=e.prop(i,`disabled`,3,!1),u=e.prop(i,`readonly`,3,!1),d=e.prop(i,`showCopy`,3,!0),f=e.prop(i,`showClear`,3,!1),p=e.prop(i,`withValidity`,3,!0),m=e.prop(i,`searchPlaceholder`,3,`Search country or code...`),h=e.prop(i,`noResultsText`,3,`No countries found`),g=e.prop(i,`clearButtonLabel`,3,`Clear phone number`),_=e.prop(i,`dropdownClass`,3,``),v=e.prop(i,`disableDefaultStyles`,3,!1),y=e.rest_props(i,`$$slots.$$events.$$legacy.value.id.name.country.detect.locale.size.theme.disabled.readonly.showCopy.showClear.withValidity.searchPlaceholder.noResultsText.clearButtonLabel.dropdownClass.disableDefaultStyles.onchange.oncountrychange.onvalidationchange.onfocus.onblur.oncopy.onclear.flag.copysvg.clearsvg.actionsbefore.class`.split(`.`)),b=e.state(null),x=e.state(null),S=e.state(null),T=e.state(null),D=e.state(null),O=e.state(null),j=C({country:()=>i.country,locale:()=>i.locale,detect:()=>o(),onCountryChange:(...e)=>i.oncountrychange?.(...e)}),M=w({country:()=>j.country,value:()=>a(),onChange:e=>a(e),onPhoneChange:(...e)=>i.onchange?.(...e),onValidationChange:(...e)=>i.onvalidationchange?.(...e)}),N=E(),P=e.derived(()=>l()||u()),F=e.derived(()=>N.showValidationHint&&M.shouldShowWarn),I=e.derived(()=>d()&&!M.isEmpty&&!l()),L=e.derived(()=>f()&&!M.isEmpty&&!e.get(P)),R=ee({liveRef:()=>e.get(S),fullFormatted:()=>M.fullFormatted,onCopy:(...e)=>i.oncopy?.(...e)}),z=()=>r().then(()=>e.get(x)?.focus()),B=A({rootRef:()=>e.get(b),dropdownRef:()=>e.get(T),searchRef:()=>e.get(D),selectorRef:()=>e.get(O),locale:()=>j.locale,countryOption:()=>i.country,inactive:()=>e.get(P),onSelectCountry:j.setCountry,onAfterSelect:z}),V=e.state(`0`);n(()=>{e.set(V,Math.random().toString(36).slice(2,10),!0)});let H=e.derived(()=>`pi-options-${e.get(V)}`),U=e.derived(()=>`pi-dropdown-${e.get(V)}`),W=t=>`pi-option-${e.get(V)}-${t}`,pe=e.derived(()=>B.dropdownOpen&&B.filteredCountries[B.focusedIndex]?W(B.focusedIndex):void 0),G=k({formatter:()=>M.formatter,digits:()=>M.digits,inactive:()=>e.get(P),onChange:e=>a(e),scheduleValidationHint:N.scheduleValidationHint}),me=e=>{N.clearValidationHint(!1),B.closeDropdown(),i.onfocus?.(e)},he=e=>i.onblur?.(e);function ge(){z()}function _e(){e.get(x)?.blur()}function ve(){a(``),N.clearValidationHint(),i.onclear?.()}function ye(e){j.setCountry(e)}function be(){return M.full}function xe(){return M.fullFormatted}function Se(){return M.digits}function Ce(){return M.isComplete}function we(){return M.isComplete}let Te=()=>{ve(),z()},Ee=te({theme:()=>c()}),De=e.derived(()=>[`phone-input`,`size-${s()}`,Ee.themeClass,l()&&`is-disabled`,u()&&`is-readonly`,v()&&`is-unstyled`,p()&&e.get(F)&&`is-incomplete`,p()&&M.isComplete&&`is-complete`,i.class].filter(Boolean).join(` `)),Oe=e.derived(()=>+e.get(I)+ +e.get(L)+ +!!i.actionsbefore),K=e.derived(()=>B.hasDropdown&&!e.get(P)),ke=e.derived(()=>B.hasDropdown&&(!e.get(P)||B.dropdownOpen)),Ae=e=>(document.body.appendChild(e),{destroy:()=>e.remove()});var je={focus:ge,blur:_e,clear:ve,selectCountry:ye,getFullNumber:be,getFullFormattedNumber:xe,getDigits:Se,isValid:Ce,isComplete:we},Me=fe(),q=e.first_child(Me);e.attribute_effect(q,()=>({class:e.get(De),...y,role:`group`,"aria-label":`Phone input`,[e.STYLE]:{"--pi-actions-count":e.get(Oe)}}));var J=e.child(q),Y=e.child(J);let Ne;var X=e.child(Y),Pe=e.child(X),Fe=t=>{var n=e.comment(),r=e.first_child(n);e.snippet(r,()=>i.flag,()=>j.country),e.append(t,n)},Ie=t=>{var n=e.text();e.template_effect(()=>e.set_text(n,j.country.flag)),e.append(t,n)};e.if(Pe,e=>{i.flag?e(Fe):e(Ie,-1)}),e.reset(X);var Z=e.sibling(X,2),Le=e.child(Z,!0);e.reset(Z);var Re=e.sibling(Z,2),ze=t=>{var n=ne();let r;e.template_effect(()=>r=e.set_class(n,0,`pi-chevron`,null,r,{"is-open":B.dropdownOpen})),e.append(t,n)};e.if(Re,t=>{e.get(K)&&t(ze)}),e.reset(Y),e.bind_this(Y,t=>e.set(O,t),()=>e.get(O)),e.reset(J);var Be=e.sibling(J,2),Q=e.child(Be);e.remove_input_defaults(Q),e.bind_this(Q,t=>e.set(x,t),()=>e.get(x));var Ve=e.sibling(Q,2),He=e.child(Ve),Ue=t=>{var n=e.comment(),r=e.first_child(n);e.snippet(r,()=>i.actionsbefore),e.append(t,n)};e.if(He,e=>{i.actionsbefore&&e(Ue)});var We=e.sibling(He,2),Ge=t=>{var n=ae();let r;var a=e.child(n),o=t=>{var n=e.comment(),r=e.first_child(n);e.snippet(r,()=>i.copysvg,()=>R.copied),e.append(t,n)},s=t=>{var n=re();e.append(t,n)},c=t=>{var n=ie();e.append(t,n)};e.if(a,e=>{i.copysvg?e(o):R.copied?e(s,1):e(c,-1)}),e.reset(n),e.template_effect(()=>{r=e.set_class(n,1,`pi-btn pi-btn-copy`,null,r,{"is-copied":R.copied}),e.set_attribute(n,`aria-label`,R.copyAriaLabel),e.set_attribute(n,`title`,R.copyButtonTitle)}),e.delegated(`click`,n,function(...e){R.onCopyClick?.apply(this,e)}),e.append(t,n)};e.if(We,t=>{e.get(I)&&t(Ge)});var Ke=e.sibling(We,2),qe=t=>{var n=se(),r=e.child(n),a=t=>{var n=e.comment(),r=e.first_child(n);e.snippet(r,()=>i.clearsvg),e.append(t,n)},o=t=>{var n=oe();e.append(t,n)};e.if(r,e=>{i.clearsvg?e(a):e(o,-1)}),e.reset(n),e.template_effect(()=>{e.set_attribute(n,`aria-label`,g()),e.set_attribute(n,`title`,g())}),e.delegated(`click`,n,Te),e.append(t,n)};e.if(Ke,t=>{e.get(L)&&t(qe)}),e.reset(Ve),e.reset(Be),e.reset(q),e.bind_this(q,t=>e.set(b,t),()=>e.get(b));var $=e.sibling(q,2),Je=t=>{var n=de();let r;var a=e.child(n),o=t=>{var n=ue(),r=e.first_child(n),a=e.child(r);e.remove_input_defaults(a),e.bind_this(a,t=>e.set(D,t),()=>e.get(D)),e.reset(r);var o=e.sibling(r,2);e.each(o,23,()=>B.filteredCountries,e=>e.id,(t,n,r)=>{var a=ce();let o;var s=e.child(a),c=e.child(s),l=t=>{var r=e.comment(),a=e.first_child(r);e.snippet(a,()=>i.flag,()=>e.get(n)),e.append(t,r)},u=t=>{var r=e.text();e.template_effect(()=>e.set_text(r,e.get(n).flag)),e.append(t,r)};e.if(c,e=>{i.flag?e(l):e(u,-1)}),e.reset(s);var d=e.sibling(s,2),f=e.child(d,!0);e.reset(d);var p=e.sibling(d,2),m=e.child(p,!0);e.reset(p),e.reset(a),e.template_effect(t=>{e.set_attribute(a,`id`,t),o=e.set_class(a,1,`pi-option`,null,o,{"is-focused":e.get(r)===B.focusedIndex,"is-selected":e.get(n).id===j.country.id}),e.set_attribute(a,`aria-selected`,e.get(n).id===j.country.id),e.set_attribute(a,`title`,e.get(n).name),e.set_attribute(s,`aria-label`,`${e.get(n).name??``} flag`),e.set_text(f,e.get(n).name),e.set_text(m,e.get(n).code)},[()=>W(e.get(r))]),e.delegated(`click`,a,()=>B.selectCountry(e.get(n).id)),e.event(`mouseenter`,a,()=>B.setFocusedIndex(e.get(r))),e.append(t,a)},t=>{var n=le(),r=e.child(n,!0);e.reset(n),e.template_effect(()=>e.set_text(r,h())),e.append(t,n)}),e.reset(o),e.template_effect(()=>{e.set_attribute(a,`placeholder`,m()),e.set_attribute(a,`aria-controls`,e.get(H)),e.set_attribute(a,`aria-activedescendant`,e.get(pe)),e.set_value(a,B.search),e.set_attribute(o,`id`,e.get(H))}),e.delegated(`keydown`,a,function(...e){B.handleSearchKeydown?.apply(this,e)}),e.delegated(`input`,a,function(...e){B.handleSearchChange?.apply(this,e)}),e.append(t,n)};e.if(a,e=>{B.dropdownOpen&&e(o)}),e.reset(n),e.bind_this(n,t=>e.set(T,t),()=>e.get(T)),e.action(n,e=>Ae?.(e)),e.template_effect(()=>{e.set_attribute(n,`id`,e.get(U)),r=e.set_class(n,1,`phone-dropdown ${_()??``} ${Ee.themeClass??``}`,null,r,{"is-open":B.dropdownOpen})}),e.append(t,n)};e.if($,t=>{e.get(ke)&&t(Je)});var Ye=e.sibling($,2);return e.bind_this(Ye,t=>e.set(S,t),()=>e.get(S)),e.template_effect(()=>{Ne=e.set_class(Y,1,`pi-selector-btn`,null,Ne,{"no-dropdown":!e.get(K)}),Y.disabled=l(),e.set_attribute(Y,`tabindex`,e.get(K)?void 0:-1),e.set_attribute(Y,`aria-label`,`Selected country: ${j.country.name??``}`),e.set_attribute(Y,`aria-expanded`,e.get(K)&&B.dropdownOpen),e.set_attribute(Y,`aria-haspopup`,e.get(K)?`dialog`:void 0),e.set_attribute(Y,`aria-controls`,e.get(K)?e.get(U):void 0),e.set_attribute(X,`aria-label`,`${j.country.name??``} flag`),e.set_text(Le,j.country.code),e.set_attribute(Q,`id`,i.id),e.set_attribute(Q,`name`,i.name),e.set_attribute(Q,`placeholder`,M.displayPlaceholder),e.set_value(Q,M.displayValue),Q.disabled=l(),Q.readOnly=u(),e.set_attribute(Q,`aria-invalid`,e.get(F))}),e.delegated(`pointerdown`,Y,function(...e){B.handleSelectorPointerDown?.apply(this,e)}),e.delegated(`keydown`,Y,function(...e){B.handleSelectorKeydown?.apply(this,e)}),e.delegated(`click`,Y,function(...e){B.toggleDropdown?.apply(this,e)}),e.delegated(`beforeinput`,Q,function(...e){G.handleBeforeInput?.apply(this,e)}),e.delegated(`input`,Q,function(...e){G.handleInput?.apply(this,e)}),e.delegated(`keydown`,Q,function(...e){G.handleKeydown?.apply(this,e)}),e.event(`paste`,Q,function(...e){G.handlePaste?.apply(this,e)}),e.event(`focus`,Q,me),e.event(`blur`,Q,he),e.append(t,Me),e.pop(je)}e.delegate([`pointerdown`,`keydown`,`click`,`beforeinput`,`input`]);function P(t){let n=e.state(null),r=C({country:t.country,locale:t.locale,detect:t.detect,onCountryChange:t.onCountryChange}),i=w({country:()=>r.country,value:t.value,onChange:t.onChange,onPhoneChange:t.onPhoneChange}),{handleBeforeInput:a,handleInput:o,handleKeydown:s,handlePaste:c}=k({formatter:()=>i.formatter,digits:()=>i.digits,onChange:t.onChange});return e.user_effect(()=>{let t=e.get(n);if(t)return t.setAttribute(`type`,`tel`),t.setAttribute(`inputmode`,`tel`),t.addEventListener(`beforeinput`,a),t.addEventListener(`input`,o),t.addEventListener(`keydown`,s),t.addEventListener(`paste`,c),()=>{t.removeEventListener(`beforeinput`,a),t.removeEventListener(`input`,o),t.removeEventListener(`keydown`,s),t.removeEventListener(`paste`,c)}}),e.user_effect(()=>{let t=e.get(n);t&&(t.value=i.displayValue,t.setAttribute(`placeholder`,i.displayPlaceholder))}),{get inputRef(){return e.get(n)},set inputRef(t){e.set(n,t,!0)},get digits(){return i.digits},get formatter(){return i.formatter},get full(){return i.full},get fullFormatted(){return i.fullFormatted},get isComplete(){return i.isComplete},get isEmpty(){return i.isEmpty},get shouldShowWarn(){return i.shouldShowWarn},get country(){return r.country},get locale(){return r.locale},setCountry:r.setCountry,clear:()=>{t.onChange(``)}}}function F(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function I(t){return n=>{if(n.tagName!==`INPUT`){console.warn(`[phoneMaskAttachment] Attachment can only be used on input elements`);return}let r=F(t),i=e.effect_root(()=>{let t=e.state(e.proxy(n.value||``)),i=P({country:()=>r.country,locale:()=>r.locale,detect:()=>r.detect,value:()=>e.get(t),onChange:n=>{e.set(t,n,!0)},onPhoneChange:r.onChange,onCountryChange:r.onCountryChange});i.inputRef=n,n.__phoneMaskState={get country(){return i.country},get formatter(){return i.formatter},get digits(){return i.digits},get locale(){return i.locale},options:r,setCountry:e=>i.setCountry(e)}});return()=>{i(),delete n.__phoneMaskState}}}function L(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function R(e,t,n){if(t.digits=n,e.value=t.formatter.formatDisplay(t.digits),t.options.onChange){let n=e.value?`${t.country.code} ${e.value}`:``,r=t.digits?`${t.country.code}${t.digits}`:``;t.options.onChange({full:r,fullFormatted:n,digits:t.digits})}}function z(e,t){let n=t.formatter.getMaxDigits(),r=c(e.value,n),i=t.formatter.formatDisplay(r);(r!==t.digits||e.value!==i)&&R(e,t,r)}function B(e){let t=e.country.id,n=m(e.options.country);n&&n!==t&&e.setCountry(n)}function V(e,t,n){return r=>{let i=n(r,t);i&&(R(e,t,i.newDigits),Promise.resolve().then(()=>{x(e,t.formatter.getCaretPosition(i.caretDigitIndex))}))}}async function H(e){let t=m(e.country);if(t)return t;if(e.detect){let e=m(await o());if(e)return e;let t=m(s());if(t)return t}return`US`}function U(e,t){if(e.tagName!==`INPUT`)return console.warn(`[phoneMaskAction] Action can only be used on input elements`),{update(){},destroy(){}};e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.setAttribute(`placeholder`,``);let n=L(t),r=n.locale||d(),i=u(m(n.country,`US`),r),o={country:i,formatter:a(i),digits:``,locale:r,options:n,setCountry(t){let n=m(t);if(!n)return!1;let r=u(n,this.locale);return this.country=r,this.options.onCountryChange?.(r),this.formatter=a(r),e.placeholder=this.formatter.getPlaceholder(),z(e,this),!0}};e.__phoneMaskState=o;let s=V(e,o,_),c=V(e,o,v),l=V(e,o,y);return e.addEventListener(`beforeinput`,g),e.addEventListener(`input`,s),e.addEventListener(`keydown`,c),e.addEventListener(`paste`,l),H(n).then(t=>{e.__phoneMaskState===o&&o.setCountry(t)}),{update(t){o.options=L(t),B(o),z(e,o)},destroy(){e.removeEventListener(`beforeinput`,g),e.removeEventListener(`input`,s),e.removeEventListener(`keydown`,c),e.removeEventListener(`paste`,l),delete e.__phoneMaskState}}}var W=N;export{W as PhoneInput,U as phoneMaskAction,I as phoneMaskAttachment,P as usePhoneMask};
|
|
1
|
+
import"svelte/internal/disclose-version";import*as e from"svelte/internal/client";import{onDestroy as t,onMount as n,tick as r}from"svelte";import{bindCountryDropdownListeners as i,createPhoneFormatter as a,detectByGeoIp as o,detectCountryFromLocale as s,extractDigits as c,filterCountries as l,getCountry as u,getNavigatorLang as d,handleCountryButtonKeydown as f,handleCountrySearchKeydown as p,parseCountryCode as m,positionCountryDropdown as h,processBeforeInput as g,processInput as _,processKeydown as v,processPaste as y,scrollCountryOptionIntoView as b,setCaret as x}from"@desource/phone-mask/kit";import{MasksFull as S}from"@desource/phone-mask";function C({country:t,locale:n,detect:r,onCountryChange:i}={}){let a=e.state(e.proxy(m(t?.(),`US`))),c=e.derived(()=>n?.()||d()),l=e.derived(()=>u(e.get(a),e.get(c))),f=t=>{let n=m(t);return n?(e.set(a,n,!0),!0):!1},p=async()=>{f(await o())||f(s())};return e.user_effect(()=>{let n=t?.();n&&n!==e.get(a)&&f(n)}),e.user_effect(()=>{r?.()&&!t?.()&&p()}),e.user_effect(()=>{i?.(e.get(l))}),{get country(){return e.get(l)},get locale(){return e.get(c)},setCountry:f}}function w({country:t,value:n,onChange:r,onPhoneChange:i,onValidationChange:o}){let s=e.derived(()=>a(t())),l=e.derived(()=>e.get(s).getMaxDigits()),u=e.derived(()=>c(n(),e.get(l))),d=e.derived(()=>e.get(s).getPlaceholder()),f=e.derived(()=>e.get(s).formatDisplay(e.get(u))),p=e.derived(()=>e.get(u)?`${t().code}${e.get(u)}`:``),m=e.derived(()=>e.get(f)?`${t().code} ${e.get(f)}`:``),h=e.derived(()=>e.get(s).isComplete(e.get(u))),g=e.derived(()=>e.get(u).length===0),_=e.derived(()=>!e.get(g)&&!e.get(h)),v=e.derived(()=>({full:e.get(p),fullFormatted:e.get(m),digits:e.get(u)}));return e.user_pre_effect(()=>{let t=n(),i=e.get(u);t!==i&&r(i)}),e.user_effect(()=>{i?.(e.get(v))}),e.user_effect(()=>{o?.(e.get(h))}),{get digits(){return e.get(u)},get formatter(){return e.get(s)},get displayPlaceholder(){return e.get(d)},get displayValue(){return e.get(f)},get full(){return e.get(p)},get fullFormatted(){return e.get(m)},get isComplete(){return e.get(h)},get isEmpty(){return e.get(g)},get shouldShowWarn(){return e.get(_)}}}function T(){let e=null,n=()=>{e&&=(clearTimeout(e),null)};return t(n),{set:(t,r)=>{n(),e=setTimeout(t,r)},clear:n}}function E(){let t=e.state(!1),n=T();return{get showValidationHint(){return e.get(t)},clearValidationHint:(r=!0)=>{r&&e.set(t,!1),n.clear()},scheduleValidationHint:r=>{e.set(t,!1),n.set(()=>{e.set(t,!0)},r)}}}var D=500,O=300;function k(e){let{formatter:t,digits:n,inactive:i,onChange:a,scheduleValidationHint:o}=e,s=(e,n)=>{r().then(()=>{e&&x(e,t().getCaretPosition(n))})};return{handleBeforeInput:e=>{g(e)},handleInput:e=>{if(i?.())return;let n=_(e,{formatter:t()});n&&(a?.(n.newDigits),s(e.target,n.caretDigitIndex),o?.(D))},handleKeydown:e=>{if(i?.())return;let r=v(e,{digits:n(),formatter:t()});r&&(a?.(r.newDigits),s(e.target,r.caretDigitIndex),o?.(O))},handlePaste:e=>{if(i?.())return;let r=y(e,{digits:n(),formatter:t()});r&&(a?.(r.newDigits),s(e.target,r.caretDigitIndex),o?.(O))}}}function A({rootRef:t,dropdownRef:n,searchRef:a,selectorRef:o,locale:s,countryOption:c,inactive:u,onSelectCountry:d,onAfterSelect:m}){let g=e.state(``),_=e.state(!1),v=e.state(0),y=!1,x=e.derived(()=>S(s())),C=e.derived(()=>l(e.get(x),e.get(g))),w=e.derived(()=>!c?.()&&e.get(x).length>1),T=t=>{e.set(v,typeof t==`function`?t(e.get(v)):t,!0)},E=()=>{r().then(()=>a()?.focus({preventScroll:!0}))},D=()=>{e.set(g,``),T(0),y=!1},O=()=>{h(t(),n())},k=()=>{e.set(_,!1),D()},A=()=>{if(u?.()||!e.get(w)||e.get(_))return;let t=n(),r=o();!t||!r||(O(),T(0),e.set(_,!0))},j=()=>{u?.()||!e.get(w)||(e.get(_)?k():A())},M=e=>{d(e),k(),m?.()},N=t=>{e.set(g,t.target.value,!0),T(0)},ee=e=>{r().then(()=>b(n(),e))};return e.user_effect(()=>{(u?.()||!e.get(w))&&e.get(_)&&k()}),e.user_effect(()=>{if(e.get(_))return O(),y&&E(),i(()=>n(),()=>o(),k,O)}),{get dropdownOpen(){return e.get(_)},get search(){return e.get(g)},get focusedIndex(){return e.get(v)},get filteredCountries(){return e.get(C)},get hasDropdown(){return e.get(w)},openDropdown:A,closeDropdown:k,toggleDropdown:j,selectCountry:M,setFocusedIndex:T,handleSearchChange:N,handleSearchKeydown:t=>{p(t,e.get(v),e.get(C),T,ee,e=>M(e.id))},handleSelectorPointerDown:e=>{y=e.pointerType===`mouse`},handleSelectorKeydown:t=>{f(t,e.get(_),()=>{y=!0},E,A)}}}function j(t=1800){let n=e.state(!1),r=e.state(!1),i=T();return{get copied(){return e.get(n)},get isCopying(){return e.get(r)},copy:async a=>{if(e.get(r))return!1;let o=a.trim();if(!o)return!1;e.set(r,!0);try{return await navigator.clipboard.writeText(o),e.set(n,!0),i.set(()=>{e.set(n,!1)},t),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{e.set(r,!1)}}}}var M=1800;function N({liveRef:t,fullFormatted:n,onCopy:r}){let i=T(),a=j(M),o=e.derived(()=>a.copied?`Copied`:`Copy ${n()}`),s=e.derived(()=>a.copied?`Copied`:`Copy phone number`),c=e=>{let n=t?.();n&&(n.textContent=e,i.set(()=>{let e=t?.();e&&(e.textContent=``)},M))};return{get copied(){return a.copied},get copyAriaLabel(){return e.get(o)},get copyButtonTitle(){return e.get(s)},onCopyClick:async()=>{let e=n().trim();await a.copy(e)&&(r?.(e),c(`Phone number copied to clipboard`))}}}function ee({theme:t}){let n=e.state(!1),r=e.derived(()=>(()=>{let r=t();return r===`auto`?e.get(n)?`theme-dark`:`theme-light`:`theme-${r}`})());return e.user_effect(()=>{let t=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null;if(!t)return;e.set(n,t.matches,!0);let r=t=>{e.set(n,t.matches,!0)};return t.addEventListener(`change`,r),()=>t.removeEventListener(`change`,r)}),{get themeClass(){return e.get(r)}}}var te=new Set(`$$slots.$$events.$$legacy.value.id.name.country.detect.locale.size.theme.disabled.readonly.showCopy.showClear.withValidity.searchPlaceholder.noResultsText.clearButtonLabel.dropdownClass.disableDefaultStyles.onchange.oncountrychange.onvalidationchange.onfocus.onblur.oncopy.onclear.flag.copysvg.clearsvg.actionsbefore.class`.split(`.`)),ne=e.from_svg(`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`),re=e.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z" fill="currentColor"></path></svg>`),ie=e.from_svg(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z" fill="currentColor"></path></svg>`),ae=e.from_html(`<button type="button"><!></button>`),oe=e.from_svg(`<svg width="11" height="11" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="currentColor"></path></svg>`),se=e.from_html(`<button type="button" class="pi-btn pi-btn-clear"><!></button>`),ce=e.from_html(`<li role="option"><span class="pi-flag" role="img"><!></span> <span class="pi-opt-name"> </span> <span class="pi-opt-code"> </span></li>`),le=e.from_html(`<li class="pi-empty"> </li>`),ue=e.from_html(`<div class="pi-search-wrap"><input name="search" type="search" class="pi-search" aria-label="Search"/></div> <ul class="pi-options" role="listbox" tabindex="-1"></ul>`,1),de=e.from_html(`<div role="dialog" aria-modal="false" aria-label="Country"><!></div>`),fe=e.from_html(`<div><div class="pi-selector"><button type="button"><span class="pi-flag" role="img"><!></span> <span class="pi-code"> </span> <!></button></div> <div class="pi-input-wrap"><input type="tel" inputmode="tel" autocomplete="tel-national" autocorrect="off" autocapitalize="off" spellcheck="false" class="pi-input"/> <div class="pi-actions" role="toolbar" aria-label="Phone input actions"><!> <!> <!></div></div></div> <!> <div class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>`,1);function P(t,i){e.push(i,!0);let a=e.prop(i,`value`,15,``),o=e.prop(i,`detect`,3,!0),s=e.prop(i,`size`,3,`normal`),c=e.prop(i,`theme`,3,`auto`),l=e.prop(i,`disabled`,3,!1),u=e.prop(i,`readonly`,3,!1),d=e.prop(i,`showCopy`,3,!0),f=e.prop(i,`showClear`,3,!1),p=e.prop(i,`withValidity`,3,!0),m=e.prop(i,`searchPlaceholder`,3,`Search country or code...`),h=e.prop(i,`noResultsText`,3,`No countries found`),g=e.prop(i,`clearButtonLabel`,3,`Clear phone number`),_=e.prop(i,`dropdownClass`,3,``),v=e.prop(i,`disableDefaultStyles`,3,!1),y=e.rest_props(i,te),b=e.state(null),x=e.state(null),S=e.state(null),T=e.state(null),D=e.state(null),O=e.state(null),j=C({country:()=>i.country,locale:()=>i.locale,detect:()=>o(),onCountryChange:(...e)=>i.oncountrychange?.(...e)}),M=w({country:()=>j.country,value:()=>a(),onChange:e=>a(e),onPhoneChange:(...e)=>i.onchange?.(...e),onValidationChange:(...e)=>i.onvalidationchange?.(...e)}),P=E(),F=e.derived(()=>l()||u()),I=e.derived(()=>P.showValidationHint&&M.shouldShowWarn),L=e.derived(()=>d()&&!M.isEmpty&&!l()),R=e.derived(()=>f()&&!M.isEmpty&&!e.get(F)),z=N({liveRef:()=>e.get(S),fullFormatted:()=>M.fullFormatted,onCopy:(...e)=>i.oncopy?.(...e)}),B=()=>r().then(()=>e.get(x)?.focus()),V=A({rootRef:()=>e.get(b),dropdownRef:()=>e.get(T),searchRef:()=>e.get(D),selectorRef:()=>e.get(O),locale:()=>j.locale,countryOption:()=>i.country,inactive:()=>e.get(F),onSelectCountry:j.setCountry,onAfterSelect:B}),H=e.state(`0`);n(()=>{e.set(H,Math.random().toString(36).slice(2,10),!0)});let U=e.derived(()=>`pi-options-${e.get(H)}`),W=e.derived(()=>`pi-dropdown-${e.get(H)}`),G=t=>`pi-option-${e.get(H)}-${t}`,pe=e.derived(()=>V.dropdownOpen&&V.filteredCountries[V.focusedIndex]?G(V.focusedIndex):void 0),K=k({formatter:()=>M.formatter,digits:()=>M.digits,inactive:()=>e.get(F),onChange:e=>a(e),scheduleValidationHint:P.scheduleValidationHint}),me=e=>{P.clearValidationHint(!1),V.closeDropdown(),i.onfocus?.(e)},he=e=>i.onblur?.(e);function ge(){B()}function _e(){e.get(x)?.blur()}function ve(){a(``),P.clearValidationHint(),i.onclear?.()}function ye(e){j.setCountry(e)}function be(){return M.full}function xe(){return M.fullFormatted}function Se(){return M.digits}function Ce(){return M.isComplete}function we(){return M.isComplete}let Te=()=>{ve(),B()},Ee=ee({theme:()=>c()}),De=e.derived(()=>[`phone-input`,`size-${s()}`,Ee.themeClass,l()&&`is-disabled`,u()&&`is-readonly`,v()&&`is-unstyled`,p()&&e.get(I)&&`is-incomplete`,p()&&M.isComplete&&`is-complete`,i.class].filter(Boolean).join(` `)),Oe=e.derived(()=>+e.get(L)+ +e.get(R)+ +!!i.actionsbefore),q=e.derived(()=>V.hasDropdown&&!e.get(F)),ke=e.derived(()=>V.hasDropdown&&(!e.get(F)||V.dropdownOpen)),Ae=e=>(document.body.appendChild(e),{destroy:()=>e.remove()});var je={focus:ge,blur:_e,clear:ve,selectCountry:ye,getFullNumber:be,getFullFormattedNumber:xe,getDigits:Se,isValid:Ce,isComplete:we},Me=fe(),J=e.first_child(Me);e.attribute_effect(J,()=>({class:e.get(De),...y,role:`group`,"aria-label":`Phone input`,[e.STYLE]:{"--pi-actions-count":e.get(Oe)}}));var Y=e.child(J),X=e.child(Y);let Ne;var Z=e.child(X),Pe=e.child(Z),Fe=t=>{var n=e.comment(),r=e.first_child(n);e.snippet(r,()=>i.flag,()=>j.country),e.append(t,n)},Ie=t=>{var n=e.text();e.template_effect(()=>e.set_text(n,j.country.flag)),e.append(t,n)};e.if(Pe,e=>{i.flag?e(Fe):e(Ie,-1)}),e.reset(Z);var Q=e.sibling(Z,2),Le=e.child(Q,!0);e.reset(Q);var Re=e.sibling(Q,2),ze=t=>{var n=ne();let r;e.template_effect(()=>r=e.set_class(n,0,`pi-chevron`,null,r,{"is-open":V.dropdownOpen})),e.append(t,n)};e.if(Re,t=>{e.get(q)&&t(ze)}),e.reset(X),e.bind_this(X,t=>e.set(O,t),()=>e.get(O)),e.reset(Y);var Be=e.sibling(Y,2),$=e.child(Be);e.remove_input_defaults($),e.bind_this($,t=>e.set(x,t),()=>e.get(x));var Ve=e.sibling($,2),He=e.child(Ve),Ue=t=>{var n=e.comment(),r=e.first_child(n);e.snippet(r,()=>i.actionsbefore),e.append(t,n)};e.if(He,e=>{i.actionsbefore&&e(Ue)});var We=e.sibling(He,2),Ge=t=>{var n=ae();let r;var a=e.child(n),o=t=>{var n=e.comment(),r=e.first_child(n);e.snippet(r,()=>i.copysvg,()=>z.copied),e.append(t,n)},s=t=>{var n=re();e.append(t,n)},c=t=>{var n=ie();e.append(t,n)};e.if(a,e=>{i.copysvg?e(o):z.copied?e(s,1):e(c,-1)}),e.reset(n),e.template_effect(()=>{r=e.set_class(n,1,`pi-btn pi-btn-copy`,null,r,{"is-copied":z.copied}),e.set_attribute(n,`aria-label`,z.copyAriaLabel),e.set_attribute(n,`title`,z.copyButtonTitle)}),e.delegated(`click`,n,function(...e){z.onCopyClick?.apply(this,e)}),e.append(t,n)};e.if(We,t=>{e.get(L)&&t(Ge)});var Ke=e.sibling(We,2),qe=t=>{var n=se(),r=e.child(n),a=t=>{var n=e.comment(),r=e.first_child(n);e.snippet(r,()=>i.clearsvg),e.append(t,n)},o=t=>{var n=oe();e.append(t,n)};e.if(r,e=>{i.clearsvg?e(a):e(o,-1)}),e.reset(n),e.template_effect(()=>{e.set_attribute(n,`aria-label`,g()),e.set_attribute(n,`title`,g())}),e.delegated(`click`,n,Te),e.append(t,n)};e.if(Ke,t=>{e.get(R)&&t(qe)}),e.reset(Ve),e.reset(Be),e.reset(J),e.bind_this(J,t=>e.set(b,t),()=>e.get(b));var Je=e.sibling(J,2),Ye=t=>{var n=de();let r;var a=e.child(n),o=t=>{var n=ue(),r=e.first_child(n),a=e.child(r);e.remove_input_defaults(a),e.bind_this(a,t=>e.set(D,t),()=>e.get(D)),e.reset(r);var o=e.sibling(r,2);e.each(o,23,()=>V.filteredCountries,e=>e.id,(t,n,r)=>{var a=ce();let o;var s=e.child(a),c=e.child(s),l=t=>{var r=e.comment(),a=e.first_child(r);e.snippet(a,()=>i.flag,()=>e.get(n)),e.append(t,r)},u=t=>{var r=e.text();e.template_effect(()=>e.set_text(r,e.get(n).flag)),e.append(t,r)};e.if(c,e=>{i.flag?e(l):e(u,-1)}),e.reset(s);var d=e.sibling(s,2),f=e.child(d,!0);e.reset(d);var p=e.sibling(d,2),m=e.child(p,!0);e.reset(p),e.reset(a),e.template_effect(t=>{e.set_attribute(a,`id`,t),o=e.set_class(a,1,`pi-option`,null,o,{"is-focused":e.get(r)===V.focusedIndex,"is-selected":e.get(n).id===j.country.id}),e.set_attribute(a,`aria-selected`,e.get(n).id===j.country.id),e.set_attribute(a,`title`,e.get(n).name),e.set_attribute(s,`aria-label`,`${e.get(n).name??``} flag`),e.set_text(f,e.get(n).name),e.set_text(m,e.get(n).code)},[()=>G(e.get(r))]),e.delegated(`click`,a,()=>V.selectCountry(e.get(n).id)),e.event(`mouseenter`,a,()=>V.setFocusedIndex(e.get(r))),e.append(t,a)},t=>{var n=le(),r=e.child(n,!0);e.reset(n),e.template_effect(()=>e.set_text(r,h())),e.append(t,n)}),e.reset(o),e.template_effect(()=>{e.set_attribute(a,`placeholder`,m()),e.set_attribute(a,`aria-controls`,e.get(U)),e.set_attribute(a,`aria-activedescendant`,e.get(pe)),e.set_value(a,V.search),e.set_attribute(o,`id`,e.get(U))}),e.delegated(`keydown`,a,function(...e){V.handleSearchKeydown?.apply(this,e)}),e.delegated(`input`,a,function(...e){V.handleSearchChange?.apply(this,e)}),e.append(t,n)};e.if(a,e=>{V.dropdownOpen&&e(o)}),e.reset(n),e.bind_this(n,t=>e.set(T,t),()=>e.get(T)),e.action(n,e=>Ae?.(e)),e.template_effect(()=>{e.set_attribute(n,`id`,e.get(W)),r=e.set_class(n,1,`phone-dropdown ${_()??``} ${Ee.themeClass??``}`,null,r,{"is-open":V.dropdownOpen})}),e.append(t,n)};e.if(Je,t=>{e.get(ke)&&t(Ye)});var Xe=e.sibling(Je,2);return e.bind_this(Xe,t=>e.set(S,t),()=>e.get(S)),e.template_effect(()=>{Ne=e.set_class(X,1,`pi-selector-btn`,null,Ne,{"no-dropdown":!e.get(q)}),X.disabled=l(),e.set_attribute(X,`tabindex`,e.get(q)?void 0:-1),e.set_attribute(X,`aria-label`,`Selected country: ${j.country.name??``}`),e.set_attribute(X,`aria-expanded`,e.get(q)&&V.dropdownOpen),e.set_attribute(X,`aria-haspopup`,e.get(q)?`dialog`:void 0),e.set_attribute(X,`aria-controls`,e.get(q)?e.get(W):void 0),e.set_attribute(Z,`aria-label`,`${j.country.name??``} flag`),e.set_text(Le,j.country.code),e.set_attribute($,`id`,i.id),e.set_attribute($,`name`,i.name),e.set_attribute($,`placeholder`,M.displayPlaceholder),e.set_value($,M.displayValue),$.disabled=l(),$.readOnly=u(),e.set_attribute($,`aria-invalid`,e.get(I))}),e.delegated(`pointerdown`,X,function(...e){V.handleSelectorPointerDown?.apply(this,e)}),e.delegated(`keydown`,X,function(...e){V.handleSelectorKeydown?.apply(this,e)}),e.delegated(`click`,X,function(...e){V.toggleDropdown?.apply(this,e)}),e.delegated(`beforeinput`,$,function(...e){K.handleBeforeInput?.apply(this,e)}),e.delegated(`input`,$,function(...e){K.handleInput?.apply(this,e)}),e.delegated(`keydown`,$,function(...e){K.handleKeydown?.apply(this,e)}),e.event(`paste`,$,function(...e){K.handlePaste?.apply(this,e)}),e.event(`focus`,$,me),e.event(`blur`,$,he),e.append(t,Me),e.pop(je)}e.delegate([`pointerdown`,`keydown`,`click`,`beforeinput`,`input`]);function F(t){let n=e.state(null),r=C({country:t.country,locale:t.locale,detect:t.detect,onCountryChange:t.onCountryChange}),i=w({country:()=>r.country,value:t.value,onChange:t.onChange,onPhoneChange:t.onPhoneChange}),{handleBeforeInput:a,handleInput:o,handleKeydown:s,handlePaste:c}=k({formatter:()=>i.formatter,digits:()=>i.digits,onChange:t.onChange});return e.user_effect(()=>{let t=e.get(n);if(t)return t.setAttribute(`type`,`tel`),t.setAttribute(`inputmode`,`tel`),t.addEventListener(`beforeinput`,a),t.addEventListener(`input`,o),t.addEventListener(`keydown`,s),t.addEventListener(`paste`,c),()=>{t.removeEventListener(`beforeinput`,a),t.removeEventListener(`input`,o),t.removeEventListener(`keydown`,s),t.removeEventListener(`paste`,c)}}),e.user_effect(()=>{let t=e.get(n);t&&(t.value=i.displayValue,t.setAttribute(`placeholder`,i.displayPlaceholder))}),{get inputRef(){return e.get(n)},set inputRef(t){e.set(n,t,!0)},get digits(){return i.digits},get formatter(){return i.formatter},get full(){return i.full},get fullFormatted(){return i.fullFormatted},get isComplete(){return i.isComplete},get isEmpty(){return i.isEmpty},get shouldShowWarn(){return i.shouldShowWarn},get country(){return r.country},get locale(){return r.locale},setCountry:r.setCountry,clear:()=>{t.onChange(``)}}}function I(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function L(t){return n=>{if(n.tagName!==`INPUT`){console.warn(`[phoneMaskAttachment] Attachment can only be used on input elements`);return}let r=I(t),i=e.effect_root(()=>{let t=e.state(e.proxy(n.value||``)),i=F({country:()=>r.country,locale:()=>r.locale,detect:()=>r.detect,value:()=>e.get(t),onChange:n=>{e.set(t,n,!0)},onPhoneChange:r.onChange,onCountryChange:r.onCountryChange});i.inputRef=n,n.__phoneMaskState={get country(){return i.country},get formatter(){return i.formatter},get digits(){return i.digits},get locale(){return i.locale},options:r,setCountry:e=>i.setCountry(e)}});return()=>{i(),delete n.__phoneMaskState}}}function R(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function z(e,t,n){if(t.digits=n,e.value=t.formatter.formatDisplay(t.digits),t.options.onChange){let n=e.value?`${t.country.code} ${e.value}`:``,r=t.digits?`${t.country.code}${t.digits}`:``;t.options.onChange({full:r,fullFormatted:n,digits:t.digits})}}function B(e,t){let n=t.formatter.getMaxDigits(),r=c(e.value,n),i=t.formatter.formatDisplay(r);(r!==t.digits||e.value!==i)&&z(e,t,r)}function V(e){let t=e.country.id,n=m(e.options.country);n&&n!==t&&e.setCountry(n)}function H(e,t,n){return r=>{let i=n(r,t);i&&(z(e,t,i.newDigits),Promise.resolve().then(()=>{x(e,t.formatter.getCaretPosition(i.caretDigitIndex))}))}}async function U(e){let t=m(e.country);if(t)return t;if(e.detect){let e=m(await o());if(e)return e;let t=m(s());if(t)return t}return`US`}function W(e,t){if(e.tagName!==`INPUT`)return console.warn(`[phoneMaskAction] Action can only be used on input elements`),{update(){},destroy(){}};e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.setAttribute(`placeholder`,``);let n=R(t),r=n.locale||d(),i=u(m(n.country,`US`),r),o={country:i,formatter:a(i),digits:``,locale:r,options:n,setCountry(t){let n=m(t);if(!n)return!1;let r=u(n,this.locale);return this.country=r,this.options.onCountryChange?.(r),this.formatter=a(r),e.placeholder=this.formatter.getPlaceholder(),B(e,this),!0}};e.__phoneMaskState=o;let s=H(e,o,_),c=H(e,o,v),l=H(e,o,y);return e.addEventListener(`beforeinput`,g),e.addEventListener(`input`,s),e.addEventListener(`keydown`,c),e.addEventListener(`paste`,l),U(n).then(t=>{e.__phoneMaskState===o&&o.setCountry(t)}),{update(t){o.options=R(t),V(o),B(e,o)},destroy(){e.removeEventListener(`beforeinput`,g),e.removeEventListener(`input`,s),e.removeEventListener(`keydown`,c),e.removeEventListener(`paste`,l),delete e.__phoneMaskState}}}var G=P;export{G as PhoneInput,W as phoneMaskAction,L as phoneMaskAttachment,F as usePhoneMask};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desource/phone-mask-svelte",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"description": "🌍 Svelte 5 component, composable, action, and attachment for international phone number masking. Powered by @desource/phone-mask with Google libphonenumber sync.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelte",
|
|
@@ -60,13 +60,13 @@
|
|
|
60
60
|
"svelte": "^5.0.0"
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@desource/phone-mask": "1.4.
|
|
63
|
+
"@desource/phone-mask": "1.4.1"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
|
-
"@sveltejs/vite-plugin-svelte": "^7.
|
|
67
|
-
"@testing-library/svelte": "^5.
|
|
68
|
-
"svelte": "^5.
|
|
69
|
-
"svelte-check": "^4.
|
|
66
|
+
"@sveltejs/vite-plugin-svelte": "^7.2.0",
|
|
67
|
+
"@testing-library/svelte": "^5.4.2",
|
|
68
|
+
"svelte": "^5.56.4",
|
|
69
|
+
"svelte-check": "^4.7.2"
|
|
70
70
|
},
|
|
71
71
|
"scripts": {
|
|
72
72
|
"clean": "rimraf dist tsconfig.tsbuildinfo test-results coverage",
|