@webority/ui-elements 0.0.9

package/LICENSE

@@ -0,0 +1,5 @@
+Copyright (c) Webority Technologies. All rights reserved.
+
+This software and its source code are proprietary and confidential to
+Webority Technologies. Use is restricted to Webority products and teams under
+internal license. Redistribution outside Webority Technologies is prohibited.

package/dist/ui-elements.global.js

@@ -0,0 +1,63 @@
+var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`min-chars`,`debounce`,`remote`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``,this._label=``,this._optionsProp=null,this._loading=!1,this._active=-1,this._timer=null}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);let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=r(t.label)),this._syncInput()}set options(e){this._optionsProp=Array.isArray(e)?e:[],this._renderOptions()}get options(){return this._readOptions()}set loading(e){this._loading=!!e,this._renderLoading()}get loading(){return this._loading}get _remote(){return this.hasAttribute(`remote`)}get _minChars(){return Math.max(0,Number(this.getAttribute(`min-chars`))||+!!this._remote)}get _debounceMs(){let e=Number(this.getAttribute(`debounce`));return Number.isFinite(e)&&e>=0?e:250}_readOptions(){return this._optionsProp?this._optionsProp:[...this.querySelectorAll(`:scope > wui-option`)].map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML}))}render(){let e=this.getAttribute(`placeholder`)||`Search…`;this.innerHTML=`
+      <div class="search-select">
+        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false">
+          <input class="search-select-input search-select-ac-input" placeholder="${n(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``} />
+          <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
+          <button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
+        </div>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
+          <div class="search-select-options"></div>
+          <div class="search-select-empty" hidden>No matches</div>
+          <div class="search-select-hint" hidden>Type to search…</div>
+        </div>
+      </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&&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,`&quot;`).replace(/</g,`&lt;`),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=`
+      <div class="datepicker">
+        <button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
+          <span data-trigger-label class="${t?``:`search-select-placeholder`}">${t?l(this._value):e}</span>
+          <i class="bi bi-calendar3" aria-hidden="true"></i>
+        </button>
+        <div class="datepicker-pop" role="dialog" hidden></div>
+      </div>`,this._rendered=!0,this._wire()}_internalsSet(){this._internals?.setFormValue(this._value)}_syncTrigger(){let e=this.querySelector(`[data-trigger-label]`);if(!e)return;let t=c(this._value);e.textContent=t?l(this._value):this.getAttribute(`placeholder`)||`Enter Date`,e.classList.toggle(`search-select-placeholder`,!t)}_renderMonth(){let e=this.querySelector(`.datepicker-pop`),t=new Date(this._viewY,this._viewM,1).getDay(),n=new Date(this._viewY,this._viewM+1,0).getDate(),r=c(this._value),o=c(this.getAttribute(`min`)),l=c(this.getAttribute(`max`)),u=(e,t,n)=>{let r=new Date(e,t,n).getTime();return!!(o&&r<new Date(o.y,o.m,o.d).getTime()||l&&r>new Date(l.y,l.m,l.d).getTime())},d=``;for(let e=0;e<t;e++)d+=`<span class="datepicker-day is-outside"></span>`;for(let e=1;e<=n;e++){let t=s(this._viewY,this._viewM,e),n=r&&r.y===this._viewY&&r.m===this._viewM&&r.d===e,i=u(this._viewY,this._viewM,e);d+=`<button type="button" class="datepicker-day${n?` selected`:``}" data-iso="${t}"${i?` disabled`:``}>${e}</button>`}e.innerHTML=`
+      <div class="datepicker-head">
+        <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
+        <span class="datepicker-month">${i[this._viewM]} ${this._viewY}</span>
+        <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
+      </div>
+      <div class="datepicker-weekdays">${a.map(e=>`<span>${e}</span>`).join(``)}</div>
+      <div class="datepicker-grid">${d}</div>
+      <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=()=>{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._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),document.addEventListener(`keydown`,e=>{n()&&e.key===`Escape`&&i()}),this._internalsSet()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},d=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,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):[],this._internals?.setFormValue(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()}_readOptions(){return this._optionsProp?this._optionsProp:[...this.querySelectorAll(`:scope > wui-option`)].map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML}))}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?t.label:e}render(){let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;this._internals?.setFormValue(this._values.join(`,`)),this.innerHTML=`
+      <div class="search-select">
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
+          <div class="ms-chips" data-chips></div>
+          <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
+        </div>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
+          ${e?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${f(t)}" 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>`:``}
+          <div class="search-select-options"></div>
+          <div class="search-select-empty" hidden>No matches</div>
+        </div>
+      </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,`&quot;`).replace(/</g,`&lt;`),p=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`),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=`
+      <div class="phone-input-wrap">
+        <div class="phone-country-adornment">
+          <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
+            <span class="phone-flag" data-flag>${g(this._country)}</span>
+            <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
+            <span class="phone-dial" data-dial>+${_(this._country)}</span>
+          </button>
+          <div class="country-dropdown-menu" role="listbox" hidden>
+            <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>
+            <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
+          </div>
+        </div>
+        <input type="tel" class="input" placeholder="${y(e)}" value="${y(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
+      </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=``,d(``),n.focus()},u=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)},d=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)},f=e=>{this._country=e,this.setAttribute(`country`,e),o&&(o.textContent=g(e)),s&&(s.textContent=`+${_(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);u(),this._commit()};e.addEventListener(`click`,()=>c()?u():l()),n.addEventListener(`input`,()=>d(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&f(t.dataset.iso)}),a.addEventListener(`input`,()=>{this._national=a.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{c()&&!this.contains(e.target)&&u()},document.addEventListener(`click`,this._onDocClick),this._internals?.setFormValue(this.value)}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},y=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),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=`
+      <div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}">
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
+          <span class="${i?``:`search-select-placeholder`}" data-label>${i?i.label:n}</span>
+          <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
+        </button>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
+          ${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${x(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>`:``}
+          <div class="search-select-options">${a}<div class="search-select-empty" hidden>No matches</div></div>
+        </div>
+      </div>`,this._rendered=!0,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?t.label: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=>{!i()&&(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)}},x=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),S=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function C(){S(`wui-select`,b),S(`wui-phone`,v),S(`wui-datepicker`,u),S(`wui-autocomplete`,t),S(`wui-multiselect`,d)}return C(),e.WuiAutocomplete=t,e.WuiDatePicker=u,e.WuiMultiSelect=d,e.WuiPhone=v,e.WuiSelect=b,e.defineWeborityElements=C,e})({});

