@webority/ui-elements 0.6.8 → 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 +163 -165
- 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>`}_position(e,t){
|
|
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,60 +262,57 @@ 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
|
}
|
|
301
308
|
_position(e, t) {
|
|
302
|
-
|
|
303
|
-
t.classList.toggle("drop-up", a), t.style.position = "fixed", t.style.top = a ? `${Math.max(4, n.top - r - 4)}px` : `${n.bottom + 4}px`;
|
|
304
|
-
let o = t.offsetWidth, s = Math.min(n.left, window.innerWidth - o - 4);
|
|
305
|
-
t.style.left = `${Math.max(4, s)}px`;
|
|
309
|
+
i(e, t);
|
|
306
310
|
}
|
|
307
311
|
_wire() {
|
|
308
312
|
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop");
|
|
309
313
|
if (!e || !t) return;
|
|
310
314
|
let n = () => !t.hidden, r = () => {
|
|
311
|
-
if (!
|
|
315
|
+
if (!_(this._value) && !this._viewNavigated) {
|
|
312
316
|
let e = /* @__PURE__ */ new Date();
|
|
313
317
|
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
314
318
|
}
|
|
@@ -337,7 +341,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
337
341
|
disconnectedCallback() {
|
|
338
342
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey);
|
|
339
343
|
}
|
|
340
|
-
},
|
|
344
|
+
}, b = class extends HTMLElement {
|
|
341
345
|
_accessibleName() {
|
|
342
346
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
343
347
|
}
|
|
@@ -369,7 +373,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
369
373
|
return this._values.slice();
|
|
370
374
|
}
|
|
371
375
|
set values(e) {
|
|
372
|
-
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();
|
|
373
377
|
}
|
|
374
378
|
set options(e) {
|
|
375
379
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -383,7 +387,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
383
387
|
e.length && (this._declared = e.map((e) => ({
|
|
384
388
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
385
389
|
label: e.innerHTML,
|
|
386
|
-
[
|
|
390
|
+
[s]: !0,
|
|
387
391
|
selected: e.hasAttribute("selected")
|
|
388
392
|
})));
|
|
389
393
|
}
|
|
@@ -396,104 +400,101 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
396
400
|
}
|
|
397
401
|
_labelHtmlFor(e) {
|
|
398
402
|
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
399
|
-
return t ?
|
|
403
|
+
return t ? l(t) : c(e);
|
|
400
404
|
}
|
|
401
405
|
render() {
|
|
402
406
|
this._snapshotDeclared();
|
|
403
407
|
let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
|
|
404
|
-
|
|
408
|
+
o(this, this._values.join(",")), this.innerHTML = `
|
|
405
409
|
<div class="search-select">
|
|
406
|
-
<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\"" : ""}>
|
|
407
411
|
<div class="ms-chips" data-chips></div>
|
|
408
412
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
409
413
|
</div>
|
|
410
414
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
411
|
-
${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>` : ""}
|
|
412
416
|
<div class="search-select-options"></div>
|
|
413
417
|
<div class="search-select-empty" hidden>No matches</div>
|
|
414
418
|
</div>
|
|
415
|
-
</div>`, this._rendered = !0,
|
|
419
|
+
</div>`, this._rendered = !0, o(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
|
|
416
420
|
}
|
|
417
421
|
_renderControl() {
|
|
418
422
|
let e = this.querySelector("[data-chips]");
|
|
419
423
|
if (!e) return;
|
|
420
424
|
let t = this.getAttribute("placeholder") || "Select…";
|
|
421
425
|
if (!this._values.length) {
|
|
422
|
-
e.innerHTML = `<span class="search-select-placeholder">${
|
|
426
|
+
e.innerHTML = `<span class="search-select-placeholder">${c(t)}</span>`;
|
|
423
427
|
return;
|
|
424
428
|
}
|
|
425
|
-
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("");
|
|
426
430
|
}
|
|
427
431
|
_renderOptions(e) {
|
|
428
432
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
429
433
|
if (!t) return;
|
|
430
434
|
let r = (e || "").trim().toLowerCase(), i = this._readOptions();
|
|
431
|
-
r && (i = i.filter((e) =>
|
|
435
|
+
r && (i = i.filter((e) => S(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
|
|
432
436
|
let t = this._values.includes(String(e.value));
|
|
433
|
-
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>`;
|
|
434
438
|
}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
|
|
435
439
|
}
|
|
436
440
|
_wire() {
|
|
437
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");
|
|
438
442
|
if (!e || !t) return;
|
|
439
|
-
let
|
|
440
|
-
let
|
|
441
|
-
t.style.position = "fixed", t.style.top = `${n.bottom + 4}px`, t.style.left = `${n.left}px`, t.style.width = `${n.width}px`;
|
|
442
|
-
}, c = () => [...this.querySelectorAll(".search-select-option")], l = () => c().filter((e) => !e.hidden), u = (e) => {
|
|
443
|
-
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();
|
|
444
445
|
this._active = e;
|
|
445
|
-
for (let e of
|
|
446
|
+
for (let e of l()) e.classList.remove("is-active");
|
|
446
447
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
447
|
-
},
|
|
448
|
-
|
|
449
|
-
}, p = () => {
|
|
450
|
-
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()));
|
|
451
450
|
}, m = () => {
|
|
452
|
-
|
|
453
|
-
}, h = (
|
|
454
|
-
|
|
455
|
-
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 }));
|
|
456
454
|
}, g = (e) => {
|
|
457
|
-
|
|
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();
|
|
458
459
|
};
|
|
459
460
|
e.addEventListener("click", (e) => {
|
|
460
461
|
let t = e.target.closest("[data-remove]");
|
|
461
462
|
if (t) {
|
|
462
|
-
e.stopPropagation(),
|
|
463
|
+
e.stopPropagation(), _(t.dataset.remove);
|
|
463
464
|
return;
|
|
464
465
|
}
|
|
465
|
-
|
|
466
|
+
f() ? m() : p();
|
|
466
467
|
}), a.addEventListener("click", (e) => {
|
|
467
468
|
let t = e.target.closest(".search-select-option");
|
|
468
|
-
t && (
|
|
469
|
+
t && (g(t.dataset.value), n?.focus());
|
|
469
470
|
}), a.addEventListener("mousemove", (e) => {
|
|
470
471
|
let t = e.target.closest(".search-select-option");
|
|
471
|
-
t && u(
|
|
472
|
+
t && d(u().indexOf(t));
|
|
472
473
|
}), n?.addEventListener("input", () => {
|
|
473
|
-
this._renderOptions(n.value), r && (r.hidden = !n.value),
|
|
474
|
+
this._renderOptions(n.value), r && (r.hidden = !n.value), d(-1);
|
|
474
475
|
});
|
|
475
|
-
let
|
|
476
|
-
let r =
|
|
477
|
-
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]);
|
|
478
479
|
};
|
|
479
|
-
n?.addEventListener("keydown",
|
|
480
|
+
n?.addEventListener("keydown", v), r?.addEventListener("click", () => {
|
|
480
481
|
n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
|
|
481
482
|
}), e.addEventListener("keydown", (e) => {
|
|
482
|
-
if (
|
|
483
|
-
|
|
483
|
+
if (f()) {
|
|
484
|
+
v(e);
|
|
484
485
|
return;
|
|
485
486
|
}
|
|
486
|
-
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
487
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), p());
|
|
487
488
|
}), this._onDocClick = (e) => {
|
|
488
|
-
|
|
489
|
+
f() && !this.contains(e.target) && m();
|
|
489
490
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
490
|
-
|
|
491
|
+
f() && c();
|
|
491
492
|
});
|
|
492
493
|
}
|
|
493
494
|
disconnectedCallback() {
|
|
494
495
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
495
496
|
}
|
|
496
|
-
},
|
|
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 {
|
|
497
498
|
static get observedAttributes() {
|
|
498
499
|
return [
|
|
499
500
|
"value",
|
|
@@ -520,20 +521,20 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
520
521
|
return this._value ?? "";
|
|
521
522
|
}
|
|
522
523
|
set value(e) {
|
|
523
|
-
this._value = this._clean(e),
|
|
524
|
+
this._value = this._clean(e), o(this, this._value), this._paint();
|
|
524
525
|
}
|
|
525
526
|
_clean(e) {
|
|
526
|
-
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);
|
|
527
528
|
}
|
|
528
529
|
connectedCallback() {
|
|
529
530
|
this._rendered || this.render();
|
|
530
531
|
}
|
|
531
532
|
attributeChangedCallback(e, t, n) {
|
|
532
|
-
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());
|
|
533
534
|
}
|
|
534
535
|
render() {
|
|
535
536
|
this._value = this._clean(this.getAttribute("value") ?? this._value);
|
|
536
|
-
let e = this.length, t = this.mode === "numeric", n = this.hasAttribute("disabled"), r = Array.from({ length: e }, () => "<span class=\"otp-slot\" aria-hidden=\"true\"></span>").join(""),
|
|
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, """)}"` : "";
|
|
537
538
|
this.innerHTML = `
|
|
538
539
|
<div class="otp">
|
|
539
540
|
<input
|
|
@@ -541,13 +542,13 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
541
542
|
type="text"
|
|
542
543
|
autocomplete="one-time-code"
|
|
543
544
|
inputmode="${t ? "numeric" : "text"}"
|
|
544
|
-
${t ? "pattern=\"[0-9]*\"" : ""}${
|
|
545
|
+
${t ? "pattern=\"[0-9]*\"" : ""}${a}
|
|
545
546
|
autocapitalize="off"
|
|
546
547
|
autocorrect="off"
|
|
547
548
|
spellcheck="false"
|
|
548
549
|
${n ? "disabled" : ""} />
|
|
549
550
|
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
550
|
-
</div>`, this._rendered = !0,
|
|
551
|
+
</div>`, this._rendered = !0, o(this, this._value), this._wire(), this._paint();
|
|
551
552
|
}
|
|
552
553
|
_refs() {
|
|
553
554
|
return {
|
|
@@ -569,7 +570,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
569
570
|
if (!e) return;
|
|
570
571
|
let t = (e) => {
|
|
571
572
|
let t = this._clean(e), n = t !== this._value;
|
|
572
|
-
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", {
|
|
573
574
|
bubbles: !0,
|
|
574
575
|
detail: t
|
|
575
576
|
}));
|
|
@@ -589,7 +590,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
589
590
|
document.activeElement === e && this._paint();
|
|
590
591
|
});
|
|
591
592
|
}
|
|
592
|
-
},
|
|
593
|
+
}, E = [
|
|
593
594
|
[
|
|
594
595
|
"AF",
|
|
595
596
|
"Afghanistan",
|
|
@@ -1815,11 +1816,11 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1815
1816
|
"Zimbabwe",
|
|
1816
1817
|
"263"
|
|
1817
1818
|
]
|
|
1818
|
-
],
|
|
1819
|
+
], D = (e) => (E.find((t) => t[0] === e) || [
|
|
1819
1820
|
"",
|
|
1820
1821
|
"",
|
|
1821
1822
|
""
|
|
1822
|
-
])[2],
|
|
1823
|
+
])[2], O = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, k = class extends HTMLElement {
|
|
1823
1824
|
static get observedAttributes() {
|
|
1824
1825
|
return [
|
|
1825
1826
|
"value",
|
|
@@ -1838,36 +1839,36 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1838
1839
|
this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
|
|
1839
1840
|
}
|
|
1840
1841
|
get value() {
|
|
1841
|
-
return `+${
|
|
1842
|
+
return `+${D(this._country)}${this._national}`;
|
|
1842
1843
|
}
|
|
1843
1844
|
set value(e) {
|
|
1844
1845
|
this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
|
|
1845
1846
|
}
|
|
1846
1847
|
_commit() {
|
|
1847
|
-
|
|
1848
|
+
o(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1848
1849
|
}
|
|
1849
1850
|
render() {
|
|
1850
1851
|
let e = this.getAttribute("placeholder") || "Enter phone number";
|
|
1851
1852
|
this._country = this.getAttribute("country") || this._country;
|
|
1852
|
-
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("");
|
|
1853
1854
|
this.innerHTML = `
|
|
1854
1855
|
<div class="phone-input-wrap">
|
|
1855
1856
|
<div class="phone-country-adornment">
|
|
1856
1857
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1857
|
-
<span class="${
|
|
1858
|
+
<span class="${O(this._country)}" data-flag aria-hidden="true"></span>
|
|
1858
1859
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
1859
|
-
<span class="phone-dial" data-dial>+${
|
|
1860
|
+
<span class="phone-dial" data-dial>+${D(this._country)}</span>
|
|
1860
1861
|
</button>
|
|
1861
1862
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
1862
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>
|
|
1863
1864
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
1864
1865
|
</div>
|
|
1865
1866
|
</div>
|
|
1866
|
-
<input type="tel" class="input" placeholder="${
|
|
1867
|
-
</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();
|
|
1868
1869
|
}
|
|
1869
1870
|
_wire() {
|
|
1870
|
-
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]");
|
|
1871
1872
|
if (!e || !t) return;
|
|
1872
1873
|
let l = () => !t.hidden, u = () => {
|
|
1873
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));
|
|
@@ -1886,25 +1887,25 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1886
1887
|
let r = !t || e.textContent.toLowerCase().includes(t);
|
|
1887
1888
|
e.hidden = !r, r && (n += 1);
|
|
1888
1889
|
}
|
|
1889
|
-
|
|
1890
|
+
i && (i.hidden = n > 0);
|
|
1890
1891
|
}, m = (e) => {
|
|
1891
|
-
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)}`);
|
|
1892
1893
|
for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
|
|
1893
1894
|
f(), this._commit();
|
|
1894
1895
|
};
|
|
1895
1896
|
e.addEventListener("click", () => l() ? f() : d()), n.addEventListener("input", () => p(n.value)), r.addEventListener("click", (e) => {
|
|
1896
1897
|
let t = e.target.closest(".country-dropdown-item");
|
|
1897
1898
|
t && m(t.dataset.iso);
|
|
1898
|
-
}),
|
|
1899
|
-
this._national =
|
|
1899
|
+
}), a.addEventListener("input", () => {
|
|
1900
|
+
this._national = a.value.replace(/[^0-9]/g, ""), this._commit();
|
|
1900
1901
|
}), this._onDocClick = (e) => {
|
|
1901
1902
|
l() && !this.contains(e.target) && f();
|
|
1902
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
1903
|
+
}, document.addEventListener("click", this._onDocClick), o(this, this.value);
|
|
1903
1904
|
}
|
|
1904
1905
|
disconnectedCallback() {
|
|
1905
1906
|
this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1906
1907
|
}
|
|
1907
|
-
},
|
|
1908
|
+
}, A = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), j = class extends HTMLElement {
|
|
1908
1909
|
static get observedAttributes() {
|
|
1909
1910
|
return [
|
|
1910
1911
|
"value",
|
|
@@ -1934,7 +1935,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1934
1935
|
return this._value;
|
|
1935
1936
|
}
|
|
1936
1937
|
set value(e) {
|
|
1937
|
-
this._value = e == null ? "" : String(e),
|
|
1938
|
+
this._value = e == null ? "" : String(e), o(this, this._value), this._syncSelected(), this._syncReset();
|
|
1938
1939
|
}
|
|
1939
1940
|
set options(e) {
|
|
1940
1941
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -1948,7 +1949,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1948
1949
|
e.length && (this._declared = e.map((e) => ({
|
|
1949
1950
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
1950
1951
|
label: e.innerHTML,
|
|
1951
|
-
[
|
|
1952
|
+
[s]: !0,
|
|
1952
1953
|
selected: e.hasAttribute("selected")
|
|
1953
1954
|
})));
|
|
1954
1955
|
}
|
|
@@ -1957,24 +1958,24 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1957
1958
|
}
|
|
1958
1959
|
render() {
|
|
1959
1960
|
this._snapshotDeclared();
|
|
1960
|
-
let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"),
|
|
1961
|
-
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);
|
|
1962
1963
|
let d = e.map((e) => {
|
|
1963
1964
|
let t = String(e.value) === String(this._value);
|
|
1964
|
-
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>`;
|
|
1965
1966
|
}).join("");
|
|
1966
1967
|
this.innerHTML = `
|
|
1967
|
-
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${
|
|
1968
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
1969
|
-
<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>
|
|
1970
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>" : ""}
|
|
1971
1972
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
1972
1973
|
</button>
|
|
1973
1974
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
1974
|
-
${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>` : ""}
|
|
1975
1976
|
<div class="search-select-options">${d}<div class="search-select-empty" hidden>No matches</div></div>
|
|
1976
1977
|
</div>
|
|
1977
|
-
</div>`, this._rendered = !0,
|
|
1978
|
+
</div>`, this._rendered = !0, o(this, this._value), this._wire(), this._syncReset();
|
|
1978
1979
|
}
|
|
1979
1980
|
_refs() {
|
|
1980
1981
|
return {
|
|
@@ -2000,7 +2001,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2000
2001
|
let t = e.dataset.value === String(this._value);
|
|
2001
2002
|
e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
|
|
2002
2003
|
}
|
|
2003
|
-
e && (e.innerHTML = t ?
|
|
2004
|
+
e && (e.innerHTML = t ? l(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
|
|
2004
2005
|
}
|
|
2005
2006
|
_syncReset() {
|
|
2006
2007
|
let { reset: e } = this._refs();
|
|
@@ -2009,10 +2010,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2009
2010
|
_wire() {
|
|
2010
2011
|
let e = this._refs();
|
|
2011
2012
|
if (!e.control || !e.menu) return;
|
|
2012
|
-
let t = () => {
|
|
2013
|
-
let t = e.control.getBoundingClientRect();
|
|
2014
|
-
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`;
|
|
2015
|
-
}, n = (e) => {
|
|
2013
|
+
let t = () => i(e.control, e.menu, { matchWidth: !0 }), n = (e) => {
|
|
2016
2014
|
let t = this._visible();
|
|
2017
2015
|
this._active = e;
|
|
2018
2016
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
@@ -2024,51 +2022,51 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2024
2022
|
e.hidden = !t, t && (r += 1);
|
|
2025
2023
|
}
|
|
2026
2024
|
e.empty && (e.empty.hidden = r > 0), e.clear && (e.clear.hidden = !n);
|
|
2027
|
-
},
|
|
2025
|
+
}, a = () => !e.menu.hidden, o = () => {
|
|
2028
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")));
|
|
2029
|
-
},
|
|
2027
|
+
}, s = () => {
|
|
2030
2028
|
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), n(-1);
|
|
2031
|
-
}, s = (t) => {
|
|
2032
|
-
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), o(), e.control.focus();
|
|
2033
2029
|
}, c = (t) => {
|
|
2030
|
+
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), s(), e.control.focus();
|
|
2031
|
+
}, l = (t) => {
|
|
2034
2032
|
let r = this._visible();
|
|
2035
|
-
t.key === "ArrowDown" ? (t.preventDefault(), n(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), n(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] &&
|
|
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());
|
|
2036
2034
|
};
|
|
2037
2035
|
e.reset?.addEventListener("click", (t) => {
|
|
2038
2036
|
t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
|
|
2039
|
-
}), e.control.addEventListener("click", () =>
|
|
2040
|
-
if (
|
|
2041
|
-
|
|
2037
|
+
}), e.control.addEventListener("click", () => a() ? s() : o()), e.control.addEventListener("keydown", (e) => {
|
|
2038
|
+
if (a()) {
|
|
2039
|
+
l(e);
|
|
2042
2040
|
return;
|
|
2043
2041
|
}
|
|
2044
|
-
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
2042
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), o());
|
|
2045
2043
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
2046
2044
|
let t = e.target.closest(".search-select-option");
|
|
2047
|
-
t &&
|
|
2045
|
+
t && c(t);
|
|
2048
2046
|
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
2049
2047
|
let t = e.target.closest(".search-select-option");
|
|
2050
2048
|
t && n(this._visible().indexOf(t));
|
|
2051
2049
|
}), e.optionsWrap.addEventListener("mouseleave", () => n(-1)), e.search?.addEventListener("input", () => {
|
|
2052
2050
|
r(e.search.value), n(-1);
|
|
2053
|
-
}), e.search?.addEventListener("keydown",
|
|
2051
|
+
}), e.search?.addEventListener("keydown", l), e.clear?.addEventListener("click", () => {
|
|
2054
2052
|
e.search.value = "", r(""), e.search.focus();
|
|
2055
|
-
}), e.menu.addEventListener("keydown",
|
|
2056
|
-
|
|
2053
|
+
}), e.menu.addEventListener("keydown", l), this._onDocClick = (e) => {
|
|
2054
|
+
a() && !this.contains(e.target) && s();
|
|
2057
2055
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
2058
|
-
|
|
2056
|
+
a() && t();
|
|
2059
2057
|
});
|
|
2060
2058
|
}
|
|
2061
2059
|
disconnectedCallback() {
|
|
2062
2060
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
2063
2061
|
}
|
|
2064
|
-
},
|
|
2062
|
+
}, M = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), N = "image/png,image/jpeg,image/webp", P = 5, F = {
|
|
2065
2063
|
"image/png": [".png"],
|
|
2066
2064
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
2067
2065
|
"image/webp": [".webp"],
|
|
2068
2066
|
"image/gif": [".gif"],
|
|
2069
2067
|
"image/svg+xml": [".svg"],
|
|
2070
2068
|
"application/pdf": [".pdf"]
|
|
2071
|
-
},
|
|
2069
|
+
}, I = {
|
|
2072
2070
|
"image/png": "PNG",
|
|
2073
2071
|
"image/jpeg": "JPG",
|
|
2074
2072
|
"image/webp": "WEBP",
|
|
@@ -2082,34 +2080,34 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2082
2080
|
".gif": "GIF",
|
|
2083
2081
|
".svg": "SVG",
|
|
2084
2082
|
".pdf": "PDF"
|
|
2085
|
-
},
|
|
2086
|
-
function
|
|
2083
|
+
}, L = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
|
|
2084
|
+
function R(e) {
|
|
2087
2085
|
let t = [];
|
|
2088
|
-
for (let n of
|
|
2089
|
-
let e =
|
|
2086
|
+
for (let n of L(e)) {
|
|
2087
|
+
let e = I[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
2090
2088
|
t.includes(e) || t.push(e);
|
|
2091
2089
|
}
|
|
2092
2090
|
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
2093
2091
|
}
|
|
2094
|
-
function
|
|
2095
|
-
let n =
|
|
2092
|
+
function z(e, t) {
|
|
2093
|
+
let n = L(t);
|
|
2096
2094
|
if (!n.length) return !0;
|
|
2097
2095
|
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
2098
|
-
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)));
|
|
2099
2097
|
}
|
|
2100
|
-
function
|
|
2098
|
+
function B(e, t = {}) {
|
|
2101
2099
|
if (!e) return null;
|
|
2102
|
-
let n = t.accept === void 0 ?
|
|
2103
|
-
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.`;
|
|
2104
2102
|
}
|
|
2105
2103
|
//#endregion
|
|
2106
2104
|
//#region src/index.js
|
|
2107
|
-
var
|
|
2105
|
+
var V = (e, t) => {
|
|
2108
2106
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
2109
2107
|
};
|
|
2110
|
-
function
|
|
2111
|
-
|
|
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);
|
|
2112
2110
|
}
|
|
2113
|
-
|
|
2111
|
+
H();
|
|
2114
2112
|
//#endregion
|
|
2115
|
-
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",
|