@webority/ui-elements 0.6.6 → 0.6.8

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.
Files changed (3) hide show
  1. package/dist/ui-elements.global.js +26 -12
  2. package/dist/ui-elements.js +153 -41
  3. package/package.json +1 -1
package/dist/ui-elements.global.js CHANGED
@@ -70,7 +70,7 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
70
70
  </div>
71
71
  <div class="datepicker-weekdays">${p.map(e=>`<span>${e}</span>`).join(``)}</div>
72
72
  <div class="datepicker-grid">${s}</div>
73
- <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{if(!g(this._value)&&!this._viewNavigated){let e=new Date;this._viewY=e.getFullYear(),this._viewM=e.getMonth()}this._renderMonth(),t.hidden=!1,e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewNavigated=!0,this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{n()&&e.key===`Escape`&&i()},document.addEventListener(`keydown`,this._onDocKey),this._syncFormValue()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),this._onDocKey&&document.removeEventListener(`keydown`,this._onDocKey)}},y=class extends HTMLElement{_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`,`aria-label`]}constructor(){super(),this._values=[],this._optionsProp=null,this._active=-1}connectedCallback(){if(!this._rendered){if(!this._valuesInit&&!this._optionsProp&&!this._values.length){let e=[...this.querySelectorAll(`:scope > wui-option[selected]`)].map(e=>e.getAttribute(`value`)??e.textContent.trim());e.length&&(this._values=e.map(String))}this._valuesInit=!0,this.render()}}attributeChangedCallback(){this._rendered&&this.render()}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],a(this,this._values.join(`,`)),this._rendered&&this._renderControl()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,[o]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?t.label:e}_labelHtmlFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?c(t):s(e)}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;a(this,this._values.join(`,`)),this.innerHTML=`
73
+ <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_position(e,t){let n=e.getBoundingClientRect(),r=t.offsetHeight,i=window.innerHeight-n.bottom,a=i<r+4&&n.top>i;t.classList.toggle(`drop-up`,a),t.style.position=`fixed`,t.style.top=a?`${Math.max(4,n.top-r-4)}px`:`${n.bottom+4}px`;let o=t.offsetWidth,s=Math.min(n.left,window.innerWidth-o-4);t.style.left=`${Math.max(4,s)}px`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{if(!g(this._value)&&!this._viewNavigated){let e=new Date;this._viewY=e.getFullYear(),this._viewM=e.getMonth()}this._renderMonth(),t.hidden=!1,this._position(e,t),e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewNavigated=!0,this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{n()&&e.key===`Escape`&&i()},document.addEventListener(`keydown`,this._onDocKey),this._syncFormValue()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),this._onDocKey&&document.removeEventListener(`keydown`,this._onDocKey)}},y=class extends HTMLElement{_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`,`aria-label`]}constructor(){super(),this._values=[],this._optionsProp=null,this._active=-1}connectedCallback(){if(!this._rendered){if(!this._valuesInit&&!this._optionsProp&&!this._values.length){let e=[...this.querySelectorAll(`:scope > wui-option[selected]`)].map(e=>e.getAttribute(`value`)??e.textContent.trim());e.length&&(this._values=e.map(String))}this._valuesInit=!0,this.render()}}attributeChangedCallback(){this._rendered&&this.render()}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],a(this,this._values.join(`,`)),this._rendered&&this._renderControl()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,[o]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?t.label:e}_labelHtmlFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?c(t):s(e)}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;a(this,this._values.join(`,`)),this.innerHTML=`
74
74
  <div class="search-select">
75
75
  <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${b(this._accessibleName())}"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
76
76
  <div class="ms-chips" data-chips></div>
@@ -81,28 +81,42 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
81
81
  <div class="search-select-options"></div>
82
82
  <div class="search-select-empty" hidden>No matches</div>
83
83
  </div>
84
- </div>`,this._rendered=!0,a(this,this._values.join(`,`)),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">${s(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${b(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=>x(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="${b(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${c(e)}</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 o=()=>this.hasAttribute(`disabled`),s=()=>{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`},c=()=>[...this.querySelectorAll(`.search-select-option`)],l=()=>c().filter(e=>!e.hidden),u=e=>{let t=l();this._active=e;for(let e of c())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},d=()=>!t.hidden,f=()=>{o()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),s(),n&&(n.value=``,this._renderOptions(``),n.focus()))},p=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),u(-1)},m=()=>{a(this,this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},h=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:``),m()},g=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),m()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),g(t.dataset.remove);return}d()?p():f()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(h(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&u(l().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),u(-1)});let _=t=>{let r=l();t.key===`ArrowDown`?(t.preventDefault(),u(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),u(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&h(r[this._active].dataset.value)):t.key===`Escape`?(p(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&g(this._values[this._values.length-1])};n?.addEventListener(`keydown`,_),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{if(d()){_(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f())}),this._onDocClick=e=>{d()&&!this.contains(e.target)&&p()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{d()&&s()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},b=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),x=e=>String(e??``).replace(/<[^>]*>/g,``),S=[[`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`]],C=e=>(S.find(t=>t[0]===e)||[``,``,``])[2],w=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,T=class extends HTMLElement{static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),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`+${C(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){a(this,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=S.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${w(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
84
+ </div>`,this._rendered=!0,a(this,this._values.join(`,`)),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">${s(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${b(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=>x(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="${b(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${c(e)}</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 o=()=>this.hasAttribute(`disabled`),s=()=>{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`},c=()=>[...this.querySelectorAll(`.search-select-option`)],l=()=>c().filter(e=>!e.hidden),u=e=>{let t=l();this._active=e;for(let e of c())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},d=()=>!t.hidden,f=()=>{o()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),s(),n&&(n.value=``,this._renderOptions(``),n.focus()))},p=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),u(-1)},m=()=>{a(this,this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},h=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:``),m()},g=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),m()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),g(t.dataset.remove);return}d()?p():f()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(h(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&u(l().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),u(-1)});let _=t=>{let r=l();t.key===`ArrowDown`?(t.preventDefault(),u(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),u(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&h(r[this._active].dataset.value)):t.key===`Escape`?(p(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&g(this._values[this._values.length-1])};n?.addEventListener(`keydown`,_),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{if(d()){_(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f())}),this._onDocClick=e=>{d()&&!this.contains(e.target)&&p()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{d()&&s()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},b=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),x=e=>String(e??``).replace(/<[^>]*>/g,``),S=/[^0-9]/g,C=/[^0-9a-zA-Z]/g,w=class extends HTMLElement{static get observedAttributes(){return[`value`,`length`,`mode`,`disabled`,`aria-label`]}get length(){let e=Number.parseInt(this.getAttribute(`length`)??`6`,10);return Number.isFinite(e)&&e>0?e:6}set length(e){this.setAttribute(`length`,String(e))}get mode(){return this.getAttribute(`mode`)===`alphanumeric`?`alphanumeric`:`numeric`}set mode(e){this.setAttribute(`mode`,String(e??`numeric`))}get value(){return this._value??``}set value(e){this._value=this._clean(e),a(this,this._value),this._paint()}_clean(e){return(e==null?``:String(e)).replace(this.mode===`alphanumeric`?C:S,``).slice(0,this.length)}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?(this._value=this._clean(n),a(this,this._value),this._paint()):this.render())}render(){this._value=this._clean(this.getAttribute(`value`)??this._value);let e=this.length,t=this.mode===`numeric`,n=this.hasAttribute(`disabled`),r=Array.from({length:e},()=>`<span class="otp-slot" aria-hidden="true"></span>`).join(``),i=this.getAttribute(`aria-label`),o=i?` aria-label="${i.replace(/"/g,`&quot;`)}"`:``;this.innerHTML=`
85
+ <div class="otp">
86
+ <input
87
+ class="otp-field"
88
+ type="text"
89
+ autocomplete="one-time-code"
90
+ inputmode="${t?`numeric`:`text`}"
91
+ ${t?`pattern="[0-9]*"`:``}${o}
92
+ autocapitalize="off"
93
+ autocorrect="off"
94
+ spellcheck="false"
95
+ ${n?`disabled`:``} />
96
+ <div class="otp-slots" aria-hidden="true">${r}</div>
97
+ </div>`,this._rendered=!0,a(this,this._value),this._wire(),this._paint()}_refs(){return{input:this.querySelector(`.otp-field`),slots:[...this.querySelectorAll(`.otp-slot`)]}}_paint(){let{input:e,slots:t}=this._refs();if(!e||!t.length)return;e.value!==this._value&&(e.value=this._value);let n=e.selectionStart??this._value.length,r=Math.min(n,t.length-1),i=document.activeElement===e;t.forEach((e,t)=>{e.textContent=this._value[t]??``,e.classList.toggle(`filled`,!!this._value[t]),e.classList.toggle(`active`,i&&t===r)})}_wire(){let{input:e}=this._refs();if(!e)return;let t=e=>{let t=this._clean(e),n=t!==this._value;this._value=t,a(this,this._value),this._paint(),n&&this.dispatchEvent(new Event(`change`,{bubbles:!0})),n&&t.length===this.length&&this.dispatchEvent(new CustomEvent(`complete`,{bubbles:!0,detail:t}))};e.addEventListener(`input`,()=>t(e.value)),e.addEventListener(`paste`,e=>{let n=e.clipboardData?.getData(`text`);n!=null&&(e.preventDefault(),t(n))});for(let t of[`keyup`,`click`,`focus`,`blur`,`select`])e.addEventListener(t,()=>this._paint());document.addEventListener(`selectionchange`,()=>{document.activeElement===e&&this._paint()})}},T=[[`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`]],E=e=>(T.find(t=>t[0]===e)||[``,``,``])[2],D=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,O=class extends HTMLElement{static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),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`+${E(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){a(this,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=T.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${D(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
85
98
  <div class="phone-input-wrap">
86
99
  <div class="phone-country-adornment">
87
100
  <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
88
- <span class="${w(this._country)}" data-flag aria-hidden="true"></span>
101
+ <span class="${D(this._country)}" data-flag aria-hidden="true"></span>
89
102
  <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
90
- <span class="phone-dial" data-dial>+${C(this._country)}</span>
103
+ <span class="phone-dial" data-dial>+${E(this._country)}</span>
91
104
  </button>
92
105
  <div class="country-dropdown-menu" role="listbox" hidden>
93
106
  <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>
94
107
  <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
95
108
  </div>
96
109
  </div>
97
- <input type="tel" class="input" placeholder="${E(e)}" value="${E(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
98
- </div>`,this._rendered=!0,a(this,this.value),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`),o=this.querySelector(`input[type=tel]`),s=this.querySelector(`[data-flag]`),c=this.querySelector(`[data-dial]`);if(!e||!t)return;let l=()=>!t.hidden,u=()=>{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`},d=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,p(``),u(),n.focus()},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{l()&&u()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let p=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)},m=e=>{this._country=e,this.setAttribute(`country`,e),s&&(s.className=w(e)),c&&(c.textContent=`+${C(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);f(),this._commit()};e.addEventListener(`click`,()=>l()?f():d()),n.addEventListener(`input`,()=>p(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&m(t.dataset.iso)}),o.addEventListener(`input`,()=>{this._national=o.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{l()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),a(this,this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},E=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),D=class extends HTMLElement{static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`,`aria-label`]}_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}constructor(){super(),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),a(this,this._value),this._syncSelected()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,[o]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();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)),a(this,this._value);let o=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="${O(e.value)}" aria-selected="${t}">${c(e)}</button>`}).join(``);this.innerHTML=`
99
- <div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}">
100
- <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${O(this._accessibleName())}"${this.hasAttribute(`disabled`)?` disabled`:``}>
101
- <span class="${i?``:`search-select-placeholder`}" data-label>${i?c(i):s(n)}</span>
110
+ <input type="tel" class="input" placeholder="${k(e)}" value="${k(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
111
+ </div>`,this._rendered=!0,a(this,this.value),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`),o=this.querySelector(`input[type=tel]`),s=this.querySelector(`[data-flag]`),c=this.querySelector(`[data-dial]`);if(!e||!t)return;let l=()=>!t.hidden,u=()=>{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`},d=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,p(``),u(),n.focus()},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{l()&&u()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let p=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)},m=e=>{this._country=e,this.setAttribute(`country`,e),s&&(s.className=D(e)),c&&(c.textContent=`+${E(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);f(),this._commit()};e.addEventListener(`click`,()=>l()?f():d()),n.addEventListener(`input`,()=>p(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&m(t.dataset.iso)}),o.addEventListener(`input`,()=>{this._national=o.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{l()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),a(this,this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},k=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),A=class extends HTMLElement{static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`,`size`,`clearable`,`aria-label`]}_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}constructor(){super(),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),a(this,this._value),this._syncSelected(),this._syncReset()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,[o]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.hasAttribute(`clearable`),r=this.getAttribute(`size`),i=r===`sm`?` search-select-sm`:r===`lg`?` search-select-lg`:``,o=this.getAttribute(`placeholder`)||`Select...`,l=this.getAttribute(`search-placeholder`)||`Search...`,u=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);u&&(this._value=String(u.value)),a(this,this._value);let d=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="${j(e.value)}" aria-selected="${t}">${c(e)}</button>`}).join(``);this.innerHTML=`
112
+ <div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}${i}">
113
+ <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${j(this._accessibleName())}"${this.hasAttribute(`disabled`)?` disabled`:``}>
114
+ <span class="${u?``:`search-select-placeholder`}" data-label>${u?c(u):s(o)}</span>
115
+ ${n?`<span class="search-select-reset" role="button" aria-label="Clear selection" hidden><i class="bi bi-x-lg" aria-hidden="true"></i></span>`:``}
102
116
  <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
103
117
  </button>
104
118
  <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
105
- ${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${O(r)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>`:``}
106
- <div class="search-select-options">${o}<div class="search-select-empty" hidden>No matches</div></div>
119
+ ${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${j(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>`:``}
120
+ <div class="search-select-options">${d}<div class="search-select-empty" hidden>No matches</div></div>
107
121
  </div>
108
- </div>`,this._rendered=!0,a(this,this._value),this._wire()}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e}=this._refs(),t=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}e&&(e.innerHTML=t?c(t):e.innerHTML,e.classList.toggle(`search-select-placeholder`,!t))}_wire(){let e=this._refs();if(!e.control||!e.menu)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=e=>{let t=this._visible();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`}))},r=t=>{let n=t.trim().toLowerCase(),r=0;for(let e of this._optionEls()){let t=!n||e.textContent.toLowerCase().includes(n);e.hidden=!t,t&&(r+=1)}e.empty&&(e.empty.hidden=r>0),e.clear&&(e.clear.hidden=!n)},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),e.search&&(e.search.value=``,r(``),e.search.focus()),n(this._optionEls().findIndex(e=>e.classList.contains(`selected`)))},o=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),n(-1)},s=t=>{this.value=t.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0})),o(),e.control.focus()},c=t=>{let r=this._visible();t.key===`ArrowDown`?(t.preventDefault(),n(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),n(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&s(r[this._active])):t.key===`Escape`&&(o(),e.control.focus())};e.control.addEventListener(`click`,()=>i()?o():a()),e.control.addEventListener(`keydown`,e=>{if(i()){c(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),a())}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&s(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&n(this._visible().indexOf(t))}),e.search?.addEventListener(`input`,()=>{r(e.search.value),n(-1)}),e.search?.addEventListener(`keydown`,c),e.clear?.addEventListener(`click`,()=>{e.search.value=``,r(``),e.search.focus()}),e.menu.addEventListener(`keydown`,c),this._onDocClick=e=>{i()&&!this.contains(e.target)&&o()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},O=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),k=`image/png,image/jpeg,image/webp`,A=5,j={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},M={"image/png":`PNG`,"image/jpeg":`JPG`,"image/webp":`WEBP`,"image/gif":`GIF`,"image/svg+xml":`SVG`,"application/pdf":`PDF`,".png":`PNG`,".jpg":`JPG`,".jpeg":`JPG`,".webp":`WEBP`,".gif":`GIF`,".svg":`SVG`,".pdf":`PDF`},N=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function P(e){let t=[];for(let n of N(e)){let e=M[n]||(n.startsWith(`.`)?n.slice(1).toUpperCase():n.toUpperCase());t.includes(e)||t.push(e)}return t.length<=1?t[0]||`supported`:`${t.slice(0,-1).join(`, `)} or ${t[t.length-1]}`}function F(e,t){let n=N(t);if(!n.length)return!0;let r=(e.type||``).toLowerCase(),i=(e.name||``).toLowerCase();return n.some(e=>e.startsWith(`.`)?i.endsWith(e):e.endsWith(`/*`)?r.startsWith(e.slice(0,-1)):r&&r===e?!0:!r&&(j[e]||[]).some(e=>i.endsWith(e)))}function I(e,t={}){if(!e)return null;let n=t.accept===void 0?k:t.accept,r=t.maxSizeMb||5;return F(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${P(n)} file.`}var L=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function R(){L(`wui-select`,D),L(`wui-phone`,T),L(`wui-datepicker`,v),L(`wui-autocomplete`,l),L(`wui-multiselect`,y),L(`wui-status-icon`,r)}return R(),e.DEFAULT_IMAGE_ACCEPT=k,e.DEFAULT_MAX_SIZE_MB=A,e.STATUS_TONES=n,e.WuiAutocomplete=l,e.WuiDatePicker=v,e.WuiMultiSelect=y,e.WuiPhone=T,e.WuiSelect=D,e.WuiStatusIcon=r,e.acceptLabel=P,e.defineWeborityElements=R,e.matchesAccept=F,e.validateFile=I,e})({});
122
+ </div>`,this._rendered=!0,a(this,this._value),this._wire(),this._syncReset()}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),reset:this.querySelector(`.search-select-reset`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e}=this._refs(),t=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}e&&(e.innerHTML=t?c(t):e.innerHTML,e.classList.toggle(`search-select-placeholder`,!t))}_syncReset(){let{reset:e}=this._refs();e&&(e.hidden=!(this.hasAttribute(`clearable`)&&this._value!==``&&!this.hasAttribute(`disabled`)))}_wire(){let e=this._refs();if(!e.control||!e.menu)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=e=>{let t=this._visible();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`}))},r=t=>{let n=t.trim().toLowerCase(),r=0;for(let e of this._optionEls()){let t=!n||e.textContent.toLowerCase().includes(n);e.hidden=!t,t&&(r+=1)}e.empty&&(e.empty.hidden=r>0),e.clear&&(e.clear.hidden=!n)},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),e.search&&(e.search.value=``,r(``),e.search.focus()),n(this._optionEls().findIndex(e=>e.classList.contains(`selected`)))},o=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),n(-1)},s=t=>{this.value=t.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0})),o(),e.control.focus()},c=t=>{let r=this._visible();t.key===`ArrowDown`?(t.preventDefault(),n(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),n(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&s(r[this._active])):t.key===`Escape`&&(o(),e.control.focus())};e.reset?.addEventListener(`click`,t=>{t.stopPropagation(),this.value=``,this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.control.focus()}),e.control.addEventListener(`click`,()=>i()?o():a()),e.control.addEventListener(`keydown`,e=>{if(i()){c(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),a())}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&s(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&n(this._visible().indexOf(t))}),e.optionsWrap.addEventListener(`mouseleave`,()=>n(-1)),e.search?.addEventListener(`input`,()=>{r(e.search.value),n(-1)}),e.search?.addEventListener(`keydown`,c),e.clear?.addEventListener(`click`,()=>{e.search.value=``,r(``),e.search.focus()}),e.menu.addEventListener(`keydown`,c),this._onDocClick=e=>{i()&&!this.contains(e.target)&&o()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},j=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),M=`image/png,image/jpeg,image/webp`,N=5,P={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},F={"image/png":`PNG`,"image/jpeg":`JPG`,"image/webp":`WEBP`,"image/gif":`GIF`,"image/svg+xml":`SVG`,"application/pdf":`PDF`,".png":`PNG`,".jpg":`JPG`,".jpeg":`JPG`,".webp":`WEBP`,".gif":`GIF`,".svg":`SVG`,".pdf":`PDF`},I=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function L(e){let t=[];for(let n of I(e)){let e=F[n]||(n.startsWith(`.`)?n.slice(1).toUpperCase():n.toUpperCase());t.includes(e)||t.push(e)}return t.length<=1?t[0]||`supported`:`${t.slice(0,-1).join(`, `)} or ${t[t.length-1]}`}function R(e,t){let n=I(t);if(!n.length)return!0;let r=(e.type||``).toLowerCase(),i=(e.name||``).toLowerCase();return n.some(e=>e.startsWith(`.`)?i.endsWith(e):e.endsWith(`/*`)?r.startsWith(e.slice(0,-1)):r&&r===e?!0:!r&&(P[e]||[]).some(e=>i.endsWith(e)))}function z(e,t={}){if(!e)return null;let n=t.accept===void 0?M:t.accept,r=t.maxSizeMb||5;return R(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${L(n)} file.`}var B=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function V(){B(`wui-select`,A),B(`wui-phone`,O),B(`wui-datepicker`,v),B(`wui-autocomplete`,l),B(`wui-multiselect`,y),B(`wui-otp`,w),B(`wui-status-icon`,r)}return V(),e.DEFAULT_IMAGE_ACCEPT=M,e.DEFAULT_MAX_SIZE_MB=N,e.STATUS_TONES=n,e.WuiAutocomplete=l,e.WuiDatePicker=v,e.WuiMultiSelect=y,e.WuiOtp=w,e.WuiPhone=O,e.WuiSelect=A,e.WuiStatusIcon=r,e.acceptLabel=L,e.defineWeborityElements=V,e.matchesAccept=R,e.validateFile=z,e})({});
package/dist/ui-elements.js CHANGED
@@ -298,6 +298,12 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
298
298
  <div class="datepicker-grid">${s}</div>
299
299
  <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
300
300
  }
301
+ _position(e, t) {
302
+ let n = e.getBoundingClientRect(), r = t.offsetHeight, i = window.innerHeight - n.bottom, a = i < r + 4 && n.top > i;
303
+ t.classList.toggle("drop-up", a), t.style.position = "fixed", t.style.top = a ? `${Math.max(4, n.top - r - 4)}px` : `${n.bottom + 4}px`;
304
+ let o = t.offsetWidth, s = Math.min(n.left, window.innerWidth - o - 4);
305
+ t.style.left = `${Math.max(4, s)}px`;
306
+ }
301
307
  _wire() {
302
308
  let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop");
303
309
  if (!e || !t) return;
@@ -306,7 +312,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
306
312
  let e = /* @__PURE__ */ new Date();
307
313
  this._viewY = e.getFullYear(), this._viewM = e.getMonth();
308
314
  }
309
- this._renderMonth(), t.hidden = !1, e.setAttribute("aria-expanded", "true");
315
+ this._renderMonth(), t.hidden = !1, this._position(e, t), e.setAttribute("aria-expanded", "true");
310
316
  }, i = () => {
311
317
  t.hidden = !0, e.setAttribute("aria-expanded", "false");
312
318
  };