package/dist/ui-elements.js

@@ -0,0 +1,862 @@
+//#region src/WuiAutocomplete.js
+var e = class extends HTMLElement {
+	static formAssociated = !0;
+	static get observedAttributes() {
+		return [
+			"value",
+			"placeholder",
+			"disabled",
+			"min-chars",
+			"debounce",
+			"remote"
+		];
+	}
+	constructor() {
+		super(), this._internals = this.attachInternals ? this.attachInternals() : null, this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null;
+	}
+	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);
+		let t = this._readOptions().find((e) => String(e.value) === this._value);
+		t && (this._label = n(t.label)), this._syncInput();
+	}
+	set options(e) {
+		this._optionsProp = Array.isArray(e) ? e : [], this._renderOptions();
+	}
+	get options() {
+		return this._readOptions();
+	}
+	set loading(e) {
+		this._loading = !!e, this._renderLoading();
+	}
+	get loading() {
+		return this._loading;
+	}
+	get _remote() {
+		return this.hasAttribute("remote");
+	}
+	get _minChars() {
+		return Math.max(0, Number(this.getAttribute("min-chars")) || +!!this._remote);
+	}
+	get _debounceMs() {
+		let e = Number(this.getAttribute("debounce"));
+		return Number.isFinite(e) && e >= 0 ? e : 250;
+	}
+	_readOptions() {
+		return this._optionsProp ? this._optionsProp : [...this.querySelectorAll(":scope > wui-option")].map((e) => ({
+			value: e.getAttribute("value") ?? e.textContent.trim(),
+			label: e.innerHTML
+		}));
+	}
+	render() {
+		let e = this.getAttribute("placeholder") || "Search…";
+		this.innerHTML = `
+      <div class="search-select">
+        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false">
+          <input class="search-select-input search-select-ac-input" placeholder="${t(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
+          <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
+          <button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
+        </div>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
+          <div class="search-select-options"></div>
+          <div class="search-select-empty" hidden>No matches</div>
+          <div class="search-select-hint" hidden>Type to search…</div>
+        </div>
+      </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 && e.value));
+	}
+	_renderLoading() {
+		let { spinner: e } = this._refs();
+		e && (e.hidden = !this._loading);
+	}
+	_renderOptions(e) {
+		let r = this._refs();
+		if (!r.optionsWrap) return;
+		let i = (e ?? (r.input ? r.input.value : "")).trim().toLowerCase(), a = this._readOptions();
+		!this._remote && i && (a = a.filter((e) => n(e.label).toLowerCase().includes(i))), r.optionsWrap.innerHTML = a.map((e) => {
+			let n = String(e.value) === String(this._value);
+			return `<button type="button" role="option" class="search-select-option${n ? " selected" : ""}" data-value="${t(e.value)}" aria-selected="${n}">${e.label}</button>`;
+		}).join(""), this._active = -1;
+		let o = i.length < this._minChars;
+		r.hint && (r.hint.hidden = !(this._remote && o && !a.length)), r.empty && (r.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`;
+		}, r = () => this._optionEls().filter((e) => !e.hidden), i = (e) => {
+			let t = r();
+			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 = n(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 = r();
+			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);
+	}
+}, t = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), n = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), r = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+], i = [
+	"Su",
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa"
+], a = (e) => String(e).padStart(2, "0"), o = (e, t, n) => `${e}-${a(t + 1)}-${a(n)}`, s = (e) => {
+	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
+	return t ? {
+		y: +t[1],
+		m: t[2] - 1,
+		d: +t[3]
+	} : null;
+}, c = (e) => {
+	let t = s(e);
+	return t ? `${a(t.d)} ${r[t.m].slice(0, 3)} ${t.y}` : "";
+}, l = 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 = s(this._value);
+		t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
+      <div class="datepicker">
+        <button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? c(this._value) : e}</span>
+          <i class="bi bi-calendar3" aria-hidden="true"></i>
+        </button>
+        <div class="datepicker-pop" role="dialog" hidden></div>
+      </div>`, this._rendered = !0, this._wire();
+	}
+	_internalsSet() {
+		this._internals?.setFormValue(this._value);
+	}
+	_syncTrigger() {
+		let e = this.querySelector("[data-trigger-label]");
+		if (!e) return;
+		let t = s(this._value);
+		e.textContent = t ? c(this._value) : this.getAttribute("placeholder") || "Enter Date", e.classList.toggle("search-select-placeholder", !t);
+	}
+	_renderMonth() {
+		let e = this.querySelector(".datepicker-pop"), t = new Date(this._viewY, this._viewM, 1).getDay(), n = new Date(this._viewY, this._viewM + 1, 0).getDate(), a = s(this._value), c = s(this.getAttribute("min")), l = s(this.getAttribute("max")), u = (e, t, n) => {
+			let r = new Date(e, t, n).getTime();
+			return !!(c && r < new Date(c.y, c.m, c.d).getTime() || l && r > new Date(l.y, l.m, l.d).getTime());
+		}, d = "";
+		for (let e = 0; e < t; e++) d += "<span class=\"datepicker-day is-outside\"></span>";
+		for (let e = 1; e <= n; e++) {
+			let t = o(this._viewY, this._viewM, e), n = a && a.y === this._viewY && a.m === this._viewM && a.d === e, r = u(this._viewY, this._viewM, e);
+			d += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${r ? " disabled" : ""}>${e}</button>`;
+		}
+		e.innerHTML = `
+      <div class="datepicker-head">
+        <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
+        <span class="datepicker-month">${r[this._viewM]} ${this._viewY}</span>
+        <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
+      </div>
+      <div class="datepicker-weekdays">${i.map((e) => `<span>${e}</span>`).join("")}</div>
+      <div class="datepicker-grid">${d}</div>
+      <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 = () => {
+			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._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), document.addEventListener("keydown", (e) => {
+			n() && e.key === "Escape" && i();
+		}), this._internalsSet();
+	}
+	disconnectedCallback() {
+		this._onDocClick && document.removeEventListener("click", this._onDocClick);
+	}
+}, u = class extends HTMLElement {
+	static formAssociated = !0;
+	static get observedAttributes() {
+		return [
+			"placeholder",
+			"search-placeholder",
+			"searchable",
+			"disabled"
+		];
+	}
+	constructor() {
+		super(), this._internals = this.attachInternals ? this.attachInternals() : null, 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) : [], this._internals?.setFormValue(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();
+	}
+	_readOptions() {
+		return this._optionsProp ? this._optionsProp : [...this.querySelectorAll(":scope > wui-option")].map((e) => ({
+			value: e.getAttribute("value") ?? e.textContent.trim(),
+			label: e.innerHTML
+		}));
+	}
+	_labelFor(e) {
+		let t = this._readOptions().find((t) => String(t.value) === String(e));
+		return t ? t.label : e;
+	}
+	render() {
+		let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
+		this._internals?.setFormValue(this._values.join(",")), this.innerHTML = `
+      <div class="search-select">
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+          <div class="ms-chips" data-chips></div>
+          <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
+        </div>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
+          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${d(t)}" 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>` : ""}
+          <div class="search-select-options"></div>
+          <div class="search-select-empty" hidden>No matches</div>
+        </div>
+      </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">${f(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="${d(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) => p(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="${d(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);
+	}
+}, d = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), f = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;"), p = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), m = [
+	[
+		"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"
+	]
+], h = (e) => e.toUpperCase().replace(/./g, (e) => String.fromCodePoint(127397 + e.charCodeAt(0))), g = (e) => (m.find((t) => t[0] === e) || [
+	"",
+	"",
+	""
+])[2], _ = 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 = m.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">${h(e)}</span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
+		this.innerHTML = `
+      <div class="phone-input-wrap">
+        <div class="phone-country-adornment">
+          <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
+            <span class="phone-flag" data-flag>${h(this._country)}</span>
+            <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
+            <span class="phone-dial" data-dial>+${g(this._country)}</span>
+          </button>
+          <div class="country-dropdown-menu" role="listbox" hidden>
+            <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>
+            <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
+          </div>
+        </div>
+        <input type="tel" class="input" placeholder="${v(e)}" value="${v(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
+      </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 = "", d(""), n.focus();
+		}, u = () => {
+			t.hidden = !0, e.setAttribute("aria-expanded", "false");
+		}, d = (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);
+		}, f = (e) => {
+			this._country = e, this.setAttribute("country", e), o && (o.textContent = h(e)), s && (s.textContent = `+${g(e)}`);
+			for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
+			u(), this._commit();
+		};
+		e.addEventListener("click", () => c() ? u() : l()), n.addEventListener("input", () => d(n.value)), r.addEventListener("click", (e) => {
+			let t = e.target.closest(".country-dropdown-item");
+			t && f(t.dataset.iso);
+		}), a.addEventListener("input", () => {
+			this._national = a.value.replace(/[^0-9]/g, ""), this._commit();
+		}), this._onDocClick = (e) => {
+			c() && !this.contains(e.target) && u();
+		}, document.addEventListener("click", this._onDocClick), this._internals?.setFormValue(this.value);
+	}
+	disconnectedCallback() {
+		this._onDocClick && document.removeEventListener("click", this._onDocClick);
+	}
+}, v = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), y = 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="${b(e.value)}" aria-selected="${t}">${e.label}</button>`;
+		}).join("");
+		this.innerHTML = `
+      <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}">
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          <span class="${i ? "" : "search-select-placeholder"}" data-label>${i ? i.label : n}</span>
+          <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
+        </button>
+        <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
+          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${b(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>` : ""}
+          <div class="search-select-options">${a}<div class="search-select-empty" hidden>No matches</div></div>
+        </div>
+      </div>`, this._rendered = !0, 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 ? t.label : 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) => {
+			!i() && (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);
+	}
+}, b = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), x = (e, t) => {
+	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
+};
+function S() {
+	x("wui-select", y), x("wui-phone", _), x("wui-datepicker", l), x("wui-autocomplete", e), x("wui-multiselect", u);
+}
+S();
+//#endregion
+export { e as WuiAutocomplete, l as WuiDatePicker, u as WuiMultiSelect, _ as WuiPhone, y as WuiSelect, S as defineWeborityElements };

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@webority/ui-elements",
+  "version": "0.0.9",
+  "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.",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Webority/webority-ui.git",
+    "directory": "packages/elements"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/ui-elements.js",
+  "module": "./dist/ui-elements.js",
+  "exports": {
+    ".": "./dist/ui-elements.js",
+    "./global": "./dist/ui-elements.global.js",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/*"
+  ],
+  "devDependencies": {
+    "vite": "^8.0.12"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}