@webority/ui-elements 0.6.7 → 0.6.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui-elements.global.js +22 -22
- package/dist/ui-elements.js +166 -162
- package/package.json +1 -1
|
@@ -43,10 +43,10 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
43
43
|
<path d="M108.216 75.5971C107.507 74.8585 106.532 74.4448 105.527 74.4448H68.1816C67.177 74.4448 66.1725 74.8585 65.4929 75.5971C64.8134 76.3357 64.4293 77.3403 64.4884 78.3744L66.3202 108.688C66.6452 113.179 67.0588 118.793 77.3702 118.793H96.3384C106.65 118.793 107.063 113.208 107.388 108.688L109.22 78.4039C109.279 77.3403 108.895 76.3357 108.216 75.5971ZM91.7588 103.99H81.9202C80.7088 103.99 79.7043 102.986 79.7043 101.774C79.7043 100.563 80.7088 99.5585 81.9202 99.5585H91.7588C92.9702 99.5585 93.9747 100.563 93.9747 101.774C93.9747 102.986 92.9702 103.99 91.7588 103.99ZM94.2406 92.1721H79.4679C78.2566 92.1721 77.252 91.1676 77.252 89.9562C77.252 88.7448 78.2566 87.7403 79.4679 87.7403H94.2406C95.452 87.7403 96.4566 88.7448 96.4566 89.9562C96.4566 91.1676 95.452 92.1721 94.2406 92.1721Z" fill="white"/>
|
|
44
44
|
</g>
|
|
45
45
|
</g>
|
|
46
|
-
<defs><clipPath id="wui_delete_clip0"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath><clipPath id="wui_delete_clip1"><rect width="65" height="65" fill="white" transform="translate(54.3535 54.502)"/></clipPath></defs>`},n=Object.keys(t),r=class extends HTMLElement{static get observedAttributes(){return[`tone`,`size`]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){let e=this.getAttribute(`tone`),n=this.getAttribute(`size`)||`72`,r=t[e]||t.info;this.innerHTML=`<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`}},i=`data-wui-mirror`;function
|
|
46
|
+
<defs><clipPath id="wui_delete_clip0"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath><clipPath id="wui_delete_clip1"><rect width="65" height="65" fill="white" transform="translate(54.3535 54.502)"/></clipPath></defs>`},n=Object.keys(t),r=class extends HTMLElement{static get observedAttributes(){return[`tone`,`size`]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){let e=this.getAttribute(`tone`),n=this.getAttribute(`size`)||`72`,r=t[e]||t.info;this.innerHTML=`<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`}},i=4;function a(e,t,n={}){if(!e||!t)return;let r=e.getBoundingClientRect(),a=t.offsetHeight,o=window.innerHeight-r.bottom,s=o<a+i&&r.top>o;t.classList.toggle(`drop-up`,s),t.style.position=`fixed`,t.style.top=s?`${Math.max(i,r.top-a-i)}px`:`${r.bottom+i}px`,n.matchWidth&&(t.style.width=`${r.width}px`);let c=t.offsetWidth,l=Math.min(r.left,window.innerWidth-c-i);t.style.left=`${Math.max(i,l)}px`}var o=`data-wui-mirror`;function s(e,t){let n=e.getAttribute(`name`),r=e.querySelector(`:scope > input[${o}]`);if(!n){r?.remove();return}r||(r=document.createElement(`input`),r.type=`hidden`,r.setAttribute(o,``),e.appendChild(r)),r.name=n,r.value=t==null?``:String(t);for(let t of e.attributes)t.name.startsWith(`data-val`)&&r.setAttribute(t.name,t.value);r.disabled=e.hasAttribute(`disabled`)}var c=Symbol(`wui.trustedHtml`),l=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`).replace(/>/g,`>`).replace(/"/g,`"`).replace(/'/g,`'`),u=e=>e?.[c]?String(e.label??``):l(e==null?``:e.label),d=class extends HTMLElement{_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`min-chars`,`debounce`,`remote`,`aria-label`]}constructor(){super(),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),s(this,this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=p(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}_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,[c]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this.getAttribute(`placeholder`)||`Search…`;this.innerHTML=`
|
|
47
47
|
<div class="search-select">
|
|
48
|
-
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
49
|
-
<input class="search-select-input search-select-ac-input" placeholder="${
|
|
48
|
+
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${f(this._accessibleName())}">
|
|
49
|
+
<input class="search-select-input search-select-ac-input" placeholder="${f(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``} />
|
|
50
50
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
51
51
|
<button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
|
|
52
52
|
</div>
|
|
@@ -55,68 +55,68 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
55
55
|
<div class="search-select-empty" hidden>No matches</div>
|
|
56
56
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
57
57
|
</div>
|
|
58
|
-
</div>`,this._rendered=!0,
|
|
58
|
+
</div>`,this._rendered=!0,s(this,this._value),this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!e?.value)}_renderLoading(){let{spinner:e}=this._refs();e&&(e.hidden=!this._loading)}_renderOptions(e){let t=this._refs();if(!t.optionsWrap)return;let n=(e??(t.input?t.input.value:``)).trim().toLowerCase(),r=this._readOptions();!this._remote&&n&&(r=r.filter(e=>p(e.label).toLowerCase().includes(n))),t.optionsWrap.innerHTML=r.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${f(e.value)}" aria-selected="${t}">${u(e)}</button>`}).join(``),this._active=-1;let i=n.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&i&&!r.length)),t.empty&&(t.empty.hidden=this._loading||r.length>0||this._remote&&i)}_wire(){let e=this._refs();if(!e.control||!e.input)return;let t=()=>a(e.control,e.menu,{matchWidth:!0}),n=()=>this._optionEls().filter(e=>!e.hidden),r=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`}))},i=()=>!e.menu.hidden,o=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),this._renderOptions()},c=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),r(-1),this._syncInput()},l=t=>{this._value=t.dataset.value,this._label=p(t.innerHTML),s(this,this._value),e.input.value=this._label,this.dispatchEvent(new Event(`change`,{bubbles:!0})),c(),e.input.focus()};e.input.addEventListener(`focus`,()=>o()),e.input.addEventListener(`input`,()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),i()||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(),i()||o(),r(Math.min(this._active+1,t.length-1))):e.key===`ArrowUp`?(e.preventDefault(),r(Math.max(this._active-1,0))):e.key===`Enter`?t[this._active]&&(e.preventDefault(),l(t[this._active])):e.key===`Escape`&&c()}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&r(this._optionEls().indexOf(t))}),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,s(this,``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus()}),this._onDocClick=e=>{i()&&!this.contains(e.target)&&c()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),clearTimeout(this._timer)}},f=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),p=e=>String(e??``).replace(/<[^>]*>/g,``),m=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],h=[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`],g=e=>String(e).padStart(2,`0`),_=(e,t,n)=>`${e}-${g(t+1)}-${g(n)}`,v=e=>{let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e||``);return t?{y:+t[1],m:t[2]-1,d:+t[3]}:null},y=e=>{let t=v(e);return t?`${g(t.d)} ${m[t.m].slice(0,3)} ${t.y}`:``},b=class extends HTMLElement{static get observedAttributes(){return[`value`,`min`,`max`,`placeholder`,`disabled`]}constructor(){super(),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||``,s(this,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=v(this._value);t&&(this._viewY=t.y,this._viewM=t.m),this.innerHTML=`
|
|
59
59
|
<div class="datepicker">
|
|
60
60
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
61
|
-
<span data-trigger-label class="${t?``:`search-select-placeholder`}">${t?
|
|
61
|
+
<span data-trigger-label class="${t?``:`search-select-placeholder`}">${t?y(this._value):e}</span>
|
|
62
62
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
63
63
|
</button>
|
|
64
64
|
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
65
|
-
</div>`,this._rendered=!0,
|
|
65
|
+
</div>`,this._rendered=!0,s(this,this._value),this._wire()}_syncFormValue(){s(this,this._value)}_syncTrigger(){let e=this.querySelector(`[data-trigger-label]`);if(!e)return;let t=v(this._value);e.textContent=t?y(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=v(this._value),i=v(this.getAttribute(`min`)),a=v(this.getAttribute(`max`)),o=(e,t,n)=>{let r=new Date(e,t,n).getTime();return!!(i&&r<new Date(i.y,i.m,i.d).getTime()||a&&r>new Date(a.y,a.m,a.d).getTime())},s=``;for(let e=0;e<t;e++)s+=`<span class="datepicker-day is-outside"></span>`;for(let e=1;e<=n;e++){let t=_(this._viewY,this._viewM,e),n=r&&r.y===this._viewY&&r.m===this._viewM&&r.d===e,i=o(this._viewY,this._viewM,e);s+=`<button type="button" class="datepicker-day${n?` selected`:``}" data-iso="${t}"${i?` disabled`:``}>${e}</button>`}e.innerHTML=`
|
|
66
66
|
<div class="datepicker-head">
|
|
67
67
|
<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>
|
|
68
|
-
<span class="datepicker-month">${
|
|
68
|
+
<span class="datepicker-month">${m[this._viewM]} ${this._viewY}</span>
|
|
69
69
|
<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>
|
|
70
70
|
</div>
|
|
71
|
-
<div class="datepicker-weekdays">${
|
|
71
|
+
<div class="datepicker-weekdays">${h.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(!
|
|
73
|
+
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_position(e,t){a(e,t)}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{if(!v(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)}},x=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):[],s(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,[c]:!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?u(t):l(e)}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;s(this,this._values.join(`,`)),this.innerHTML=`
|
|
74
74
|
<div class="search-select">
|
|
75
|
-
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
75
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${S(this._accessibleName())}"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
|
|
76
76
|
<div class="ms-chips" data-chips></div>
|
|
77
77
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
78
78
|
</div>
|
|
79
79
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
80
|
-
${e?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
80
|
+
${e?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${S(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>`:``}
|
|
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,
|
|
84
|
+
</div>`,this._rendered=!0,s(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">${l(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="${S(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=>C(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="${S(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${u(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`),c=()=>a(e,t,{matchWidth:!0}),l=()=>[...this.querySelectorAll(`.search-select-option`)],u=()=>l().filter(e=>!e.hidden),d=e=>{let t=u();this._active=e;for(let e of l())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},f=()=>!t.hidden,p=()=>{o()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),c(),n&&(n.value=``,this._renderOptions(``),n.focus()))},m=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),d(-1)},h=()=>{s(this,this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},g=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:``),h()},_=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),h()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),_(t.dataset.remove);return}f()?m():p()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(g(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&d(u().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),d(-1)});let v=t=>{let r=u();t.key===`ArrowDown`?(t.preventDefault(),d(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),d(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&g(r[this._active].dataset.value)):t.key===`Escape`?(m(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&_(this._values[this._values.length-1])};n?.addEventListener(`keydown`,v),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{if(f()){v(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p())}),this._onDocClick=e=>{f()&&!this.contains(e.target)&&m()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{f()&&c()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},S=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),C=e=>String(e??``).replace(/<[^>]*>/g,``),w=/[^0-9]/g,T=/[^0-9a-zA-Z]/g,E=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),s(this,this._value),this._paint()}_clean(e){return(e==null?``:String(e)).replace(this.mode===`alphanumeric`?T:w,``).slice(0,this.length)}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?(this._value=this._clean(n),s(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`),a=i?` aria-label="${i.replace(/"/g,`"`)}"`:``;this.innerHTML=`
|
|
85
85
|
<div class="otp">
|
|
86
86
|
<input
|
|
87
87
|
class="otp-field"
|
|
88
88
|
type="text"
|
|
89
89
|
autocomplete="one-time-code"
|
|
90
90
|
inputmode="${t?`numeric`:`text`}"
|
|
91
|
-
${t?`pattern="[0-9]*"`:``}${
|
|
91
|
+
${t?`pattern="[0-9]*"`:``}${a}
|
|
92
92
|
autocapitalize="off"
|
|
93
93
|
autocorrect="off"
|
|
94
94
|
spellcheck="false"
|
|
95
95
|
${n?`disabled`:``} />
|
|
96
96
|
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
97
|
-
</div>`,this._rendered=!0,
|
|
97
|
+
</div>`,this._rendered=!0,s(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,s(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()})}},D=[[`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`]],O=e=>(D.find(t=>t[0]===e)||[``,``,``])[2],k=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,A=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`+${O(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){s(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=D.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${k(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
98
98
|
<div class="phone-input-wrap">
|
|
99
99
|
<div class="phone-country-adornment">
|
|
100
100
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
101
|
-
<span class="${
|
|
101
|
+
<span class="${k(this._country)}" data-flag aria-hidden="true"></span>
|
|
102
102
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
103
|
-
<span class="phone-dial" data-dial>+${
|
|
103
|
+
<span class="phone-dial" data-dial>+${O(this._country)}</span>
|
|
104
104
|
</button>
|
|
105
105
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
106
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>
|
|
107
107
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
108
108
|
</div>
|
|
109
109
|
</div>
|
|
110
|
-
<input type="tel" class="input" placeholder="${
|
|
111
|
-
</div>`,this._rendered=!0,
|
|
110
|
+
<input type="tel" class="input" placeholder="${j(e)}" value="${j(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
|
|
111
|
+
</div>`,this._rendered=!0,s(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`),a=this.querySelector(`input[type=tel]`),o=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),o&&(o.className=k(e)),c&&(c.textContent=`+${O(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)}),a.addEventListener(`input`,()=>{this._national=a.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{l()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),s(this,this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},j=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),M=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),s(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,[c]:!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`:``,a=this.getAttribute(`placeholder`)||`Select...`,o=this.getAttribute(`search-placeholder`)||`Search...`,c=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);c&&(this._value=String(c.value)),s(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="${N(e.value)}" aria-selected="${t}">${u(e)}</button>`}).join(``);this.innerHTML=`
|
|
112
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="${
|
|
114
|
-
<span class="${
|
|
113
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${N(this._accessibleName())}"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
114
|
+
<span class="${c?``:`search-select-placeholder`}" data-label>${c?u(c):l(a)}</span>
|
|
115
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>`:``}
|
|
116
116
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
117
117
|
</button>
|
|
118
118
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
119
|
-
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
119
|
+
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${N(o)}" 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
120
|
<div class="search-select-options">${d}<div class="search-select-empty" hidden>No matches</div></div>
|
|
121
121
|
</div>
|
|
122
|
-
</div>`,this._rendered=!0,
|
|
122
|
+
</div>`,this._rendered=!0,s(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?u(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=()=>a(e.control,e.menu,{matchWidth:!0}),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,o=()=>{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`)))},s=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),n(-1)},c=t=>{this.value=t.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0})),s(),e.control.focus()},l=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]&&c(r[this._active])):t.key===`Escape`&&(s(),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()?s():o()),e.control.addEventListener(`keydown`,e=>{if(i()){l(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),o())}),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&&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`,l),e.clear?.addEventListener(`click`,()=>{e.search.value=``,r(``),e.search.focus()}),e.menu.addEventListener(`keydown`,l),this._onDocClick=e=>{i()&&!this.contains(e.target)&&s()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},N=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),P=`image/png,image/jpeg,image/webp`,F=5,I={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},L={"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`},R=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function z(e){let t=[];for(let n of R(e)){let e=L[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 B(e,t){let n=R(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&&(I[e]||[]).some(e=>i.endsWith(e)))}function V(e,t={}){if(!e)return null;let n=t.accept===void 0?P:t.accept,r=t.maxSizeMb||5;return B(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${z(n)} file.`}var H=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function U(){H(`wui-select`,M),H(`wui-phone`,A),H(`wui-datepicker`,b),H(`wui-autocomplete`,d),H(`wui-multiselect`,x),H(`wui-otp`,E),H(`wui-status-icon`,r)}return U(),e.DEFAULT_IMAGE_ACCEPT=P,e.DEFAULT_MAX_SIZE_MB=F,e.STATUS_TONES=n,e.WuiAutocomplete=d,e.WuiDatePicker=b,e.WuiMultiSelect=x,e.WuiOtp=E,e.WuiPhone=A,e.WuiSelect=M,e.WuiStatusIcon=r,e.acceptLabel=z,e.defineWeborityElements=U,e.matchesAccept=B,e.validateFile=V,e})({});
|
package/dist/ui-elements.js
CHANGED
|
@@ -19,20 +19,30 @@ var e = {
|
|
|
19
19
|
let t = this.getAttribute("tone"), n = this.getAttribute("size") || "72", r = e[t] || e.info;
|
|
20
20
|
this.innerHTML = `<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`;
|
|
21
21
|
}
|
|
22
|
-
}, r =
|
|
23
|
-
function i(e, t) {
|
|
24
|
-
|
|
22
|
+
}, r = 4;
|
|
23
|
+
function i(e, t, n = {}) {
|
|
24
|
+
if (!e || !t) return;
|
|
25
|
+
let i = e.getBoundingClientRect(), a = t.offsetHeight, o = window.innerHeight - i.bottom, s = o < a + r && i.top > o;
|
|
26
|
+
t.classList.toggle("drop-up", s), t.style.position = "fixed", t.style.top = s ? `${Math.max(r, i.top - a - r)}px` : `${i.bottom + r}px`, n.matchWidth && (t.style.width = `${i.width}px`);
|
|
27
|
+
let c = t.offsetWidth, l = Math.min(i.left, window.innerWidth - c - r);
|
|
28
|
+
t.style.left = `${Math.max(r, l)}px`;
|
|
29
|
+
}
|
|
30
|
+
//#endregion
|
|
31
|
+
//#region src/formMirror.js
|
|
32
|
+
var a = "data-wui-mirror";
|
|
33
|
+
function o(e, t) {
|
|
34
|
+
let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${a}]`);
|
|
25
35
|
if (!n) {
|
|
26
|
-
|
|
36
|
+
r?.remove();
|
|
27
37
|
return;
|
|
28
38
|
}
|
|
29
|
-
|
|
30
|
-
for (let t of e.attributes) t.name.startsWith("data-val") &&
|
|
31
|
-
|
|
39
|
+
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(a, ""), e.appendChild(r)), r.name = n, r.value = t == null ? "" : String(t);
|
|
40
|
+
for (let t of e.attributes) t.name.startsWith("data-val") && r.setAttribute(t.name, t.value);
|
|
41
|
+
r.disabled = e.hasAttribute("disabled");
|
|
32
42
|
}
|
|
33
43
|
//#endregion
|
|
34
44
|
//#region src/optionLabel.js
|
|
35
|
-
var
|
|
45
|
+
var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"), l = (e) => e?.[s] ? String(e.label ?? "") : c(e == null ? "" : e.label), u = class extends HTMLElement {
|
|
36
46
|
_accessibleName() {
|
|
37
47
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
38
48
|
}
|
|
@@ -60,9 +70,9 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
60
70
|
return this._value;
|
|
61
71
|
}
|
|
62
72
|
set value(e) {
|
|
63
|
-
this._value = e == null ? "" : String(e),
|
|
73
|
+
this._value = e == null ? "" : String(e), o(this, this._value);
|
|
64
74
|
let t = this._readOptions().find((e) => String(e.value) === this._value);
|
|
65
|
-
t && (this._label =
|
|
75
|
+
t && (this._label = f(t.label)), this._syncInput();
|
|
66
76
|
}
|
|
67
77
|
set options(e) {
|
|
68
78
|
this._optionsProp = Array.isArray(e) ? e : [], this._renderOptions();
|
|
@@ -92,7 +102,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
92
102
|
e.length && (this._declared = e.map((e) => ({
|
|
93
103
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
94
104
|
label: e.innerHTML,
|
|
95
|
-
[
|
|
105
|
+
[s]: !0,
|
|
96
106
|
selected: e.hasAttribute("selected")
|
|
97
107
|
})));
|
|
98
108
|
}
|
|
@@ -104,8 +114,8 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
104
114
|
let e = this.getAttribute("placeholder") || "Search…";
|
|
105
115
|
this.innerHTML = `
|
|
106
116
|
<div class="search-select">
|
|
107
|
-
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
108
|
-
<input class="search-select-input search-select-ac-input" placeholder="${
|
|
117
|
+
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${d(this._accessibleName())}">
|
|
118
|
+
<input class="search-select-input search-select-ac-input" placeholder="${d(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
109
119
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
110
120
|
<button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
|
|
111
121
|
</div>
|
|
@@ -114,7 +124,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
114
124
|
<div class="search-select-empty" hidden>No matches</div>
|
|
115
125
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
116
126
|
</div>
|
|
117
|
-
</div>`, this._rendered = !0,
|
|
127
|
+
</div>`, this._rendered = !0, o(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
|
|
118
128
|
}
|
|
119
129
|
_refs() {
|
|
120
130
|
return {
|
|
@@ -143,9 +153,9 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
143
153
|
let t = this._refs();
|
|
144
154
|
if (!t.optionsWrap) return;
|
|
145
155
|
let n = (e ?? (t.input ? t.input.value : "")).trim().toLowerCase(), r = this._readOptions();
|
|
146
|
-
!this._remote && n && (r = r.filter((e) =>
|
|
156
|
+
!this._remote && n && (r = r.filter((e) => f(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
|
|
147
157
|
let t = String(e.value) === String(this._value);
|
|
148
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
158
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${d(e.value)}" aria-selected="${t}">${l(e)}</button>`;
|
|
149
159
|
}).join(""), this._active = -1;
|
|
150
160
|
let i = n.length < this._minChars;
|
|
151
161
|
t.hint && (t.hint.hidden = !(this._remote && i && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && i);
|
|
@@ -153,24 +163,21 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
153
163
|
_wire() {
|
|
154
164
|
let e = this._refs();
|
|
155
165
|
if (!e.control || !e.input) return;
|
|
156
|
-
let t = () => {
|
|
157
|
-
let t = e.control.getBoundingClientRect();
|
|
158
|
-
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`;
|
|
159
|
-
}, n = () => this._optionEls().filter((e) => !e.hidden), r = (e) => {
|
|
166
|
+
let t = () => i(e.control, e.menu, { matchWidth: !0 }), n = () => this._optionEls().filter((e) => !e.hidden), r = (e) => {
|
|
160
167
|
let t = n();
|
|
161
168
|
this._active = e;
|
|
162
169
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
163
170
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
164
|
-
}, a = () => !e.menu.hidden,
|
|
171
|
+
}, a = () => !e.menu.hidden, s = () => {
|
|
165
172
|
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
|
|
166
|
-
},
|
|
173
|
+
}, c = () => {
|
|
167
174
|
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
|
|
168
|
-
},
|
|
169
|
-
this._value = t.dataset.value, this._label =
|
|
175
|
+
}, l = (t) => {
|
|
176
|
+
this._value = t.dataset.value, this._label = f(t.innerHTML), o(this, this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), c(), e.input.focus();
|
|
170
177
|
};
|
|
171
|
-
e.input.addEventListener("focus", () =>
|
|
178
|
+
e.input.addEventListener("focus", () => s()), e.input.addEventListener("input", () => {
|
|
172
179
|
let t = e.input.value;
|
|
173
|
-
if (e.clear && (e.clear.hidden = !t), a() ||
|
|
180
|
+
if (e.clear && (e.clear.hidden = !t), a() || s(), this._remote) {
|
|
174
181
|
if (this._renderOptions(t), t.trim().length < this._minChars) return;
|
|
175
182
|
clearTimeout(this._timer), this._timer = setTimeout(() => {
|
|
176
183
|
this.dispatchEvent(new CustomEvent("search", {
|
|
@@ -181,17 +188,17 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
181
188
|
} else this._renderOptions(t);
|
|
182
189
|
}), e.input.addEventListener("keydown", (e) => {
|
|
183
190
|
let t = n();
|
|
184
|
-
e.key === "ArrowDown" ? (e.preventDefault(), a() ||
|
|
191
|
+
e.key === "ArrowDown" ? (e.preventDefault(), a() || s(), r(Math.min(this._active + 1, t.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), r(Math.max(this._active - 1, 0))) : e.key === "Enter" ? t[this._active] && (e.preventDefault(), l(t[this._active])) : e.key === "Escape" && c();
|
|
185
192
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
186
193
|
let t = e.target.closest(".search-select-option");
|
|
187
|
-
t &&
|
|
194
|
+
t && l(t);
|
|
188
195
|
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
189
196
|
let t = e.target.closest(".search-select-option");
|
|
190
197
|
t && r(this._optionEls().indexOf(t));
|
|
191
198
|
}), e.clear?.addEventListener("click", () => {
|
|
192
|
-
this._value = "", this._label = "",
|
|
199
|
+
this._value = "", this._label = "", o(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
|
|
193
200
|
}), this._onDocClick = (e) => {
|
|
194
|
-
a() && !this.contains(e.target) &&
|
|
201
|
+
a() && !this.contains(e.target) && c();
|
|
195
202
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
196
203
|
a() && t();
|
|
197
204
|
});
|
|
@@ -199,7 +206,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
199
206
|
disconnectedCallback() {
|
|
200
207
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), clearTimeout(this._timer);
|
|
201
208
|
}
|
|
202
|
-
},
|
|
209
|
+
}, d = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), f = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), p = [
|
|
203
210
|
"January",
|
|
204
211
|
"February",
|
|
205
212
|
"March",
|
|
@@ -212,7 +219,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
212
219
|
"October",
|
|
213
220
|
"November",
|
|
214
221
|
"December"
|
|
215
|
-
],
|
|
222
|
+
], m = [
|
|
216
223
|
"Su",
|
|
217
224
|
"Mo",
|
|
218
225
|
"Tu",
|
|
@@ -220,17 +227,17 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
220
227
|
"Th",
|
|
221
228
|
"Fr",
|
|
222
229
|
"Sa"
|
|
223
|
-
],
|
|
230
|
+
], h = (e) => String(e).padStart(2, "0"), g = (e, t, n) => `${e}-${h(t + 1)}-${h(n)}`, _ = (e) => {
|
|
224
231
|
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
225
232
|
return t ? {
|
|
226
233
|
y: +t[1],
|
|
227
234
|
m: t[2] - 1,
|
|
228
235
|
d: +t[3]
|
|
229
236
|
} : null;
|
|
230
|
-
},
|
|
231
|
-
let t =
|
|
232
|
-
return t ? `${
|
|
233
|
-
},
|
|
237
|
+
}, v = (e) => {
|
|
238
|
+
let t = _(e);
|
|
239
|
+
return t ? `${h(t.d)} ${p[t.m].slice(0, 3)} ${t.y}` : "";
|
|
240
|
+
}, y = class extends HTMLElement {
|
|
234
241
|
static get observedAttributes() {
|
|
235
242
|
return [
|
|
236
243
|
"value",
|
|
@@ -255,58 +262,61 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
255
262
|
return this._value;
|
|
256
263
|
}
|
|
257
264
|
set value(e) {
|
|
258
|
-
this._value = e || "",
|
|
265
|
+
this._value = e || "", o(this, this._value), this._syncTrigger(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
259
266
|
}
|
|
260
267
|
render() {
|
|
261
268
|
this._value = this.getAttribute("value") || this._value;
|
|
262
|
-
let e = this.getAttribute("placeholder") || "Enter Date", t =
|
|
269
|
+
let e = this.getAttribute("placeholder") || "Enter Date", t = _(this._value);
|
|
263
270
|
t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
|
|
264
271
|
<div class="datepicker">
|
|
265
272
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
266
|
-
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ?
|
|
273
|
+
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? v(this._value) : e}</span>
|
|
267
274
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
268
275
|
</button>
|
|
269
276
|
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
270
|
-
</div>`, this._rendered = !0,
|
|
277
|
+
</div>`, this._rendered = !0, o(this, this._value), this._wire();
|
|
271
278
|
}
|
|
272
279
|
_syncFormValue() {
|
|
273
|
-
|
|
280
|
+
o(this, this._value);
|
|
274
281
|
}
|
|
275
282
|
_syncTrigger() {
|
|
276
283
|
let e = this.querySelector("[data-trigger-label]");
|
|
277
284
|
if (!e) return;
|
|
278
|
-
let t =
|
|
279
|
-
e.textContent = t ?
|
|
285
|
+
let t = _(this._value);
|
|
286
|
+
e.textContent = t ? v(this._value) : this.getAttribute("placeholder") || "Enter Date", e.classList.toggle("search-select-placeholder", !t);
|
|
280
287
|
}
|
|
281
288
|
_renderMonth() {
|
|
282
|
-
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 =
|
|
289
|
+
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 = _(this._value), i = _(this.getAttribute("min")), a = _(this.getAttribute("max")), o = (e, t, n) => {
|
|
283
290
|
let r = new Date(e, t, n).getTime();
|
|
284
291
|
return !!(i && r < new Date(i.y, i.m, i.d).getTime() || a && r > new Date(a.y, a.m, a.d).getTime());
|
|
285
292
|
}, s = "";
|
|
286
293
|
for (let e = 0; e < t; e++) s += "<span class=\"datepicker-day is-outside\"></span>";
|
|
287
294
|
for (let e = 1; e <= n; e++) {
|
|
288
|
-
let t =
|
|
295
|
+
let t = g(this._viewY, this._viewM, e), n = r && r.y === this._viewY && r.m === this._viewM && r.d === e, i = o(this._viewY, this._viewM, e);
|
|
289
296
|
s += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${i ? " disabled" : ""}>${e}</button>`;
|
|
290
297
|
}
|
|
291
298
|
e.innerHTML = `
|
|
292
299
|
<div class="datepicker-head">
|
|
293
300
|
<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>
|
|
294
|
-
<span class="datepicker-month">${
|
|
301
|
+
<span class="datepicker-month">${p[this._viewM]} ${this._viewY}</span>
|
|
295
302
|
<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>
|
|
296
303
|
</div>
|
|
297
|
-
<div class="datepicker-weekdays">${
|
|
304
|
+
<div class="datepicker-weekdays">${m.map((e) => `<span>${e}</span>`).join("")}</div>
|
|
298
305
|
<div class="datepicker-grid">${s}</div>
|
|
299
306
|
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
|
|
300
307
|
}
|
|
308
|
+
_position(e, t) {
|
|
309
|
+
i(e, t);
|
|
310
|
+
}
|
|
301
311
|
_wire() {
|
|
302
312
|
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop");
|
|
303
313
|
if (!e || !t) return;
|
|
304
314
|
let n = () => !t.hidden, r = () => {
|
|
305
|
-
if (!
|
|
315
|
+
if (!_(this._value) && !this._viewNavigated) {
|
|
306
316
|
let e = /* @__PURE__ */ new Date();
|
|
307
317
|
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
308
318
|
}
|
|
309
|
-
this._renderMonth(), t.hidden = !1, e.setAttribute("aria-expanded", "true");
|
|
319
|
+
this._renderMonth(), t.hidden = !1, this._position(e, t), e.setAttribute("aria-expanded", "true");
|
|
310
320
|
}, i = () => {
|
|
311
321
|
t.hidden = !0, e.setAttribute("aria-expanded", "false");
|
|
312
322
|
};
|
|
@@ -331,7 +341,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
331
341
|
disconnectedCallback() {
|
|
332
342
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey);
|
|
333
343
|
}
|
|
334
|
-
},
|
|
344
|
+
}, b = class extends HTMLElement {
|
|
335
345
|
_accessibleName() {
|
|
336
346
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
337
347
|
}
|
|
@@ -363,7 +373,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
363
373
|
return this._values.slice();
|
|
364
374
|
}
|
|
365
375
|
set values(e) {
|
|
366
|
-
this._values = Array.isArray(e) ? e.map(String) : [],
|
|
376
|
+
this._values = Array.isArray(e) ? e.map(String) : [], o(this, this._values.join(",")), this._rendered && this._renderControl();
|
|
367
377
|
}
|
|
368
378
|
set options(e) {
|
|
369
379
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -377,7 +387,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
377
387
|
e.length && (this._declared = e.map((e) => ({
|
|
378
388
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
379
389
|
label: e.innerHTML,
|
|
380
|
-
[
|
|
390
|
+
[s]: !0,
|
|
381
391
|
selected: e.hasAttribute("selected")
|
|
382
392
|
})));
|
|
383
393
|
}
|
|
@@ -390,104 +400,101 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
390
400
|
}
|
|
391
401
|
_labelHtmlFor(e) {
|
|
392
402
|
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
393
|
-
return t ?
|
|
403
|
+
return t ? l(t) : c(e);
|
|
394
404
|
}
|
|
395
405
|
render() {
|
|
396
406
|
this._snapshotDeclared();
|
|
397
407
|
let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
|
|
398
|
-
|
|
408
|
+
o(this, this._values.join(",")), this.innerHTML = `
|
|
399
409
|
<div class="search-select">
|
|
400
|
-
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
410
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${x(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
|
|
401
411
|
<div class="ms-chips" data-chips></div>
|
|
402
412
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
403
413
|
</div>
|
|
404
414
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
405
|
-
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
415
|
+
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${x(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>` : ""}
|
|
406
416
|
<div class="search-select-options"></div>
|
|
407
417
|
<div class="search-select-empty" hidden>No matches</div>
|
|
408
418
|
</div>
|
|
409
|
-
</div>`, this._rendered = !0,
|
|
419
|
+
</div>`, this._rendered = !0, o(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
|
|
410
420
|
}
|
|
411
421
|
_renderControl() {
|
|
412
422
|
let e = this.querySelector("[data-chips]");
|
|
413
423
|
if (!e) return;
|
|
414
424
|
let t = this.getAttribute("placeholder") || "Select…";
|
|
415
425
|
if (!this._values.length) {
|
|
416
|
-
e.innerHTML = `<span class="search-select-placeholder">${
|
|
426
|
+
e.innerHTML = `<span class="search-select-placeholder">${c(t)}</span>`;
|
|
417
427
|
return;
|
|
418
428
|
}
|
|
419
|
-
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="${
|
|
429
|
+
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="${x(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
|
|
420
430
|
}
|
|
421
431
|
_renderOptions(e) {
|
|
422
432
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
423
433
|
if (!t) return;
|
|
424
434
|
let r = (e || "").trim().toLowerCase(), i = this._readOptions();
|
|
425
|
-
r && (i = i.filter((e) =>
|
|
435
|
+
r && (i = i.filter((e) => S(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
|
|
426
436
|
let t = this._values.includes(String(e.value));
|
|
427
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
437
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${x(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${l(e)}</span></button>`;
|
|
428
438
|
}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
|
|
429
439
|
}
|
|
430
440
|
_wire() {
|
|
431
441
|
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"), a = this.querySelector(".search-select-options");
|
|
432
442
|
if (!e || !t) return;
|
|
433
|
-
let
|
|
434
|
-
let
|
|
435
|
-
t.style.position = "fixed", t.style.top = `${n.bottom + 4}px`, t.style.left = `${n.left}px`, t.style.width = `${n.width}px`;
|
|
436
|
-
}, c = () => [...this.querySelectorAll(".search-select-option")], l = () => c().filter((e) => !e.hidden), u = (e) => {
|
|
437
|
-
let t = l();
|
|
443
|
+
let s = () => this.hasAttribute("disabled"), c = () => i(e, t, { matchWidth: !0 }), l = () => [...this.querySelectorAll(".search-select-option")], u = () => l().filter((e) => !e.hidden), d = (e) => {
|
|
444
|
+
let t = u();
|
|
438
445
|
this._active = e;
|
|
439
|
-
for (let e of
|
|
446
|
+
for (let e of l()) e.classList.remove("is-active");
|
|
440
447
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
441
|
-
},
|
|
442
|
-
|
|
443
|
-
}, p = () => {
|
|
444
|
-
t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), u(-1);
|
|
448
|
+
}, f = () => !t.hidden, p = () => {
|
|
449
|
+
s() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), c(), n && (n.value = "", this._renderOptions(""), n.focus()));
|
|
445
450
|
}, m = () => {
|
|
446
|
-
|
|
447
|
-
}, h = (
|
|
448
|
-
|
|
449
|
-
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();
|
|
451
|
+
t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), d(-1);
|
|
452
|
+
}, h = () => {
|
|
453
|
+
o(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
450
454
|
}, g = (e) => {
|
|
451
|
-
|
|
455
|
+
let t = String(e);
|
|
456
|
+
this._values.includes(t) ? this._values = this._values.filter((e) => e !== t) : this._values = [...this._values, t], this._renderControl(), this._renderOptions(n ? n.value : ""), h();
|
|
457
|
+
}, _ = (e) => {
|
|
458
|
+
this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(n ? n.value : ""), h();
|
|
452
459
|
};
|
|
453
460
|
e.addEventListener("click", (e) => {
|
|
454
461
|
let t = e.target.closest("[data-remove]");
|
|
455
462
|
if (t) {
|
|
456
|
-
e.stopPropagation(),
|
|
463
|
+
e.stopPropagation(), _(t.dataset.remove);
|
|
457
464
|
return;
|
|
458
465
|
}
|
|
459
|
-
|
|
466
|
+
f() ? m() : p();
|
|
460
467
|
}), a.addEventListener("click", (e) => {
|
|
461
468
|
let t = e.target.closest(".search-select-option");
|
|
462
|
-
t && (
|
|
469
|
+
t && (g(t.dataset.value), n?.focus());
|
|
463
470
|
}), a.addEventListener("mousemove", (e) => {
|
|
464
471
|
let t = e.target.closest(".search-select-option");
|
|
465
|
-
t && u(
|
|
472
|
+
t && d(u().indexOf(t));
|
|
466
473
|
}), n?.addEventListener("input", () => {
|
|
467
|
-
this._renderOptions(n.value), r && (r.hidden = !n.value),
|
|
474
|
+
this._renderOptions(n.value), r && (r.hidden = !n.value), d(-1);
|
|
468
475
|
});
|
|
469
|
-
let
|
|
470
|
-
let r =
|
|
471
|
-
t.key === "ArrowDown" ? (t.preventDefault(),
|
|
476
|
+
let v = (t) => {
|
|
477
|
+
let r = u();
|
|
478
|
+
t.key === "ArrowDown" ? (t.preventDefault(), d(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), d(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && g(r[this._active].dataset.value)) : t.key === "Escape" ? (m(), e.focus()) : t.key === "Backspace" && !n.value && this._values.length && _(this._values[this._values.length - 1]);
|
|
472
479
|
};
|
|
473
|
-
n?.addEventListener("keydown",
|
|
480
|
+
n?.addEventListener("keydown", v), r?.addEventListener("click", () => {
|
|
474
481
|
n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
|
|
475
482
|
}), e.addEventListener("keydown", (e) => {
|
|
476
|
-
if (
|
|
477
|
-
|
|
483
|
+
if (f()) {
|
|
484
|
+
v(e);
|
|
478
485
|
return;
|
|
479
486
|
}
|
|
480
|
-
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
487
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), p());
|
|
481
488
|
}), this._onDocClick = (e) => {
|
|
482
|
-
|
|
489
|
+
f() && !this.contains(e.target) && m();
|
|
483
490
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
484
|
-
|
|
491
|
+
f() && c();
|
|
485
492
|
});
|
|
486
493
|
}
|
|
487
494
|
disconnectedCallback() {
|
|
488
495
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
489
496
|
}
|
|
490
|
-
},
|
|
497
|
+
}, x = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), S = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), C = /[^0-9]/g, w = /[^0-9a-zA-Z]/g, T = class extends HTMLElement {
|
|
491
498
|
static get observedAttributes() {
|
|
492
499
|
return [
|
|
493
500
|
"value",
|
|
@@ -514,20 +521,20 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
514
521
|
return this._value ?? "";
|
|
515
522
|
}
|
|
516
523
|
set value(e) {
|
|
517
|
-
this._value = this._clean(e),
|
|
524
|
+
this._value = this._clean(e), o(this, this._value), this._paint();
|
|
518
525
|
}
|
|
519
526
|
_clean(e) {
|
|
520
|
-
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ?
|
|
527
|
+
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? w : C, "").slice(0, this.length);
|
|
521
528
|
}
|
|
522
529
|
connectedCallback() {
|
|
523
530
|
this._rendered || this.render();
|
|
524
531
|
}
|
|
525
532
|
attributeChangedCallback(e, t, n) {
|
|
526
|
-
this._rendered && (e === "value" ? (this._value = this._clean(n),
|
|
533
|
+
this._rendered && (e === "value" ? (this._value = this._clean(n), o(this, this._value), this._paint()) : this.render());
|
|
527
534
|
}
|
|
528
535
|
render() {
|
|
529
536
|
this._value = this._clean(this.getAttribute("value") ?? this._value);
|
|
530
|
-
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(""),
|
|
537
|
+
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"), a = i ? ` aria-label="${i.replace(/"/g, """)}"` : "";
|
|
531
538
|
this.innerHTML = `
|
|
532
539
|
<div class="otp">
|
|
533
540
|
<input
|
|
@@ -535,13 +542,13 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
535
542
|
type="text"
|
|
536
543
|
autocomplete="one-time-code"
|
|
537
544
|
inputmode="${t ? "numeric" : "text"}"
|
|
538
|
-
${t ? "pattern=\"[0-9]*\"" : ""}${
|
|
545
|
+
${t ? "pattern=\"[0-9]*\"" : ""}${a}
|
|
539
546
|
autocapitalize="off"
|
|
540
547
|
autocorrect="off"
|
|
541
548
|
spellcheck="false"
|
|
542
549
|
${n ? "disabled" : ""} />
|
|
543
550
|
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
544
|
-
</div>`, this._rendered = !0,
|
|
551
|
+
</div>`, this._rendered = !0, o(this, this._value), this._wire(), this._paint();
|
|
545
552
|
}
|
|
546
553
|
_refs() {
|
|
547
554
|
return {
|
|
@@ -563,7 +570,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
563
570
|
if (!e) return;
|
|
564
571
|
let t = (e) => {
|
|
565
572
|
let t = this._clean(e), n = t !== this._value;
|
|
566
|
-
this._value = t,
|
|
573
|
+
this._value = t, o(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
|
|
567
574
|
bubbles: !0,
|
|
568
575
|
detail: t
|
|
569
576
|
}));
|
|
@@ -583,7 +590,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
583
590
|
document.activeElement === e && this._paint();
|
|
584
591
|
});
|
|
585
592
|
}
|
|
586
|
-
},
|
|
593
|
+
}, E = [
|
|
587
594
|
[
|
|
588
595
|
"AF",
|
|
589
596
|
"Afghanistan",
|
|
@@ -1809,11 +1816,11 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1809
1816
|
"Zimbabwe",
|
|
1810
1817
|
"263"
|
|
1811
1818
|
]
|
|
1812
|
-
],
|
|
1819
|
+
], D = (e) => (E.find((t) => t[0] === e) || [
|
|
1813
1820
|
"",
|
|
1814
1821
|
"",
|
|
1815
1822
|
""
|
|
1816
|
-
])[2],
|
|
1823
|
+
])[2], O = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, k = class extends HTMLElement {
|
|
1817
1824
|
static get observedAttributes() {
|
|
1818
1825
|
return [
|
|
1819
1826
|
"value",
|
|
@@ -1832,36 +1839,36 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1832
1839
|
this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
|
|
1833
1840
|
}
|
|
1834
1841
|
get value() {
|
|
1835
|
-
return `+${
|
|
1842
|
+
return `+${D(this._country)}${this._national}`;
|
|
1836
1843
|
}
|
|
1837
1844
|
set value(e) {
|
|
1838
1845
|
this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
|
|
1839
1846
|
}
|
|
1840
1847
|
_commit() {
|
|
1841
|
-
|
|
1848
|
+
o(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1842
1849
|
}
|
|
1843
1850
|
render() {
|
|
1844
1851
|
let e = this.getAttribute("placeholder") || "Enter phone number";
|
|
1845
1852
|
this._country = this.getAttribute("country") || this._country;
|
|
1846
|
-
let t =
|
|
1853
|
+
let t = E.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${O(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
|
|
1847
1854
|
this.innerHTML = `
|
|
1848
1855
|
<div class="phone-input-wrap">
|
|
1849
1856
|
<div class="phone-country-adornment">
|
|
1850
1857
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1851
|
-
<span class="${
|
|
1858
|
+
<span class="${O(this._country)}" data-flag aria-hidden="true"></span>
|
|
1852
1859
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
1853
|
-
<span class="phone-dial" data-dial>+${
|
|
1860
|
+
<span class="phone-dial" data-dial>+${D(this._country)}</span>
|
|
1854
1861
|
</button>
|
|
1855
1862
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
1856
1863
|
<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>
|
|
1857
1864
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
1858
1865
|
</div>
|
|
1859
1866
|
</div>
|
|
1860
|
-
<input type="tel" class="input" placeholder="${
|
|
1861
|
-
</div>`, this._rendered = !0,
|
|
1867
|
+
<input type="tel" class="input" placeholder="${A(e)}" value="${A(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
1868
|
+
</div>`, this._rendered = !0, o(this, this.value), this._wire();
|
|
1862
1869
|
}
|
|
1863
1870
|
_wire() {
|
|
1864
|
-
let e = this.querySelector(".country-toggle"), t = this.querySelector(".country-dropdown-menu"), n = this.querySelector(".dropdown-search-input"), r = this.querySelector(".country-list-scroll"),
|
|
1871
|
+
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]"), s = this.querySelector("[data-flag]"), c = this.querySelector("[data-dial]");
|
|
1865
1872
|
if (!e || !t) return;
|
|
1866
1873
|
let l = () => !t.hidden, u = () => {
|
|
1867
1874
|
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));
|
|
@@ -1880,25 +1887,25 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1880
1887
|
let r = !t || e.textContent.toLowerCase().includes(t);
|
|
1881
1888
|
e.hidden = !r, r && (n += 1);
|
|
1882
1889
|
}
|
|
1883
|
-
|
|
1890
|
+
i && (i.hidden = n > 0);
|
|
1884
1891
|
}, m = (e) => {
|
|
1885
|
-
this._country = e, this.setAttribute("country", e), s && (s.className =
|
|
1892
|
+
this._country = e, this.setAttribute("country", e), s && (s.className = O(e)), c && (c.textContent = `+${D(e)}`);
|
|
1886
1893
|
for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
|
|
1887
1894
|
f(), this._commit();
|
|
1888
1895
|
};
|
|
1889
1896
|
e.addEventListener("click", () => l() ? f() : d()), n.addEventListener("input", () => p(n.value)), r.addEventListener("click", (e) => {
|
|
1890
1897
|
let t = e.target.closest(".country-dropdown-item");
|
|
1891
1898
|
t && m(t.dataset.iso);
|
|
1892
|
-
}),
|
|
1893
|
-
this._national =
|
|
1899
|
+
}), a.addEventListener("input", () => {
|
|
1900
|
+
this._national = a.value.replace(/[^0-9]/g, ""), this._commit();
|
|
1894
1901
|
}), this._onDocClick = (e) => {
|
|
1895
1902
|
l() && !this.contains(e.target) && f();
|
|
1896
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
1903
|
+
}, document.addEventListener("click", this._onDocClick), o(this, this.value);
|
|
1897
1904
|
}
|
|
1898
1905
|
disconnectedCallback() {
|
|
1899
1906
|
this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1900
1907
|
}
|
|
1901
|
-
},
|
|
1908
|
+
}, A = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), j = class extends HTMLElement {
|
|
1902
1909
|
static get observedAttributes() {
|
|
1903
1910
|
return [
|
|
1904
1911
|
"value",
|
|
@@ -1928,7 +1935,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1928
1935
|
return this._value;
|
|
1929
1936
|
}
|
|
1930
1937
|
set value(e) {
|
|
1931
|
-
this._value = e == null ? "" : String(e),
|
|
1938
|
+
this._value = e == null ? "" : String(e), o(this, this._value), this._syncSelected(), this._syncReset();
|
|
1932
1939
|
}
|
|
1933
1940
|
set options(e) {
|
|
1934
1941
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -1942,7 +1949,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1942
1949
|
e.length && (this._declared = e.map((e) => ({
|
|
1943
1950
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
1944
1951
|
label: e.innerHTML,
|
|
1945
|
-
[
|
|
1952
|
+
[s]: !0,
|
|
1946
1953
|
selected: e.hasAttribute("selected")
|
|
1947
1954
|
})));
|
|
1948
1955
|
}
|
|
@@ -1951,24 +1958,24 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1951
1958
|
}
|
|
1952
1959
|
render() {
|
|
1953
1960
|
this._snapshotDeclared();
|
|
1954
|
-
let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"),
|
|
1955
|
-
u && (this._value = String(u.value)),
|
|
1961
|
+
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" : "", a = this.getAttribute("placeholder") || "Select...", s = this.getAttribute("search-placeholder") || "Search...", u = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
|
|
1962
|
+
u && (this._value = String(u.value)), o(this, this._value);
|
|
1956
1963
|
let d = e.map((e) => {
|
|
1957
1964
|
let t = String(e.value) === String(this._value);
|
|
1958
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
1965
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${M(e.value)}" aria-selected="${t}">${l(e)}</button>`;
|
|
1959
1966
|
}).join("");
|
|
1960
1967
|
this.innerHTML = `
|
|
1961
|
-
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${
|
|
1962
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
1963
|
-
<span class="${u ? "" : "search-select-placeholder"}" data-label>${u ?
|
|
1968
|
+
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
|
|
1969
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${M(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1970
|
+
<span class="${u ? "" : "search-select-placeholder"}" data-label>${u ? l(u) : c(a)}</span>
|
|
1964
1971
|
${n ? "<span class=\"search-select-reset\" role=\"button\" aria-label=\"Clear selection\" hidden><i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i></span>" : ""}
|
|
1965
1972
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
1966
1973
|
</button>
|
|
1967
1974
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
1968
|
-
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
1975
|
+
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${M(s)}" 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>` : ""}
|
|
1969
1976
|
<div class="search-select-options">${d}<div class="search-select-empty" hidden>No matches</div></div>
|
|
1970
1977
|
</div>
|
|
1971
|
-
</div>`, this._rendered = !0,
|
|
1978
|
+
</div>`, this._rendered = !0, o(this, this._value), this._wire(), this._syncReset();
|
|
1972
1979
|
}
|
|
1973
1980
|
_refs() {
|
|
1974
1981
|
return {
|
|
@@ -1994,7 +2001,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1994
2001
|
let t = e.dataset.value === String(this._value);
|
|
1995
2002
|
e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
|
|
1996
2003
|
}
|
|
1997
|
-
e && (e.innerHTML = t ?
|
|
2004
|
+
e && (e.innerHTML = t ? l(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
|
|
1998
2005
|
}
|
|
1999
2006
|
_syncReset() {
|
|
2000
2007
|
let { reset: e } = this._refs();
|
|
@@ -2003,10 +2010,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2003
2010
|
_wire() {
|
|
2004
2011
|
let e = this._refs();
|
|
2005
2012
|
if (!e.control || !e.menu) return;
|
|
2006
|
-
let t = () => {
|
|
2007
|
-
let t = e.control.getBoundingClientRect();
|
|
2008
|
-
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`;
|
|
2009
|
-
}, n = (e) => {
|
|
2013
|
+
let t = () => i(e.control, e.menu, { matchWidth: !0 }), n = (e) => {
|
|
2010
2014
|
let t = this._visible();
|
|
2011
2015
|
this._active = e;
|
|
2012
2016
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
@@ -2018,51 +2022,51 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2018
2022
|
e.hidden = !t, t && (r += 1);
|
|
2019
2023
|
}
|
|
2020
2024
|
e.empty && (e.empty.hidden = r > 0), e.clear && (e.clear.hidden = !n);
|
|
2021
|
-
},
|
|
2025
|
+
}, a = () => !e.menu.hidden, o = () => {
|
|
2022
2026
|
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")));
|
|
2023
|
-
},
|
|
2027
|
+
}, s = () => {
|
|
2024
2028
|
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), n(-1);
|
|
2025
|
-
}, s = (t) => {
|
|
2026
|
-
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), o(), e.control.focus();
|
|
2027
2029
|
}, c = (t) => {
|
|
2030
|
+
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), s(), e.control.focus();
|
|
2031
|
+
}, l = (t) => {
|
|
2028
2032
|
let r = this._visible();
|
|
2029
|
-
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] &&
|
|
2033
|
+
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] && c(r[this._active])) : t.key === "Escape" && (s(), e.control.focus());
|
|
2030
2034
|
};
|
|
2031
2035
|
e.reset?.addEventListener("click", (t) => {
|
|
2032
2036
|
t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
|
|
2033
|
-
}), e.control.addEventListener("click", () =>
|
|
2034
|
-
if (
|
|
2035
|
-
|
|
2037
|
+
}), e.control.addEventListener("click", () => a() ? s() : o()), e.control.addEventListener("keydown", (e) => {
|
|
2038
|
+
if (a()) {
|
|
2039
|
+
l(e);
|
|
2036
2040
|
return;
|
|
2037
2041
|
}
|
|
2038
|
-
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
2042
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), o());
|
|
2039
2043
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
2040
2044
|
let t = e.target.closest(".search-select-option");
|
|
2041
|
-
t &&
|
|
2045
|
+
t && c(t);
|
|
2042
2046
|
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
2043
2047
|
let t = e.target.closest(".search-select-option");
|
|
2044
2048
|
t && n(this._visible().indexOf(t));
|
|
2045
2049
|
}), e.optionsWrap.addEventListener("mouseleave", () => n(-1)), e.search?.addEventListener("input", () => {
|
|
2046
2050
|
r(e.search.value), n(-1);
|
|
2047
|
-
}), e.search?.addEventListener("keydown",
|
|
2051
|
+
}), e.search?.addEventListener("keydown", l), e.clear?.addEventListener("click", () => {
|
|
2048
2052
|
e.search.value = "", r(""), e.search.focus();
|
|
2049
|
-
}), e.menu.addEventListener("keydown",
|
|
2050
|
-
|
|
2053
|
+
}), e.menu.addEventListener("keydown", l), this._onDocClick = (e) => {
|
|
2054
|
+
a() && !this.contains(e.target) && s();
|
|
2051
2055
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
2052
|
-
|
|
2056
|
+
a() && t();
|
|
2053
2057
|
});
|
|
2054
2058
|
}
|
|
2055
2059
|
disconnectedCallback() {
|
|
2056
2060
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
2057
2061
|
}
|
|
2058
|
-
},
|
|
2062
|
+
}, M = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), N = "image/png,image/jpeg,image/webp", P = 5, F = {
|
|
2059
2063
|
"image/png": [".png"],
|
|
2060
2064
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
2061
2065
|
"image/webp": [".webp"],
|
|
2062
2066
|
"image/gif": [".gif"],
|
|
2063
2067
|
"image/svg+xml": [".svg"],
|
|
2064
2068
|
"application/pdf": [".pdf"]
|
|
2065
|
-
},
|
|
2069
|
+
}, I = {
|
|
2066
2070
|
"image/png": "PNG",
|
|
2067
2071
|
"image/jpeg": "JPG",
|
|
2068
2072
|
"image/webp": "WEBP",
|
|
@@ -2076,34 +2080,34 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2076
2080
|
".gif": "GIF",
|
|
2077
2081
|
".svg": "SVG",
|
|
2078
2082
|
".pdf": "PDF"
|
|
2079
|
-
},
|
|
2080
|
-
function
|
|
2083
|
+
}, L = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
|
|
2084
|
+
function R(e) {
|
|
2081
2085
|
let t = [];
|
|
2082
|
-
for (let n of
|
|
2083
|
-
let e =
|
|
2086
|
+
for (let n of L(e)) {
|
|
2087
|
+
let e = I[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
2084
2088
|
t.includes(e) || t.push(e);
|
|
2085
2089
|
}
|
|
2086
2090
|
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
2087
2091
|
}
|
|
2088
|
-
function
|
|
2089
|
-
let n =
|
|
2092
|
+
function z(e, t) {
|
|
2093
|
+
let n = L(t);
|
|
2090
2094
|
if (!n.length) return !0;
|
|
2091
2095
|
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
2092
|
-
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (
|
|
2096
|
+
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (F[e] || []).some((e) => i.endsWith(e)));
|
|
2093
2097
|
}
|
|
2094
|
-
function
|
|
2098
|
+
function B(e, t = {}) {
|
|
2095
2099
|
if (!e) return null;
|
|
2096
|
-
let n = t.accept === void 0 ?
|
|
2097
|
-
return
|
|
2100
|
+
let n = t.accept === void 0 ? N : t.accept, r = t.maxSizeMb || 5;
|
|
2101
|
+
return z(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${R(n)} file.`;
|
|
2098
2102
|
}
|
|
2099
2103
|
//#endregion
|
|
2100
2104
|
//#region src/index.js
|
|
2101
|
-
var
|
|
2105
|
+
var V = (e, t) => {
|
|
2102
2106
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
2103
2107
|
};
|
|
2104
|
-
function
|
|
2105
|
-
|
|
2108
|
+
function H() {
|
|
2109
|
+
V("wui-select", j), V("wui-phone", k), V("wui-datepicker", y), V("wui-autocomplete", u), V("wui-multiselect", b), V("wui-otp", T), V("wui-status-icon", n);
|
|
2106
2110
|
}
|
|
2107
|
-
|
|
2111
|
+
H();
|
|
2108
2112
|
//#endregion
|
|
2109
|
-
export {
|
|
2113
|
+
export { N as DEFAULT_IMAGE_ACCEPT, P as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, u as WuiAutocomplete, y as WuiDatePicker, b as WuiMultiSelect, T as WuiOtp, k as WuiPhone, j as WuiSelect, n as WuiStatusIcon, R as acceptLabel, H as defineWeborityElements, z as matchesAccept, B as validateFile };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/ui-elements",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.9",
|
|
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",
|