@@ -487,7 +493,103 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
487
493
  disconnectedCallback() {
488
494
  this._onDocClick && document.removeEventListener("click", this._onDocClick);
489
495
  }
490
- }, y = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), b = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), x = [
496
+ }, y = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), b = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), x = /[^0-9]/g, S = /[^0-9a-zA-Z]/g, C = class extends HTMLElement {
497
+ static get observedAttributes() {
498
+ return [
499
+ "value",
500
+ "length",
501
+ "mode",
502
+ "disabled",
503
+ "aria-label"
504
+ ];
505
+ }
506
+ get length() {
507
+ let e = Number.parseInt(this.getAttribute("length") ?? "6", 10);
508
+ return Number.isFinite(e) && e > 0 ? e : 6;
509
+ }
510
+ set length(e) {
511
+ this.setAttribute("length", String(e));
512
+ }
513
+ get mode() {
514
+ return this.getAttribute("mode") === "alphanumeric" ? "alphanumeric" : "numeric";
515
+ }
516
+ set mode(e) {
517
+ this.setAttribute("mode", String(e ?? "numeric"));
518
+ }
519
+ get value() {
520
+ return this._value ?? "";
521
+ }
522
+ set value(e) {
523
+ this._value = this._clean(e), i(this, this._value), this._paint();
524
+ }
525
+ _clean(e) {
526
+ return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? S : x, "").slice(0, this.length);
527
+ }
528
+ connectedCallback() {
529
+ this._rendered || this.render();
530
+ }
531
+ attributeChangedCallback(e, t, n) {
532
+ this._rendered && (e === "value" ? (this._value = this._clean(n), i(this, this._value), this._paint()) : this.render());
533
+ }
534
+ render() {
535
+ this._value = this._clean(this.getAttribute("value") ?? this._value);
536
+ let e = this.length, t = this.mode === "numeric", n = this.hasAttribute("disabled"), r = Array.from({ length: e }, () => "<span class=\"otp-slot\" aria-hidden=\"true\"></span>").join(""), a = this.getAttribute("aria-label"), o = a ? ` aria-label="${a.replace(/"/g, "&quot;")}"` : "";
537
+ this.innerHTML = `
538
+ <div class="otp">
539
+ <input
540
+ class="otp-field"
541
+ type="text"
542
+ autocomplete="one-time-code"
543
+ inputmode="${t ? "numeric" : "text"}"
544
+ ${t ? "pattern=\"[0-9]*\"" : ""}${o}
545
+ autocapitalize="off"
546
+ autocorrect="off"
547
+ spellcheck="false"
548
+ ${n ? "disabled" : ""} />
549
+ <div class="otp-slots" aria-hidden="true">${r}</div>
550
+ </div>`, this._rendered = !0, i(this, this._value), this._wire(), this._paint();
551
+ }
552
+ _refs() {
553
+ return {
554
+ input: this.querySelector(".otp-field"),
555
+ slots: [...this.querySelectorAll(".otp-slot")]
556
+ };
557
+ }
558
+ _paint() {
559
+ let { input: e, slots: t } = this._refs();
560
+ if (!e || !t.length) return;
561
+ e.value !== this._value && (e.value = this._value);
562
+ let n = e.selectionStart ?? this._value.length, r = Math.min(n, t.length - 1), i = document.activeElement === e;
563
+ t.forEach((e, t) => {
564
+ e.textContent = this._value[t] ?? "", e.classList.toggle("filled", !!this._value[t]), e.classList.toggle("active", i && t === r);
565
+ });
566
+ }
567
+ _wire() {
568
+ let { input: e } = this._refs();
569
+ if (!e) return;
570
+ let t = (e) => {
571
+ let t = this._clean(e), n = t !== this._value;
572
+ this._value = t, i(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
573
+ bubbles: !0,
574
+ detail: t
575
+ }));
576
+ };
577
+ e.addEventListener("input", () => t(e.value)), e.addEventListener("paste", (e) => {
578
+ let n = e.clipboardData?.getData("text");
579
+ n != null && (e.preventDefault(), t(n));
580
+ });
581
+ for (let t of [
582
+ "keyup",
583
+ "click",
584
+ "focus",
585
+ "blur",
586
+ "select"
587
+ ]) e.addEventListener(t, () => this._paint());
588
+ document.addEventListener("selectionchange", () => {
589
+ document.activeElement === e && this._paint();
590
+ });
591
+ }
592
+ }, w = [
491
593
  [
492
594
  "AF",
493
595
  "Afghanistan",
@@ -1713,11 +1815,11 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1713
1815
  "Zimbabwe",
1714
1816
  "263"
1715
1817
  ]
1716
- ], S = (e) => (x.find((t) => t[0] === e) || [
1818
+ ], T = (e) => (w.find((t) => t[0] === e) || [
1717
1819
  "",
1718
1820
  "",
1719
1821
  ""
1720
- ])[2], C = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, w = class extends HTMLElement {
1822
+ ])[2], E = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, D = class extends HTMLElement {
1721
1823
  static get observedAttributes() {
1722
1824
  return [
1723
1825
  "value",
@@ -1736,7 +1838,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1736
1838
  this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
1737
1839
  }
1738
1840
  get value() {
1739
- return `+${S(this._country)}${this._national}`;
1841
+ return `+${T(this._country)}${this._national}`;
1740
1842
  }
1741
1843
  set value(e) {
1742
1844
  this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
@@ -1747,21 +1849,21 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1747
1849
  render() {
1748
1850
  let e = this.getAttribute("placeholder") || "Enter phone number";
1749
1851
  this._country = this.getAttribute("country") || this._country;
1750
- let t = x.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${C(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
1852
+ let t = w.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${E(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
1751
1853
  this.innerHTML = `
1752
1854
  <div class="phone-input-wrap">
1753
1855
  <div class="phone-country-adornment">
1754
1856
  <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
1755
- <span class="${C(this._country)}" data-flag aria-hidden="true"></span>
1857
+ <span class="${E(this._country)}" data-flag aria-hidden="true"></span>
1756
1858
  <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
1757
- <span class="phone-dial" data-dial>+${S(this._country)}</span>
1859
+ <span class="phone-dial" data-dial>+${T(this._country)}</span>
1758
1860
  </button>
1759
1861
  <div class="country-dropdown-menu" role="listbox" hidden>
1760
1862
  <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>
1761
1863
  <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
1762
1864
  </div>
1763
1865
  </div>
1764
- <input type="tel" class="input" placeholder="${T(e)}" value="${T(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
1866
+ <input type="tel" class="input" placeholder="${O(e)}" value="${O(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
1765
1867
  </div>`, this._rendered = !0, i(this, this.value), this._wire();
1766
1868
  }
1767
1869
  _wire() {
@@ -1786,7 +1888,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1786
1888
  }
1787
1889
  a && (a.hidden = n > 0);
1788
1890
  }, m = (e) => {
1789
- this._country = e, this.setAttribute("country", e), s && (s.className = C(e)), c && (c.textContent = `+${S(e)}`);
1891
+ this._country = e, this.setAttribute("country", e), s && (s.className = E(e)), c && (c.textContent = `+${T(e)}`);
1790
1892
  for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
1791
1893
  f(), this._commit();
1792
1894
  };
@@ -1802,7 +1904,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1802
1904
  disconnectedCallback() {
1803
1905
  this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
1804
1906
  }
1805
- }, T = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), E = class extends HTMLElement {
1907
+ }, O = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), k = class extends HTMLElement {
1806
1908
  static get observedAttributes() {
1807
1909
  return [
1808
1910
  "value",
@@ -1811,6 +1913,8 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1811
1913
  "searchable",
1812
1914
  "disabled",
1813
1915
  "compact",
1916
+ "size",
1917
+ "clearable",
1814
1918
  "aria-label"
1815
1919
  ];
1816
1920
  }
@@ -1830,7 +1934,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1830
1934
  return this._value;
1831
1935
  }
1832
1936
  set value(e) {
1833
- this._value = e == null ? "" : String(e), i(this, this._value), this._syncSelected();
1937
+ this._value = e == null ? "" : String(e), i(this, this._value), this._syncSelected(), this._syncReset();
1834
1938
  }
1835
1939
  set options(e) {
1836
1940
  this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
@@ -1853,29 +1957,31 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1853
1957
  }
1854
1958
  render() {
1855
1959
  this._snapshotDeclared();
1856
- let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.getAttribute("placeholder") || "Select...", r = this.getAttribute("search-placeholder") || "Search...", a = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
1857
- a && (this._value = String(a.value)), i(this, this._value);
1858
- let c = e.map((e) => {
1960
+ let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), a = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", c = this.getAttribute("placeholder") || "Select...", l = this.getAttribute("search-placeholder") || "Search...", u = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
1961
+ u && (this._value = String(u.value)), i(this, this._value);
1962
+ let d = e.map((e) => {
1859
1963
  let t = String(e.value) === String(this._value);
1860
- return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${D(e.value)}" aria-selected="${t}">${s(e)}</button>`;
1964
+ return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${A(e.value)}" aria-selected="${t}">${s(e)}</button>`;
1861
1965
  }).join("");
1862
1966
  this.innerHTML = `
1863
- <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}">
1864
- <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${D(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
1865
- <span class="${a ? "" : "search-select-placeholder"}" data-label>${a ? s(a) : o(n)}</span>
1967
+ <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${a}">
1968
+ <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${A(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
1969
+ <span class="${u ? "" : "search-select-placeholder"}" data-label>${u ? s(u) : o(c)}</span>
1970
+ ${n ? "<span class=\"search-select-reset\" role=\"button\" aria-label=\"Clear selection\" hidden><i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i></span>" : ""}
1866
1971
  <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
1867
1972
  </button>
1868
1973
  <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
1869
- ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${D(r)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
1870
- <div class="search-select-options">${c}<div class="search-select-empty" hidden>No matches</div></div>
1974
+ ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${A(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
1975
+ <div class="search-select-options">${d}<div class="search-select-empty" hidden>No matches</div></div>
1871
1976
  </div>
1872
- </div>`, this._rendered = !0, i(this, this._value), this._wire();
1977
+ </div>`, this._rendered = !0, i(this, this._value), this._wire(), this._syncReset();
1873
1978
  }
1874
1979
  _refs() {
1875
1980
  return {
1876
1981
  control: this.querySelector(".search-select-control"),
1877
1982
  menu: this.querySelector(".search-select-menu"),
1878
1983
  label: this.querySelector("[data-label]"),
1984
+ reset: this.querySelector(".search-select-reset"),
1879
1985
  search: this.querySelector(".search-select-input"),
1880
1986
  clear: this.querySelector(".search-select-clear"),
1881
1987
  empty: this.querySelector(".search-select-empty"),
@@ -1896,6 +2002,10 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1896
2002
  }
1897
2003
  e && (e.innerHTML = t ? s(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
1898
2004
  }
2005
+ _syncReset() {
2006
+ let { reset: e } = this._refs();
2007
+ e && (e.hidden = !(this.hasAttribute("clearable") && this._value !== "" && !this.hasAttribute("disabled")));
2008
+ }
1899
2009
  _wire() {
1900
2010
  let e = this._refs();
1901
2011
  if (!e.control || !e.menu) return;
@@ -1924,7 +2034,9 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1924
2034
  let r = this._visible();
1925
2035
  t.key === "ArrowDown" ? (t.preventDefault(), n(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), n(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && s(r[this._active])) : t.key === "Escape" && (o(), e.control.focus());
1926
2036
  };
1927
- e.control.addEventListener("click", () => i() ? o() : a()), e.control.addEventListener("keydown", (e) => {
2037
+ e.reset?.addEventListener("click", (t) => {
2038
+ t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
2039
+ }), e.control.addEventListener("click", () => i() ? o() : a()), e.control.addEventListener("keydown", (e) => {
1928
2040
  if (i()) {
1929
2041
  c(e);
1930
2042
  return;
@@ -1936,7 +2048,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1936
2048
  }), e.optionsWrap.addEventListener("mousemove", (e) => {
1937
2049
  let t = e.target.closest(".search-select-option");
1938
2050
  t && n(this._visible().indexOf(t));
1939
- }), e.search?.addEventListener("input", () => {
2051
+ }), e.optionsWrap.addEventListener("mouseleave", () => n(-1)), e.search?.addEventListener("input", () => {
1940
2052
  r(e.search.value), n(-1);
1941
2053
  }), e.search?.addEventListener("keydown", c), e.clear?.addEventListener("click", () => {
1942
2054
  e.search.value = "", r(""), e.search.focus();
@@ -1949,14 +2061,14 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1949
2061
  disconnectedCallback() {
1950
2062
  this._onDocClick && document.removeEventListener("click", this._onDocClick);
1951
2063
  }
1952
- }, D = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), O = "image/png,image/jpeg,image/webp", k = 5, A = {
2064
+ }, A = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), j = "image/png,image/jpeg,image/webp", M = 5, N = {
1953
2065
  "image/png": [".png"],
1954
2066
  "image/jpeg": [".jpg", ".jpeg"],
1955
2067
  "image/webp": [".webp"],
1956
2068
  "image/gif": [".gif"],
1957
2069
  "image/svg+xml": [".svg"],
1958
2070
  "application/pdf": [".pdf"]
1959
- }, j = {
2071
+ }, P = {
1960
2072
  "image/png": "PNG",
1961
2073
  "image/jpeg": "JPG",
1962
2074
  "image/webp": "WEBP",
@@ -1970,34 +2082,34 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
1970
2082
  ".gif": "GIF",
1971
2083
  ".svg": "SVG",
1972
2084
  ".pdf": "PDF"
1973
- }, M = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
1974
- function N(e) {
2085
+ }, F = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
2086
+ function I(e) {
1975
2087
  let t = [];
1976
- for (let n of M(e)) {
1977
- let e = j[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
2088
+ for (let n of F(e)) {
2089
+ let e = P[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
1978
2090
  t.includes(e) || t.push(e);
1979
2091
  }
1980
2092
  return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
1981
2093
  }
1982
- function P(e, t) {
1983
- let n = M(t);
2094
+ function L(e, t) {
2095
+ let n = F(t);
1984
2096
  if (!n.length) return !0;
1985
2097
  let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
1986
- return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (A[e] || []).some((e) => i.endsWith(e)));
2098
+ return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (N[e] || []).some((e) => i.endsWith(e)));
1987
2099
  }
1988
- function F(e, t = {}) {
2100
+ function R(e, t = {}) {
1989
2101
  if (!e) return null;
1990
- let n = t.accept === void 0 ? O : t.accept, r = t.maxSizeMb || 5;
1991
- return P(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${N(n)} file.`;
2102
+ let n = t.accept === void 0 ? j : t.accept, r = t.maxSizeMb || 5;
2103
+ return L(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${I(n)} file.`;
1992
2104
  }
1993
2105
  //#endregion
1994
2106
  //#region src/index.js
1995
- var I = (e, t) => {
2107
+ var z = (e, t) => {
1996
2108
  typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
1997
2109
  };
1998
- function L() {
1999
- I("wui-select", E), I("wui-phone", w), I("wui-datepicker", _), I("wui-autocomplete", c), I("wui-multiselect", v), I("wui-status-icon", n);
2110
+ function B() {
2111
+ z("wui-select", k), z("wui-phone", D), z("wui-datepicker", _), z("wui-autocomplete", c), z("wui-multiselect", v), z("wui-otp", C), z("wui-status-icon", n);
2000
2112
  }
2001
- L();
2113
+ B();
2002
2114
  //#endregion
2003
- export { O as DEFAULT_IMAGE_ACCEPT, k as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, c as WuiAutocomplete, _ as WuiDatePicker, v as WuiMultiSelect, w as WuiPhone, E as WuiSelect, n as WuiStatusIcon, N as acceptLabel, L as defineWeborityElements, P as matchesAccept, F as validateFile };
2115
+ export { j as DEFAULT_IMAGE_ACCEPT, M as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, c as WuiAutocomplete, _ as WuiDatePicker, v as WuiMultiSelect, C as WuiOtp, D as WuiPhone, k as WuiSelect, n as WuiStatusIcon, I as acceptLabel, B as defineWeborityElements, L as matchesAccept, R as validateFile };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webority/ui-elements",
3
- "version": "0.6.6",
3
+ "version": "0.6.8",
4
4
  "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "type": "module",