@webority/ui-elements 0.0.9 → 0.2.0
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/dist/ui-elements.global.js +5 -5
- package/dist/ui-elements.js +1153 -136
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
10
10
|
<div class="search-select-empty" hidden>No matches</div>
|
|
11
11
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
12
12
|
</div>
|
|
13
|
-
</div>`,this._rendered=!0,this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!
|
|
13
|
+
</div>`,this._rendered=!0,this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!e?.value)}_renderLoading(){let{spinner:e}=this._refs();e&&(e.hidden=!this._loading)}_renderOptions(e){let t=this._refs();if(!t.optionsWrap)return;let i=(e??(t.input?t.input.value:``)).trim().toLowerCase(),a=this._readOptions();!this._remote&&i&&(a=a.filter(e=>r(e.label).toLowerCase().includes(i))),t.optionsWrap.innerHTML=a.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${n(e.value)}" aria-selected="${t}">${e.label}</button>`}).join(``),this._active=-1;let o=i.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&o&&!a.length)),t.empty&&(t.empty.hidden=this._loading||a.length>0||this._remote&&o)}_wire(){let e=this._refs();if(!e.control||!e.input)return;let t=()=>{let t=e.control.getBoundingClientRect();e.menu.style.position=`fixed`,e.menu.style.top=`${t.bottom+4}px`,e.menu.style.left=`${t.left}px`,e.menu.style.width=`${t.width}px`},n=()=>this._optionEls().filter(e=>!e.hidden),i=e=>{let t=n();this._active=e;for(let e of this._optionEls())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},a=()=>!e.menu.hidden,o=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),this._renderOptions()},s=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),i(-1),this._syncInput()},c=t=>{this._value=t.dataset.value,this._label=r(t.innerHTML),this._internals?.setFormValue(this._value),e.input.value=this._label,this.dispatchEvent(new Event(`change`,{bubbles:!0})),s(),e.input.focus()};e.input.addEventListener(`focus`,()=>o()),e.input.addEventListener(`input`,()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),a()||o(),this._remote){if(this._renderOptions(t),t.trim().length<this._minChars)return;clearTimeout(this._timer),this._timer=setTimeout(()=>{this.dispatchEvent(new CustomEvent(`search`,{bubbles:!0,detail:{query:t}}))},this._debounceMs)}else this._renderOptions(t)}),e.input.addEventListener(`keydown`,e=>{let t=n();e.key===`ArrowDown`?(e.preventDefault(),a()||o(),i(Math.min(this._active+1,t.length-1))):e.key===`ArrowUp`?(e.preventDefault(),i(Math.max(this._active-1,0))):e.key===`Enter`?t[this._active]&&(e.preventDefault(),c(t[this._active])):e.key===`Escape`&&s()}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&c(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&i(this._optionEls().indexOf(t))}),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,this._internals?.setFormValue(``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus()}),this._onDocClick=e=>{a()&&!this.contains(e.target)&&s()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{a()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),clearTimeout(this._timer)}},n=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),r=e=>String(e??``).replace(/<[^>]*>/g,``),i=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],a=[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`],o=e=>String(e).padStart(2,`0`),s=(e,t,n)=>`${e}-${o(t+1)}-${o(n)}`,c=e=>{let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e||``);return t?{y:+t[1],m:t[2]-1,d:+t[3]}:null},l=e=>{let t=c(e);return t?`${o(t.d)} ${i[t.m].slice(0,3)} ${t.y}`:``},u=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`min`,`max`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth()}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?(this._value=n||``,this._syncTrigger()):this.render())}get value(){return this._value}set value(e){this._value=e||``,this._internals?.setFormValue(this._value),this._syncTrigger(),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){this._value=this.getAttribute(`value`)||this._value;let e=this.getAttribute(`placeholder`)||`Enter Date`,t=c(this._value);t&&(this._viewY=t.y,this._viewM=t.m),this.innerHTML=`
|
|
14
14
|
<div class="datepicker">
|
|
15
15
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
16
16
|
<span data-trigger-label class="${t?``:`search-select-placeholder`}">${t?l(this._value):e}</span>
|
|
@@ -36,13 +36,13 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
36
36
|
<div class="search-select-options"></div>
|
|
37
37
|
<div class="search-select-empty" hidden>No matches</div>
|
|
38
38
|
</div>
|
|
39
|
-
</div>`,this._rendered=!0,this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`;if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${p(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${f(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>m(e.label).toLowerCase().includes(r))),t.innerHTML=i.map(e=>{let t=this._values.includes(String(e.value));return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${f(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(this.querySelector(`[data-chips]`),!e||!t)return;let a=()=>this.hasAttribute(`disabled`),o=()=>{let n=e.getBoundingClientRect();t.style.position=`fixed`,t.style.top=`${n.bottom+4}px`,t.style.left=`${n.left}px`,t.style.width=`${n.width}px`},s=()=>[...this.querySelectorAll(`.search-select-option`)],c=()=>s().filter(e=>!e.hidden),l=e=>{let t=c();this._active=e;for(let e of s())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},u=()=>!t.hidden,d=()=>{a()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),o(),n&&(n.value=``,this._renderOptions(``),n.focus()))},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),l(-1)},p=()=>{this._internals?.setFormValue(this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=e=>{let t=String(e);this._values.includes(t)?this._values=this._values.filter(e=>e!==t):this._values=[...this._values,t],this._renderControl(),this._renderOptions(n?n.value:``),p()},h=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),p()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),h(t.dataset.remove);return}u()?f():d()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(m(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(c().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),l(-1)}),n?.addEventListener(`keydown`,t=>{let r=c();t.key===`ArrowDown`?(t.preventDefault(),l(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),l(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&m(r[this._active].dataset.value)):t.key===`Escape`?(f(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&h(this._values[this._values.length-1])}),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{!u()&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())}),this._onDocClick=e=>{u()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{u()&&o()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},f=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),p=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`),m=e=>String(e??``).replace(/<[^>]*>/g,``),h=[[`IN`,`India`,`91`],[`US`,`United States`,`1`],[`GB`,`United Kingdom`,`44`],[`AE`,`United Arab Emirates`,`971`],[`SG`,`Singapore`,`65`],[`AU`,`Australia`,`61`],[`CA`,`Canada`,`1`],[`DE`,`Germany`,`49`],[`FR`,`France`,`33`],[`IT`,`Italy`,`39`],[`ES`,`Spain`,`34`],[`NL`,`Netherlands`,`31`],[`CH`,`Switzerland`,`41`],[`SE`,`Sweden`,`46`],[`NO`,`Norway`,`47`],[`DK`,`Denmark`,`45`],[`IE`,`Ireland`,`353`],[`NZ`,`New Zealand`,`64`],[`JP`,`Japan`,`81`],[`CN`,`China`,`86`],[`HK`,`Hong Kong`,`852`],[`MY`,`Malaysia`,`60`],[`ID`,`Indonesia`,`62`],[`TH`,`Thailand`,`66`],[`PH`,`Philippines`,`63`],[`VN`,`Vietnam`,`84`],[`KR`,`South Korea`,`82`],[`SA`,`Saudi Arabia`,`966`],[`QA`,`Qatar`,`974`],[`KW`,`Kuwait`,`965`],[`BH`,`Bahrain`,`973`],[`OM`,`Oman`,`968`],[`ZA`,`South Africa`,`27`],[`NG`,`Nigeria`,`234`],[`KE`,`Kenya`,`254`],[`EG`,`Egypt`,`20`],[`BR`,`Brazil`,`55`],[`MX`,`Mexico`,`52`],[`AR`,`Argentina`,`54`],[`BD`,`Bangladesh`,`880`],[`PK`,`Pakistan`,`92`],[`LK`,`Sri Lanka`,`94`],[`NP`,`Nepal`,`977`]],g=e=>e.toUpperCase().replace(/./g,e=>String.fromCodePoint(127397+e.charCodeAt(0))),_=e=>(h.find(t=>t[0]===e)||[``,``,``])[2],v=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._country=`IN`,this._national=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`country`&&(this._country=n||`IN`),this.render())}get value(){return`+${_(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){this._internals?.setFormValue(this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){let e=this.getAttribute(`placeholder`)||`Enter phone number`;this._country=this.getAttribute(`country`)||this._country;let t=h.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="phone-flag-lg">${g(e)}</span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
39
|
+
</div>`,this._rendered=!0,this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`;if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${p(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${f(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>m(e.label).toLowerCase().includes(r))),t.innerHTML=i.map(e=>{let t=this._values.includes(String(e.value));return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${f(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(!e||!t)return;let a=()=>this.hasAttribute(`disabled`),o=()=>{let n=e.getBoundingClientRect();t.style.position=`fixed`,t.style.top=`${n.bottom+4}px`,t.style.left=`${n.left}px`,t.style.width=`${n.width}px`},s=()=>[...this.querySelectorAll(`.search-select-option`)],c=()=>s().filter(e=>!e.hidden),l=e=>{let t=c();this._active=e;for(let e of s())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},u=()=>!t.hidden,d=()=>{a()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),o(),n&&(n.value=``,this._renderOptions(``),n.focus()))},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),l(-1)},p=()=>{this._internals?.setFormValue(this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=e=>{let t=String(e);this._values.includes(t)?this._values=this._values.filter(e=>e!==t):this._values=[...this._values,t],this._renderControl(),this._renderOptions(n?n.value:``),p()},h=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),p()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),h(t.dataset.remove);return}u()?f():d()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(m(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(c().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),l(-1)}),n?.addEventListener(`keydown`,t=>{let r=c();t.key===`ArrowDown`?(t.preventDefault(),l(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),l(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&m(r[this._active].dataset.value)):t.key===`Escape`?(f(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&h(this._values[this._values.length-1])}),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{!u()&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())}),this._onDocClick=e=>{u()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{u()&&o()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},f=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),p=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`),m=e=>String(e??``).replace(/<[^>]*>/g,``),h=[[`AF`,`Afghanistan`,`93`],[`AX`,`Åland Islands`,`358`],[`AL`,`Albania`,`355`],[`DZ`,`Algeria`,`213`],[`AS`,`American Samoa`,`1`],[`AD`,`Andorra`,`376`],[`AO`,`Angola`,`244`],[`AI`,`Anguilla`,`1`],[`AG`,`Antigua & Barbuda`,`1`],[`AR`,`Argentina`,`54`],[`AM`,`Armenia`,`374`],[`AW`,`Aruba`,`297`],[`AC`,`Ascension Island`,`247`],[`AU`,`Australia`,`61`],[`AT`,`Austria`,`43`],[`AZ`,`Azerbaijan`,`994`],[`BS`,`Bahamas`,`1`],[`BH`,`Bahrain`,`973`],[`BD`,`Bangladesh`,`880`],[`BB`,`Barbados`,`1`],[`BY`,`Belarus`,`375`],[`BE`,`Belgium`,`32`],[`BZ`,`Belize`,`501`],[`BJ`,`Benin`,`229`],[`BM`,`Bermuda`,`1`],[`BT`,`Bhutan`,`975`],[`BO`,`Bolivia`,`591`],[`BA`,`Bosnia & Herzegovina`,`387`],[`BW`,`Botswana`,`267`],[`BR`,`Brazil`,`55`],[`IO`,`British Indian Ocean Territory`,`246`],[`VG`,`British Virgin Islands`,`1`],[`BN`,`Brunei`,`673`],[`BG`,`Bulgaria`,`359`],[`BF`,`Burkina Faso`,`226`],[`BI`,`Burundi`,`257`],[`KH`,`Cambodia`,`855`],[`CM`,`Cameroon`,`237`],[`CA`,`Canada`,`1`],[`CV`,`Cape Verde`,`238`],[`BQ`,`Caribbean Netherlands`,`599`],[`KY`,`Cayman Islands`,`1`],[`CF`,`Central African Republic`,`236`],[`TD`,`Chad`,`235`],[`CL`,`Chile`,`56`],[`CN`,`China`,`86`],[`CX`,`Christmas Island`,`61`],[`CC`,`Cocos (Keeling) Islands`,`61`],[`CO`,`Colombia`,`57`],[`KM`,`Comoros`,`269`],[`CG`,`Congo - Brazzaville`,`242`],[`CD`,`Congo - Kinshasa`,`243`],[`CK`,`Cook Islands`,`682`],[`CR`,`Costa Rica`,`506`],[`CI`,`Côte d’Ivoire`,`225`],[`HR`,`Croatia`,`385`],[`CU`,`Cuba`,`53`],[`CW`,`Curaçao`,`599`],[`CY`,`Cyprus`,`357`],[`CZ`,`Czechia`,`420`],[`DK`,`Denmark`,`45`],[`DJ`,`Djibouti`,`253`],[`DM`,`Dominica`,`1`],[`DO`,`Dominican Republic`,`1`],[`EC`,`Ecuador`,`593`],[`EG`,`Egypt`,`20`],[`SV`,`El Salvador`,`503`],[`GQ`,`Equatorial Guinea`,`240`],[`ER`,`Eritrea`,`291`],[`EE`,`Estonia`,`372`],[`SZ`,`Eswatini`,`268`],[`ET`,`Ethiopia`,`251`],[`FK`,`Falkland Islands`,`500`],[`FO`,`Faroe Islands`,`298`],[`FJ`,`Fiji`,`679`],[`FI`,`Finland`,`358`],[`FR`,`France`,`33`],[`GF`,`French Guiana`,`594`],[`PF`,`French Polynesia`,`689`],[`GA`,`Gabon`,`241`],[`GM`,`Gambia`,`220`],[`GE`,`Georgia`,`995`],[`DE`,`Germany`,`49`],[`GH`,`Ghana`,`233`],[`GI`,`Gibraltar`,`350`],[`GR`,`Greece`,`30`],[`GL`,`Greenland`,`299`],[`GD`,`Grenada`,`1`],[`GP`,`Guadeloupe`,`590`],[`GU`,`Guam`,`1`],[`GT`,`Guatemala`,`502`],[`GG`,`Guernsey`,`44`],[`GN`,`Guinea`,`224`],[`GW`,`Guinea-Bissau`,`245`],[`GY`,`Guyana`,`592`],[`HT`,`Haiti`,`509`],[`HN`,`Honduras`,`504`],[`HK`,`Hong Kong SAR China`,`852`],[`HU`,`Hungary`,`36`],[`IS`,`Iceland`,`354`],[`IN`,`India`,`91`],[`ID`,`Indonesia`,`62`],[`IR`,`Iran`,`98`],[`IQ`,`Iraq`,`964`],[`IE`,`Ireland`,`353`],[`IM`,`Isle of Man`,`44`],[`IL`,`Israel`,`972`],[`IT`,`Italy`,`39`],[`JM`,`Jamaica`,`1`],[`JP`,`Japan`,`81`],[`JE`,`Jersey`,`44`],[`JO`,`Jordan`,`962`],[`KZ`,`Kazakhstan`,`7`],[`KE`,`Kenya`,`254`],[`KI`,`Kiribati`,`686`],[`XK`,`Kosovo`,`383`],[`KW`,`Kuwait`,`965`],[`KG`,`Kyrgyzstan`,`996`],[`LA`,`Laos`,`856`],[`LV`,`Latvia`,`371`],[`LB`,`Lebanon`,`961`],[`LS`,`Lesotho`,`266`],[`LR`,`Liberia`,`231`],[`LY`,`Libya`,`218`],[`LI`,`Liechtenstein`,`423`],[`LT`,`Lithuania`,`370`],[`LU`,`Luxembourg`,`352`],[`MO`,`Macao SAR China`,`853`],[`MG`,`Madagascar`,`261`],[`MW`,`Malawi`,`265`],[`MY`,`Malaysia`,`60`],[`MV`,`Maldives`,`960`],[`ML`,`Mali`,`223`],[`MT`,`Malta`,`356`],[`MH`,`Marshall Islands`,`692`],[`MQ`,`Martinique`,`596`],[`MR`,`Mauritania`,`222`],[`MU`,`Mauritius`,`230`],[`YT`,`Mayotte`,`262`],[`MX`,`Mexico`,`52`],[`FM`,`Micronesia`,`691`],[`MD`,`Moldova`,`373`],[`MC`,`Monaco`,`377`],[`MN`,`Mongolia`,`976`],[`ME`,`Montenegro`,`382`],[`MS`,`Montserrat`,`1`],[`MA`,`Morocco`,`212`],[`MZ`,`Mozambique`,`258`],[`MM`,`Myanmar (Burma)`,`95`],[`NA`,`Namibia`,`264`],[`NR`,`Nauru`,`674`],[`NP`,`Nepal`,`977`],[`NL`,`Netherlands`,`31`],[`NC`,`New Caledonia`,`687`],[`NZ`,`New Zealand`,`64`],[`NI`,`Nicaragua`,`505`],[`NE`,`Niger`,`227`],[`NG`,`Nigeria`,`234`],[`NU`,`Niue`,`683`],[`NF`,`Norfolk Island`,`672`],[`KP`,`North Korea`,`850`],[`MK`,`North Macedonia`,`389`],[`MP`,`Northern Mariana Islands`,`1`],[`NO`,`Norway`,`47`],[`OM`,`Oman`,`968`],[`PK`,`Pakistan`,`92`],[`PW`,`Palau`,`680`],[`PS`,`Palestinian Territories`,`970`],[`PA`,`Panama`,`507`],[`PG`,`Papua New Guinea`,`675`],[`PY`,`Paraguay`,`595`],[`PE`,`Peru`,`51`],[`PH`,`Philippines`,`63`],[`PL`,`Poland`,`48`],[`PT`,`Portugal`,`351`],[`PR`,`Puerto Rico`,`1`],[`QA`,`Qatar`,`974`],[`RE`,`Réunion`,`262`],[`RO`,`Romania`,`40`],[`RU`,`Russia`,`7`],[`RW`,`Rwanda`,`250`],[`WS`,`Samoa`,`685`],[`SM`,`San Marino`,`378`],[`ST`,`São Tomé & Príncipe`,`239`],[`SA`,`Saudi Arabia`,`966`],[`SN`,`Senegal`,`221`],[`RS`,`Serbia`,`381`],[`SC`,`Seychelles`,`248`],[`SL`,`Sierra Leone`,`232`],[`SG`,`Singapore`,`65`],[`SX`,`Sint Maarten`,`1`],[`SK`,`Slovakia`,`421`],[`SI`,`Slovenia`,`386`],[`SB`,`Solomon Islands`,`677`],[`SO`,`Somalia`,`252`],[`ZA`,`South Africa`,`27`],[`KR`,`South Korea`,`82`],[`SS`,`South Sudan`,`211`],[`ES`,`Spain`,`34`],[`LK`,`Sri Lanka`,`94`],[`BL`,`St. Barthélemy`,`590`],[`SH`,`St. Helena`,`290`],[`KN`,`St. Kitts & Nevis`,`1`],[`LC`,`St. Lucia`,`1`],[`MF`,`St. Martin`,`590`],[`PM`,`St. Pierre & Miquelon`,`508`],[`VC`,`St. Vincent & Grenadines`,`1`],[`SD`,`Sudan`,`249`],[`SR`,`Suriname`,`597`],[`SJ`,`Svalbard & Jan Mayen`,`47`],[`SE`,`Sweden`,`46`],[`CH`,`Switzerland`,`41`],[`SY`,`Syria`,`963`],[`TW`,`Taiwan`,`886`],[`TJ`,`Tajikistan`,`992`],[`TZ`,`Tanzania`,`255`],[`TH`,`Thailand`,`66`],[`TL`,`Timor-Leste`,`670`],[`TG`,`Togo`,`228`],[`TK`,`Tokelau`,`690`],[`TO`,`Tonga`,`676`],[`TT`,`Trinidad & Tobago`,`1`],[`TA`,`Tristan da Cunha`,`290`],[`TN`,`Tunisia`,`216`],[`TR`,`Türkiye`,`90`],[`TM`,`Turkmenistan`,`993`],[`TC`,`Turks & Caicos Islands`,`1`],[`TV`,`Tuvalu`,`688`],[`VI`,`U.S. Virgin Islands`,`1`],[`UG`,`Uganda`,`256`],[`UA`,`Ukraine`,`380`],[`AE`,`United Arab Emirates`,`971`],[`GB`,`United Kingdom`,`44`],[`US`,`United States`,`1`],[`UY`,`Uruguay`,`598`],[`UZ`,`Uzbekistan`,`998`],[`VU`,`Vanuatu`,`678`],[`VA`,`Vatican City`,`39`],[`VE`,`Venezuela`,`58`],[`VN`,`Vietnam`,`84`],[`WF`,`Wallis & Futuna`,`681`],[`EH`,`Western Sahara`,`212`],[`YE`,`Yemen`,`967`],[`ZM`,`Zambia`,`260`],[`ZW`,`Zimbabwe`,`263`]],g=e=>(h.find(t=>t[0]===e)||[``,``,``])[2],_=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,v=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._country=`IN`,this._national=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`country`&&(this._country=n||`IN`),this.render())}get value(){return`+${g(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){this._internals?.setFormValue(this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){let e=this.getAttribute(`placeholder`)||`Enter phone number`;this._country=this.getAttribute(`country`)||this._country;let t=h.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${_(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
40
40
|
<div class="phone-input-wrap">
|
|
41
41
|
<div class="phone-country-adornment">
|
|
42
42
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
43
|
-
<span class="
|
|
43
|
+
<span class="${_(this._country)}" data-flag aria-hidden="true"></span>
|
|
44
44
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
45
|
-
<span class="phone-dial" data-dial>+${
|
|
45
|
+
<span class="phone-dial" data-dial>+${g(this._country)}</span>
|
|
46
46
|
</button>
|
|
47
47
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
48
48
|
<div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
|
|
@@ -50,7 +50,7 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
52
52
|
<input type="tel" class="input" placeholder="${y(e)}" value="${y(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
|
|
53
|
-
</div>`,this._rendered=!0,this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),a=this.querySelector(`input[type=tel]`),o=this.querySelector(`[data-flag]`),s=this.querySelector(`[data-dial]`);if(!e||!t)return;let c=()=>!t.hidden,l=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,
|
|
53
|
+
</div>`,this._rendered=!0,this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),a=this.querySelector(`input[type=tel]`),o=this.querySelector(`[data-flag]`),s=this.querySelector(`[data-dial]`);if(!e||!t)return;let c=()=>!t.hidden,l=()=>{let n=e.getBoundingClientRect(),r=t.offsetWidth||320,i=t.offsetHeight||320,a=window.innerHeight-n.bottom,o=a<i+6&&n.top>a?n.top-i-6:n.bottom+6,s=Math.min(Math.max(8,n.left),Math.max(8,window.innerWidth-r-8));t.style.top=`${Math.max(8,o)}px`,t.style.left=`${s}px`},u=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,f(``),l(),n.focus()},d=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{c()&&l()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let f=e=>{let t=e.trim().toLowerCase(),n=0;for(let e of r.querySelectorAll(`.country-dropdown-item`)){let r=!t||e.textContent.toLowerCase().includes(t);e.hidden=!r,r&&(n+=1)}i&&(i.hidden=n>0)},p=e=>{this._country=e,this.setAttribute(`country`,e),o&&(o.className=_(e)),s&&(s.textContent=`+${g(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);d(),this._commit()};e.addEventListener(`click`,()=>c()?d():u()),n.addEventListener(`input`,()=>f(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&p(t.dataset.iso)}),a.addEventListener(`input`,()=>{this._national=a.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{c()&&!this.contains(e.target)&&d()},document.addEventListener(`click`,this._onDocClick),this._internals?.setFormValue(this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},y=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),b=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``,this._optionsProp=null,this._active=-1}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?this.value=n:this.render())}get value(){return this._value}set value(e){this._value=e==null?``:String(e),this._internals?.setFormValue(this._value),this._syncSelected()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_readOptions(){return this._optionsProp?this._optionsProp:[...this.querySelectorAll(`:scope > wui-option`)].map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,selected:e.hasAttribute(`selected`)}))}render(){let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.getAttribute(`placeholder`)||`Select...`,r=this.getAttribute(`search-placeholder`)||`Search...`,i=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);i&&(this._value=String(i.value)),this._internals?.setFormValue(this._value);let a=e.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${x(e.value)}" aria-selected="${t}">${e.label}</button>`}).join(``);this.innerHTML=`
|
|
54
54
|
<div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}">
|
|
55
55
|
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
56
56
|
<span class="${i?``:`search-select-placeholder`}" data-label>${i?i.label:n}</span>
|