@webority/ui-elements 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui-elements.global.js +22 -22
- package/dist/ui-elements.js +185 -150
- 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=class extends HTMLElement{
|
|
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 a(e,t){let n=e.getAttribute(`name`),r=e.querySelector(`:scope > input[${i}]`);if(!n){r?.remove();return}r||(r=document.createElement(`input`),r.type=`hidden`,r.setAttribute(i,``),e.appendChild(r)),r.name=n,r.value=t==null?``:String(t),r.disabled=e.hasAttribute(`disabled`)}var o=Symbol(`wui.trustedHtml`),s=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`).replace(/>/g,`>`).replace(/"/g,`"`).replace(/'/g,`'`),c=e=>e?.[o]?String(e.label??``):s(e==null?``:e.label),l=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),a(this,this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=d(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,[o]:!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">
|
|
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="${u(this._accessibleName())}">
|
|
49
|
+
<input class="search-select-input search-select-ac-input" placeholder="${u(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,54 +55,54 @@ 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,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=>
|
|
58
|
+
</div>`,this._rendered=!0,a(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=>d(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="${u(e.value)}" aria-selected="${t}">${c(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=()=>{let t=e.control.getBoundingClientRect();e.menu.style.position=`fixed`,e.menu.style.top=`${t.bottom+4}px`,e.menu.style.left=`${t.left}px`,e.menu.style.width=`${t.width}px`},n=()=>this._optionEls().filter(e=>!e.hidden),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()},s=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),r(-1),this._syncInput()},c=t=>{this._value=t.dataset.value,this._label=d(t.innerHTML),a(this,this._value),e.input.value=this._label,this.dispatchEvent(new Event(`change`,{bubbles:!0})),s(),e.input.focus()};e.input.addEventListener(`focus`,()=>o()),e.input.addEventListener(`input`,()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),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(),c(t[this._active])):e.key===`Escape`&&s()}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&c(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&r(this._optionEls().indexOf(t))}),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,a(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)&&s()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),clearTimeout(this._timer)}},u=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),d=e=>String(e??``).replace(/<[^>]*>/g,``),f=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],p=[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`],m=e=>String(e).padStart(2,`0`),h=(e,t,n)=>`${e}-${m(t+1)}-${m(n)}`,g=e=>{let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e||``);return t?{y:+t[1],m:t[2]-1,d:+t[3]}:null},_=e=>{let t=g(e);return t?`${m(t.d)} ${f[t.m].slice(0,3)} ${t.y}`:``},v=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||``,a(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=g(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?_(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,this._wire()}
|
|
65
|
+
</div>`,this._rendered=!0,a(this,this._value),this._wire()}_syncFormValue(){a(this,this._value)}_syncTrigger(){let e=this.querySelector(`[data-trigger-label]`);if(!e)return;let t=g(this._value);e.textContent=t?_(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=g(this._value),i=g(this.getAttribute(`min`)),a=g(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=h(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">${f[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">${
|
|
72
|
-
<div class="datepicker-grid">${
|
|
73
|
-
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{this._renderMonth(),t.hidden=!1,e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),
|
|
71
|
+
<div class="datepicker-weekdays">${p.map(e=>`<span>${e}</span>`).join(``)}</div>
|
|
72
|
+
<div class="datepicker-grid">${s}</div>
|
|
73
|
+
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{this._renderMonth(),t.hidden=!1,e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{n()&&e.key===`Escape`&&i()},document.addEventListener(`keydown`,this._onDocKey),this._syncFormValue()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),this._onDocKey&&document.removeEventListener(`keydown`,this._onDocKey)}},y=class extends HTMLElement{_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`,`aria-label`]}constructor(){super(),this._values=[],this._optionsProp=null,this._active=-1}connectedCallback(){if(!this._rendered){if(!this._valuesInit&&!this._optionsProp&&!this._values.length){let e=[...this.querySelectorAll(`:scope > wui-option[selected]`)].map(e=>e.getAttribute(`value`)??e.textContent.trim());e.length&&(this._values=e.map(String))}this._valuesInit=!0,this.render()}}attributeChangedCallback(){this._rendered&&this.render()}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],a(this,this._values.join(`,`)),this._rendered&&this._renderControl()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,[o]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?t.label:e}_labelHtmlFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?c(t):s(e)}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;a(this,this._values.join(`,`)),this.innerHTML=`
|
|
74
74
|
<div class="search-select">
|
|
75
|
-
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
|
|
75
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${b(this._accessibleName())}"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
|
|
76
76
|
<div class="ms-chips" data-chips></div>
|
|
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="${b(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,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">${g(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${h(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=>_(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="${h(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(!e||!t)return;let a=()=>this.hasAttribute(`disabled`),o=()=>{let n=e.getBoundingClientRect();t.style.position=`fixed`,t.style.top=`${n.bottom+4}px`,t.style.left=`${n.left}px`,t.style.width=`${n.width}px`},s=()=>[...this.querySelectorAll(`.search-select-option`)],c=()=>s().filter(e=>!e.hidden),l=e=>{let t=c();this._active=e;for(let e of s())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},u=()=>!t.hidden,d=()=>{a()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),o(),n&&(n.value=``,this._renderOptions(``),n.focus()))},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),l(-1)},p=()=>{this._internals?.setFormValue(this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=e=>{let t=String(e);this._values.includes(t)?this._values=this._values.filter(e=>e!==t):this._values=[...this._values,t],this._renderControl(),this._renderOptions(n?n.value:``),p()},h=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),p()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),h(t.dataset.remove);return}u()?f():d()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(m(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(c().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),l(-1)}),n?.addEventListener(`keydown`,t=>{let r=c();t.key===`ArrowDown`?(t.preventDefault(),l(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),l(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&m(r[this._active].dataset.value)):t.key===`Escape`?(f(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&h(this._values[this._values.length-1])}),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{!u()&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())}),this._onDocClick=e=>{u()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{u()&&o()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},h=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),g=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`),_=e=>String(e??``).replace(/<[^>]*>/g,``),v=[[`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`]],y=e=>(v.find(t=>t[0]===e)||[``,``,``])[2],b=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,x=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._country=`IN`,this._national=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`country`&&(this._country=n||`IN`),this.render())}get value(){return`+${y(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){this._internals?.setFormValue(this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){let e=this.getAttribute(`placeholder`)||`Enter phone number`;this._country=this.getAttribute(`country`)||this._country;let t=v.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${b(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
84
|
+
</div>`,this._rendered=!0,a(this,this._values.join(`,`)),this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`;if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${s(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${b(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>x(e.label).toLowerCase().includes(r))),t.innerHTML=i.map(e=>{let t=this._values.includes(String(e.value));return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${b(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${c(e)}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(!e||!t)return;let o=()=>this.hasAttribute(`disabled`),s=()=>{let n=e.getBoundingClientRect();t.style.position=`fixed`,t.style.top=`${n.bottom+4}px`,t.style.left=`${n.left}px`,t.style.width=`${n.width}px`},c=()=>[...this.querySelectorAll(`.search-select-option`)],l=()=>c().filter(e=>!e.hidden),u=e=>{let t=l();this._active=e;for(let e of c())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},d=()=>!t.hidden,f=()=>{o()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),s(),n&&(n.value=``,this._renderOptions(``),n.focus()))},p=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),u(-1)},m=()=>{a(this,this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},h=e=>{let t=String(e);this._values.includes(t)?this._values=this._values.filter(e=>e!==t):this._values=[...this._values,t],this._renderControl(),this._renderOptions(n?n.value:``),m()},g=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),m()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),g(t.dataset.remove);return}d()?p():f()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(h(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&u(l().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),u(-1)});let _=t=>{let r=l();t.key===`ArrowDown`?(t.preventDefault(),u(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),u(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&h(r[this._active].dataset.value)):t.key===`Escape`?(p(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&g(this._values[this._values.length-1])};n?.addEventListener(`keydown`,_),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{if(d()){_(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f())}),this._onDocClick=e=>{d()&&!this.contains(e.target)&&p()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{d()&&s()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},b=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),x=e=>String(e??``).replace(/<[^>]*>/g,``),S=[[`AF`,`Afghanistan`,`93`],[`AX`,`Åland Islands`,`358`],[`AL`,`Albania`,`355`],[`DZ`,`Algeria`,`213`],[`AS`,`American Samoa`,`1`],[`AD`,`Andorra`,`376`],[`AO`,`Angola`,`244`],[`AI`,`Anguilla`,`1`],[`AG`,`Antigua & Barbuda`,`1`],[`AR`,`Argentina`,`54`],[`AM`,`Armenia`,`374`],[`AW`,`Aruba`,`297`],[`AC`,`Ascension Island`,`247`],[`AU`,`Australia`,`61`],[`AT`,`Austria`,`43`],[`AZ`,`Azerbaijan`,`994`],[`BS`,`Bahamas`,`1`],[`BH`,`Bahrain`,`973`],[`BD`,`Bangladesh`,`880`],[`BB`,`Barbados`,`1`],[`BY`,`Belarus`,`375`],[`BE`,`Belgium`,`32`],[`BZ`,`Belize`,`501`],[`BJ`,`Benin`,`229`],[`BM`,`Bermuda`,`1`],[`BT`,`Bhutan`,`975`],[`BO`,`Bolivia`,`591`],[`BA`,`Bosnia & Herzegovina`,`387`],[`BW`,`Botswana`,`267`],[`BR`,`Brazil`,`55`],[`IO`,`British Indian Ocean Territory`,`246`],[`VG`,`British Virgin Islands`,`1`],[`BN`,`Brunei`,`673`],[`BG`,`Bulgaria`,`359`],[`BF`,`Burkina Faso`,`226`],[`BI`,`Burundi`,`257`],[`KH`,`Cambodia`,`855`],[`CM`,`Cameroon`,`237`],[`CA`,`Canada`,`1`],[`CV`,`Cape Verde`,`238`],[`BQ`,`Caribbean Netherlands`,`599`],[`KY`,`Cayman Islands`,`1`],[`CF`,`Central African Republic`,`236`],[`TD`,`Chad`,`235`],[`CL`,`Chile`,`56`],[`CN`,`China`,`86`],[`CX`,`Christmas Island`,`61`],[`CC`,`Cocos (Keeling) Islands`,`61`],[`CO`,`Colombia`,`57`],[`KM`,`Comoros`,`269`],[`CG`,`Congo - Brazzaville`,`242`],[`CD`,`Congo - Kinshasa`,`243`],[`CK`,`Cook Islands`,`682`],[`CR`,`Costa Rica`,`506`],[`CI`,`Côte d’Ivoire`,`225`],[`HR`,`Croatia`,`385`],[`CU`,`Cuba`,`53`],[`CW`,`Curaçao`,`599`],[`CY`,`Cyprus`,`357`],[`CZ`,`Czechia`,`420`],[`DK`,`Denmark`,`45`],[`DJ`,`Djibouti`,`253`],[`DM`,`Dominica`,`1`],[`DO`,`Dominican Republic`,`1`],[`EC`,`Ecuador`,`593`],[`EG`,`Egypt`,`20`],[`SV`,`El Salvador`,`503`],[`GQ`,`Equatorial Guinea`,`240`],[`ER`,`Eritrea`,`291`],[`EE`,`Estonia`,`372`],[`SZ`,`Eswatini`,`268`],[`ET`,`Ethiopia`,`251`],[`FK`,`Falkland Islands`,`500`],[`FO`,`Faroe Islands`,`298`],[`FJ`,`Fiji`,`679`],[`FI`,`Finland`,`358`],[`FR`,`France`,`33`],[`GF`,`French Guiana`,`594`],[`PF`,`French Polynesia`,`689`],[`GA`,`Gabon`,`241`],[`GM`,`Gambia`,`220`],[`GE`,`Georgia`,`995`],[`DE`,`Germany`,`49`],[`GH`,`Ghana`,`233`],[`GI`,`Gibraltar`,`350`],[`GR`,`Greece`,`30`],[`GL`,`Greenland`,`299`],[`GD`,`Grenada`,`1`],[`GP`,`Guadeloupe`,`590`],[`GU`,`Guam`,`1`],[`GT`,`Guatemala`,`502`],[`GG`,`Guernsey`,`44`],[`GN`,`Guinea`,`224`],[`GW`,`Guinea-Bissau`,`245`],[`GY`,`Guyana`,`592`],[`HT`,`Haiti`,`509`],[`HN`,`Honduras`,`504`],[`HK`,`Hong Kong SAR China`,`852`],[`HU`,`Hungary`,`36`],[`IS`,`Iceland`,`354`],[`IN`,`India`,`91`],[`ID`,`Indonesia`,`62`],[`IR`,`Iran`,`98`],[`IQ`,`Iraq`,`964`],[`IE`,`Ireland`,`353`],[`IM`,`Isle of Man`,`44`],[`IL`,`Israel`,`972`],[`IT`,`Italy`,`39`],[`JM`,`Jamaica`,`1`],[`JP`,`Japan`,`81`],[`JE`,`Jersey`,`44`],[`JO`,`Jordan`,`962`],[`KZ`,`Kazakhstan`,`7`],[`KE`,`Kenya`,`254`],[`KI`,`Kiribati`,`686`],[`XK`,`Kosovo`,`383`],[`KW`,`Kuwait`,`965`],[`KG`,`Kyrgyzstan`,`996`],[`LA`,`Laos`,`856`],[`LV`,`Latvia`,`371`],[`LB`,`Lebanon`,`961`],[`LS`,`Lesotho`,`266`],[`LR`,`Liberia`,`231`],[`LY`,`Libya`,`218`],[`LI`,`Liechtenstein`,`423`],[`LT`,`Lithuania`,`370`],[`LU`,`Luxembourg`,`352`],[`MO`,`Macao SAR China`,`853`],[`MG`,`Madagascar`,`261`],[`MW`,`Malawi`,`265`],[`MY`,`Malaysia`,`60`],[`MV`,`Maldives`,`960`],[`ML`,`Mali`,`223`],[`MT`,`Malta`,`356`],[`MH`,`Marshall Islands`,`692`],[`MQ`,`Martinique`,`596`],[`MR`,`Mauritania`,`222`],[`MU`,`Mauritius`,`230`],[`YT`,`Mayotte`,`262`],[`MX`,`Mexico`,`52`],[`FM`,`Micronesia`,`691`],[`MD`,`Moldova`,`373`],[`MC`,`Monaco`,`377`],[`MN`,`Mongolia`,`976`],[`ME`,`Montenegro`,`382`],[`MS`,`Montserrat`,`1`],[`MA`,`Morocco`,`212`],[`MZ`,`Mozambique`,`258`],[`MM`,`Myanmar (Burma)`,`95`],[`NA`,`Namibia`,`264`],[`NR`,`Nauru`,`674`],[`NP`,`Nepal`,`977`],[`NL`,`Netherlands`,`31`],[`NC`,`New Caledonia`,`687`],[`NZ`,`New Zealand`,`64`],[`NI`,`Nicaragua`,`505`],[`NE`,`Niger`,`227`],[`NG`,`Nigeria`,`234`],[`NU`,`Niue`,`683`],[`NF`,`Norfolk Island`,`672`],[`KP`,`North Korea`,`850`],[`MK`,`North Macedonia`,`389`],[`MP`,`Northern Mariana Islands`,`1`],[`NO`,`Norway`,`47`],[`OM`,`Oman`,`968`],[`PK`,`Pakistan`,`92`],[`PW`,`Palau`,`680`],[`PS`,`Palestinian Territories`,`970`],[`PA`,`Panama`,`507`],[`PG`,`Papua New Guinea`,`675`],[`PY`,`Paraguay`,`595`],[`PE`,`Peru`,`51`],[`PH`,`Philippines`,`63`],[`PL`,`Poland`,`48`],[`PT`,`Portugal`,`351`],[`PR`,`Puerto Rico`,`1`],[`QA`,`Qatar`,`974`],[`RE`,`Réunion`,`262`],[`RO`,`Romania`,`40`],[`RU`,`Russia`,`7`],[`RW`,`Rwanda`,`250`],[`WS`,`Samoa`,`685`],[`SM`,`San Marino`,`378`],[`ST`,`São Tomé & Príncipe`,`239`],[`SA`,`Saudi Arabia`,`966`],[`SN`,`Senegal`,`221`],[`RS`,`Serbia`,`381`],[`SC`,`Seychelles`,`248`],[`SL`,`Sierra Leone`,`232`],[`SG`,`Singapore`,`65`],[`SX`,`Sint Maarten`,`1`],[`SK`,`Slovakia`,`421`],[`SI`,`Slovenia`,`386`],[`SB`,`Solomon Islands`,`677`],[`SO`,`Somalia`,`252`],[`ZA`,`South Africa`,`27`],[`KR`,`South Korea`,`82`],[`SS`,`South Sudan`,`211`],[`ES`,`Spain`,`34`],[`LK`,`Sri Lanka`,`94`],[`BL`,`St. Barthélemy`,`590`],[`SH`,`St. Helena`,`290`],[`KN`,`St. Kitts & Nevis`,`1`],[`LC`,`St. Lucia`,`1`],[`MF`,`St. Martin`,`590`],[`PM`,`St. Pierre & Miquelon`,`508`],[`VC`,`St. Vincent & Grenadines`,`1`],[`SD`,`Sudan`,`249`],[`SR`,`Suriname`,`597`],[`SJ`,`Svalbard & Jan Mayen`,`47`],[`SE`,`Sweden`,`46`],[`CH`,`Switzerland`,`41`],[`SY`,`Syria`,`963`],[`TW`,`Taiwan`,`886`],[`TJ`,`Tajikistan`,`992`],[`TZ`,`Tanzania`,`255`],[`TH`,`Thailand`,`66`],[`TL`,`Timor-Leste`,`670`],[`TG`,`Togo`,`228`],[`TK`,`Tokelau`,`690`],[`TO`,`Tonga`,`676`],[`TT`,`Trinidad & Tobago`,`1`],[`TA`,`Tristan da Cunha`,`290`],[`TN`,`Tunisia`,`216`],[`TR`,`Türkiye`,`90`],[`TM`,`Turkmenistan`,`993`],[`TC`,`Turks & Caicos Islands`,`1`],[`TV`,`Tuvalu`,`688`],[`VI`,`U.S. Virgin Islands`,`1`],[`UG`,`Uganda`,`256`],[`UA`,`Ukraine`,`380`],[`AE`,`United Arab Emirates`,`971`],[`GB`,`United Kingdom`,`44`],[`US`,`United States`,`1`],[`UY`,`Uruguay`,`598`],[`UZ`,`Uzbekistan`,`998`],[`VU`,`Vanuatu`,`678`],[`VA`,`Vatican City`,`39`],[`VE`,`Venezuela`,`58`],[`VN`,`Vietnam`,`84`],[`WF`,`Wallis & Futuna`,`681`],[`EH`,`Western Sahara`,`212`],[`YE`,`Yemen`,`967`],[`ZM`,`Zambia`,`260`],[`ZW`,`Zimbabwe`,`263`]],C=e=>(S.find(t=>t[0]===e)||[``,``,``])[2],w=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,T=class extends HTMLElement{static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._country=`IN`,this._national=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`country`&&(this._country=n||`IN`),this.render())}get value(){return`+${C(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){a(this,this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){let e=this.getAttribute(`placeholder`)||`Enter phone number`;this._country=this.getAttribute(`country`)||this._country;let t=S.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${w(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
85
85
|
<div class="phone-input-wrap">
|
|
86
86
|
<div class="phone-country-adornment">
|
|
87
87
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
88
|
-
<span class="${
|
|
88
|
+
<span class="${w(this._country)}" data-flag aria-hidden="true"></span>
|
|
89
89
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
90
|
-
<span class="phone-dial" data-dial>+${
|
|
90
|
+
<span class="phone-dial" data-dial>+${C(this._country)}</span>
|
|
91
91
|
</button>
|
|
92
92
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
93
93
|
<div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
|
|
94
94
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
95
95
|
</div>
|
|
96
96
|
</div>
|
|
97
|
-
<input type="tel" class="input" placeholder="${
|
|
98
|
-
</div>`,this._rendered=!0,this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),
|
|
97
|
+
<input type="tel" class="input" placeholder="${E(e)}" value="${E(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
|
|
98
|
+
</div>`,this._rendered=!0,a(this,this.value),this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),o=this.querySelector(`input[type=tel]`),s=this.querySelector(`[data-flag]`),c=this.querySelector(`[data-dial]`);if(!e||!t)return;let l=()=>!t.hidden,u=()=>{let n=e.getBoundingClientRect(),r=t.offsetWidth||320,i=t.offsetHeight||320,a=window.innerHeight-n.bottom,o=a<i+6&&n.top>a?n.top-i-6:n.bottom+6,s=Math.min(Math.max(8,n.left),Math.max(8,window.innerWidth-r-8));t.style.top=`${Math.max(8,o)}px`,t.style.left=`${s}px`},d=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,p(``),u(),n.focus()},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{l()&&u()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let p=e=>{let t=e.trim().toLowerCase(),n=0;for(let e of r.querySelectorAll(`.country-dropdown-item`)){let r=!t||e.textContent.toLowerCase().includes(t);e.hidden=!r,r&&(n+=1)}i&&(i.hidden=n>0)},m=e=>{this._country=e,this.setAttribute(`country`,e),s&&(s.className=w(e)),c&&(c.textContent=`+${C(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);f(),this._commit()};e.addEventListener(`click`,()=>l()?f():d()),n.addEventListener(`input`,()=>p(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&m(t.dataset.iso)}),o.addEventListener(`input`,()=>{this._national=o.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{l()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),a(this,this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},E=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),D=class extends HTMLElement{static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`,`aria-label`]}_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}constructor(){super(),this._value=``,this._optionsProp=null,this._active=-1}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?this.value=n:this.render())}get value(){return this._value}set value(e){this._value=e==null?``:String(e),a(this,this._value),this._syncSelected()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,[o]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.getAttribute(`placeholder`)||`Select...`,r=this.getAttribute(`search-placeholder`)||`Search...`,i=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);i&&(this._value=String(i.value)),a(this,this._value);let o=e.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${O(e.value)}" aria-selected="${t}">${c(e)}</button>`}).join(``);this.innerHTML=`
|
|
99
99
|
<div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}">
|
|
100
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
101
|
-
<span class="${i?``:`search-select-placeholder`}" data-label>${i?i
|
|
100
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${O(this._accessibleName())}"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
101
|
+
<span class="${i?``:`search-select-placeholder`}" data-label>${i?c(i):s(n)}</span>
|
|
102
102
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
103
103
|
</button>
|
|
104
104
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
105
|
-
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
106
|
-
<div class="search-select-options">${
|
|
105
|
+
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${O(r)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>`:``}
|
|
106
|
+
<div class="search-select-options">${o}<div class="search-select-empty" hidden>No matches</div></div>
|
|
107
107
|
</div>
|
|
108
|
-
</div>`,this._rendered=!0,this._wire()}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e}=this._refs(),t=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}e&&(e.innerHTML=t?t
|
|
108
|
+
</div>`,this._rendered=!0,a(this,this._value),this._wire()}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e}=this._refs(),t=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}e&&(e.innerHTML=t?c(t):e.innerHTML,e.classList.toggle(`search-select-placeholder`,!t))}_wire(){let e=this._refs();if(!e.control||!e.menu)return;let t=()=>{let t=e.control.getBoundingClientRect();e.menu.style.position=`fixed`,e.menu.style.top=`${t.bottom+4}px`,e.menu.style.left=`${t.left}px`,e.menu.style.width=`${t.width}px`},n=e=>{let t=this._visible();this._active=e;for(let e of this._optionEls())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},r=t=>{let n=t.trim().toLowerCase(),r=0;for(let e of this._optionEls()){let t=!n||e.textContent.toLowerCase().includes(n);e.hidden=!t,t&&(r+=1)}e.empty&&(e.empty.hidden=r>0),e.clear&&(e.clear.hidden=!n)},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),e.search&&(e.search.value=``,r(``),e.search.focus()),n(this._optionEls().findIndex(e=>e.classList.contains(`selected`)))},o=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),n(-1)},s=t=>{this.value=t.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0})),o(),e.control.focus()},c=t=>{let r=this._visible();t.key===`ArrowDown`?(t.preventDefault(),n(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),n(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&s(r[this._active])):t.key===`Escape`&&(o(),e.control.focus())};e.control.addEventListener(`click`,()=>i()?o():a()),e.control.addEventListener(`keydown`,e=>{if(i()){c(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),a())}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&s(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&n(this._visible().indexOf(t))}),e.search?.addEventListener(`input`,()=>{r(e.search.value),n(-1)}),e.search?.addEventListener(`keydown`,c),e.clear?.addEventListener(`click`,()=>{e.search.value=``,r(``),e.search.focus()}),e.menu.addEventListener(`keydown`,c),this._onDocClick=e=>{i()&&!this.contains(e.target)&&o()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},O=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),k=`image/png,image/jpeg,image/webp`,A=5,j={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},M={"image/png":`PNG`,"image/jpeg":`JPG`,"image/webp":`WEBP`,"image/gif":`GIF`,"image/svg+xml":`SVG`,"application/pdf":`PDF`,".png":`PNG`,".jpg":`JPG`,".jpeg":`JPG`,".webp":`WEBP`,".gif":`GIF`,".svg":`SVG`,".pdf":`PDF`},N=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function P(e){let t=[];for(let n of N(e)){let e=M[n]||(n.startsWith(`.`)?n.slice(1).toUpperCase():n.toUpperCase());t.includes(e)||t.push(e)}return t.length<=1?t[0]||`supported`:`${t.slice(0,-1).join(`, `)} or ${t[t.length-1]}`}function F(e,t){let n=N(t);if(!n.length)return!0;let r=(e.type||``).toLowerCase(),i=(e.name||``).toLowerCase();return n.some(e=>e.startsWith(`.`)?i.endsWith(e):e.endsWith(`/*`)?r.startsWith(e.slice(0,-1)):r&&r===e?!0:!r&&(j[e]||[]).some(e=>i.endsWith(e)))}function I(e,t={}){if(!e)return null;let n=t.accept===void 0?k:t.accept,r=t.maxSizeMb||5;return F(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${P(n)} file.`}var L=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function R(){L(`wui-select`,D),L(`wui-phone`,T),L(`wui-datepicker`,v),L(`wui-autocomplete`,l),L(`wui-multiselect`,y),L(`wui-status-icon`,r)}return R(),e.DEFAULT_IMAGE_ACCEPT=k,e.DEFAULT_MAX_SIZE_MB=A,e.STATUS_TONES=n,e.WuiAutocomplete=l,e.WuiDatePicker=v,e.WuiMultiSelect=y,e.WuiPhone=T,e.WuiSelect=D,e.WuiStatusIcon=r,e.acceptLabel=P,e.defineWeborityElements=R,e.matchesAccept=F,e.validateFile=I,e})({});
|
package/dist/ui-elements.js
CHANGED
|
@@ -19,8 +19,21 @@ 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
|
-
|
|
22
|
+
}, r = "data-wui-mirror";
|
|
23
|
+
function i(e, t) {
|
|
24
|
+
let n = e.getAttribute("name"), i = e.querySelector(`:scope > input[${r}]`);
|
|
25
|
+
if (!n) {
|
|
26
|
+
i?.remove();
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
i || (i = document.createElement("input"), i.type = "hidden", i.setAttribute(r, ""), e.appendChild(i)), i.name = n, i.value = t == null ? "" : String(t), i.disabled = e.hasAttribute("disabled");
|
|
30
|
+
}
|
|
31
|
+
//#endregion
|
|
32
|
+
//#region src/optionLabel.js
|
|
33
|
+
var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"), s = (e) => e?.[a] ? String(e.label ?? "") : o(e == null ? "" : e.label), c = class extends HTMLElement {
|
|
34
|
+
_accessibleName() {
|
|
35
|
+
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
36
|
+
}
|
|
24
37
|
static get observedAttributes() {
|
|
25
38
|
return [
|
|
26
39
|
"value",
|
|
@@ -28,11 +41,12 @@ var e = {
|
|
|
28
41
|
"disabled",
|
|
29
42
|
"min-chars",
|
|
30
43
|
"debounce",
|
|
31
|
-
"remote"
|
|
44
|
+
"remote",
|
|
45
|
+
"aria-label"
|
|
32
46
|
];
|
|
33
47
|
}
|
|
34
48
|
constructor() {
|
|
35
|
-
super(), this.
|
|
49
|
+
super(), this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null;
|
|
36
50
|
}
|
|
37
51
|
connectedCallback() {
|
|
38
52
|
this._rendered || this.render();
|
|
@@ -44,9 +58,9 @@ var e = {
|
|
|
44
58
|
return this._value;
|
|
45
59
|
}
|
|
46
60
|
set value(e) {
|
|
47
|
-
this._value = e == null ? "" : String(e),
|
|
61
|
+
this._value = e == null ? "" : String(e), i(this, this._value);
|
|
48
62
|
let t = this._readOptions().find((e) => String(e.value) === this._value);
|
|
49
|
-
t && (this._label =
|
|
63
|
+
t && (this._label = u(t.label)), this._syncInput();
|
|
50
64
|
}
|
|
51
65
|
set options(e) {
|
|
52
66
|
this._optionsProp = Array.isArray(e) ? e : [], this._renderOptions();
|
|
@@ -76,6 +90,7 @@ var e = {
|
|
|
76
90
|
e.length && (this._declared = e.map((e) => ({
|
|
77
91
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
78
92
|
label: e.innerHTML,
|
|
93
|
+
[a]: !0,
|
|
79
94
|
selected: e.hasAttribute("selected")
|
|
80
95
|
})));
|
|
81
96
|
}
|
|
@@ -87,8 +102,8 @@ var e = {
|
|
|
87
102
|
let e = this.getAttribute("placeholder") || "Search…";
|
|
88
103
|
this.innerHTML = `
|
|
89
104
|
<div class="search-select">
|
|
90
|
-
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false">
|
|
91
|
-
<input class="search-select-input search-select-ac-input" placeholder="${
|
|
105
|
+
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${l(this._accessibleName())}">
|
|
106
|
+
<input class="search-select-input search-select-ac-input" placeholder="${l(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
92
107
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
93
108
|
<button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
|
|
94
109
|
</div>
|
|
@@ -97,7 +112,7 @@ var e = {
|
|
|
97
112
|
<div class="search-select-empty" hidden>No matches</div>
|
|
98
113
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
99
114
|
</div>
|
|
100
|
-
</div>`, this._rendered = !0, this._wire(), this._syncInput(), this._renderOptions();
|
|
115
|
+
</div>`, this._rendered = !0, i(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
|
|
101
116
|
}
|
|
102
117
|
_refs() {
|
|
103
118
|
return {
|
|
@@ -126,12 +141,12 @@ var e = {
|
|
|
126
141
|
let t = this._refs();
|
|
127
142
|
if (!t.optionsWrap) return;
|
|
128
143
|
let n = (e ?? (t.input ? t.input.value : "")).trim().toLowerCase(), r = this._readOptions();
|
|
129
|
-
!this._remote && n && (r = r.filter((e) =>
|
|
144
|
+
!this._remote && n && (r = r.filter((e) => u(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
|
|
130
145
|
let t = String(e.value) === String(this._value);
|
|
131
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
146
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${l(e.value)}" aria-selected="${t}">${s(e)}</button>`;
|
|
132
147
|
}).join(""), this._active = -1;
|
|
133
|
-
let
|
|
134
|
-
t.hint && (t.hint.hidden = !(this._remote &&
|
|
148
|
+
let i = n.length < this._minChars;
|
|
149
|
+
t.hint && (t.hint.hidden = !(this._remote && i && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && i);
|
|
135
150
|
}
|
|
136
151
|
_wire() {
|
|
137
152
|
let e = this._refs();
|
|
@@ -144,16 +159,16 @@ var e = {
|
|
|
144
159
|
this._active = e;
|
|
145
160
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
146
161
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
147
|
-
},
|
|
162
|
+
}, a = () => !e.menu.hidden, o = () => {
|
|
148
163
|
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
|
|
149
164
|
}, s = () => {
|
|
150
165
|
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
|
|
151
166
|
}, c = (t) => {
|
|
152
|
-
this._value = t.dataset.value, this._label =
|
|
167
|
+
this._value = t.dataset.value, this._label = u(t.innerHTML), i(this, this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), s(), e.input.focus();
|
|
153
168
|
};
|
|
154
169
|
e.input.addEventListener("focus", () => o()), e.input.addEventListener("input", () => {
|
|
155
170
|
let t = e.input.value;
|
|
156
|
-
if (e.clear && (e.clear.hidden = !t),
|
|
171
|
+
if (e.clear && (e.clear.hidden = !t), a() || o(), this._remote) {
|
|
157
172
|
if (this._renderOptions(t), t.trim().length < this._minChars) return;
|
|
158
173
|
clearTimeout(this._timer), this._timer = setTimeout(() => {
|
|
159
174
|
this.dispatchEvent(new CustomEvent("search", {
|
|
@@ -164,7 +179,7 @@ var e = {
|
|
|
164
179
|
} else this._renderOptions(t);
|
|
165
180
|
}), e.input.addEventListener("keydown", (e) => {
|
|
166
181
|
let t = n();
|
|
167
|
-
e.key === "ArrowDown" ? (e.preventDefault(),
|
|
182
|
+
e.key === "ArrowDown" ? (e.preventDefault(), a() || 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(), c(t[this._active])) : e.key === "Escape" && s();
|
|
168
183
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
169
184
|
let t = e.target.closest(".search-select-option");
|
|
170
185
|
t && c(t);
|
|
@@ -172,17 +187,17 @@ var e = {
|
|
|
172
187
|
let t = e.target.closest(".search-select-option");
|
|
173
188
|
t && r(this._optionEls().indexOf(t));
|
|
174
189
|
}), e.clear?.addEventListener("click", () => {
|
|
175
|
-
this._value = "", this._label = "", this
|
|
190
|
+
this._value = "", this._label = "", i(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
|
|
176
191
|
}), this._onDocClick = (e) => {
|
|
177
|
-
|
|
192
|
+
a() && !this.contains(e.target) && s();
|
|
178
193
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
179
|
-
|
|
194
|
+
a() && t();
|
|
180
195
|
});
|
|
181
196
|
}
|
|
182
197
|
disconnectedCallback() {
|
|
183
198
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), clearTimeout(this._timer);
|
|
184
199
|
}
|
|
185
|
-
},
|
|
200
|
+
}, l = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), u = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), d = [
|
|
186
201
|
"January",
|
|
187
202
|
"February",
|
|
188
203
|
"March",
|
|
@@ -195,7 +210,7 @@ var e = {
|
|
|
195
210
|
"October",
|
|
196
211
|
"November",
|
|
197
212
|
"December"
|
|
198
|
-
],
|
|
213
|
+
], f = [
|
|
199
214
|
"Su",
|
|
200
215
|
"Mo",
|
|
201
216
|
"Tu",
|
|
@@ -203,18 +218,17 @@ var e = {
|
|
|
203
218
|
"Th",
|
|
204
219
|
"Fr",
|
|
205
220
|
"Sa"
|
|
206
|
-
],
|
|
221
|
+
], p = (e) => String(e).padStart(2, "0"), m = (e, t, n) => `${e}-${p(t + 1)}-${p(n)}`, h = (e) => {
|
|
207
222
|
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
208
223
|
return t ? {
|
|
209
224
|
y: +t[1],
|
|
210
225
|
m: t[2] - 1,
|
|
211
226
|
d: +t[3]
|
|
212
227
|
} : null;
|
|
213
|
-
},
|
|
214
|
-
let t =
|
|
215
|
-
return t ? `${
|
|
216
|
-
},
|
|
217
|
-
static formAssociated = !0;
|
|
228
|
+
}, g = (e) => {
|
|
229
|
+
let t = h(e);
|
|
230
|
+
return t ? `${p(t.d)} ${d[t.m].slice(0, 3)} ${t.y}` : "";
|
|
231
|
+
}, _ = class extends HTMLElement {
|
|
218
232
|
static get observedAttributes() {
|
|
219
233
|
return [
|
|
220
234
|
"value",
|
|
@@ -225,7 +239,7 @@ var e = {
|
|
|
225
239
|
];
|
|
226
240
|
}
|
|
227
241
|
constructor() {
|
|
228
|
-
super(), this.
|
|
242
|
+
super(), this._value = "";
|
|
229
243
|
let e = new Date(2e3, 0, 1);
|
|
230
244
|
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
231
245
|
}
|
|
@@ -239,47 +253,47 @@ var e = {
|
|
|
239
253
|
return this._value;
|
|
240
254
|
}
|
|
241
255
|
set value(e) {
|
|
242
|
-
this._value = e || "",
|
|
256
|
+
this._value = e || "", i(this, this._value), this._syncTrigger(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
243
257
|
}
|
|
244
258
|
render() {
|
|
245
259
|
this._value = this.getAttribute("value") || this._value;
|
|
246
|
-
let e = this.getAttribute("placeholder") || "Enter Date", t =
|
|
260
|
+
let e = this.getAttribute("placeholder") || "Enter Date", t = h(this._value);
|
|
247
261
|
t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
|
|
248
262
|
<div class="datepicker">
|
|
249
263
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
250
|
-
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ?
|
|
264
|
+
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? g(this._value) : e}</span>
|
|
251
265
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
252
266
|
</button>
|
|
253
267
|
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
254
|
-
</div>`, this._rendered = !0, this._wire();
|
|
268
|
+
</div>`, this._rendered = !0, i(this, this._value), this._wire();
|
|
255
269
|
}
|
|
256
|
-
|
|
257
|
-
|
|
270
|
+
_syncFormValue() {
|
|
271
|
+
i(this, this._value);
|
|
258
272
|
}
|
|
259
273
|
_syncTrigger() {
|
|
260
274
|
let e = this.querySelector("[data-trigger-label]");
|
|
261
275
|
if (!e) return;
|
|
262
|
-
let t =
|
|
263
|
-
e.textContent = t ?
|
|
276
|
+
let t = h(this._value);
|
|
277
|
+
e.textContent = t ? g(this._value) : this.getAttribute("placeholder") || "Enter Date", e.classList.toggle("search-select-placeholder", !t);
|
|
264
278
|
}
|
|
265
279
|
_renderMonth() {
|
|
266
|
-
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 =
|
|
280
|
+
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 = h(this._value), i = h(this.getAttribute("min")), a = h(this.getAttribute("max")), o = (e, t, n) => {
|
|
267
281
|
let r = new Date(e, t, n).getTime();
|
|
268
282
|
return !!(i && r < new Date(i.y, i.m, i.d).getTime() || a && r > new Date(a.y, a.m, a.d).getTime());
|
|
269
|
-
},
|
|
270
|
-
for (let e = 0; e < t; e++)
|
|
283
|
+
}, s = "";
|
|
284
|
+
for (let e = 0; e < t; e++) s += "<span class=\"datepicker-day is-outside\"></span>";
|
|
271
285
|
for (let e = 1; e <= n; e++) {
|
|
272
|
-
let t =
|
|
273
|
-
|
|
286
|
+
let t = m(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);
|
|
287
|
+
s += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${i ? " disabled" : ""}>${e}</button>`;
|
|
274
288
|
}
|
|
275
289
|
e.innerHTML = `
|
|
276
290
|
<div class="datepicker-head">
|
|
277
291
|
<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>
|
|
278
|
-
<span class="datepicker-month">${
|
|
292
|
+
<span class="datepicker-month">${d[this._viewM]} ${this._viewY}</span>
|
|
279
293
|
<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>
|
|
280
294
|
</div>
|
|
281
|
-
<div class="datepicker-weekdays">${
|
|
282
|
-
<div class="datepicker-grid">${
|
|
295
|
+
<div class="datepicker-weekdays">${f.map((e) => `<span>${e}</span>`).join("")}</div>
|
|
296
|
+
<div class="datepicker-grid">${s}</div>
|
|
283
297
|
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
|
|
284
298
|
}
|
|
285
299
|
_wire() {
|
|
@@ -304,25 +318,28 @@ var e = {
|
|
|
304
318
|
n && !n.disabled && (this.value = n.dataset.iso, i());
|
|
305
319
|
}), this._onDocClick = (e) => {
|
|
306
320
|
n() && !this.contains(e.target) && i();
|
|
307
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
321
|
+
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
308
322
|
n() && e.key === "Escape" && i();
|
|
309
|
-
}), this.
|
|
323
|
+
}, document.addEventListener("keydown", this._onDocKey), this._syncFormValue();
|
|
310
324
|
}
|
|
311
325
|
disconnectedCallback() {
|
|
312
|
-
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
326
|
+
this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey);
|
|
327
|
+
}
|
|
328
|
+
}, v = class extends HTMLElement {
|
|
329
|
+
_accessibleName() {
|
|
330
|
+
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
313
331
|
}
|
|
314
|
-
}, p = class extends HTMLElement {
|
|
315
|
-
static formAssociated = !0;
|
|
316
332
|
static get observedAttributes() {
|
|
317
333
|
return [
|
|
318
334
|
"placeholder",
|
|
319
335
|
"search-placeholder",
|
|
320
336
|
"searchable",
|
|
321
|
-
"disabled"
|
|
337
|
+
"disabled",
|
|
338
|
+
"aria-label"
|
|
322
339
|
];
|
|
323
340
|
}
|
|
324
341
|
constructor() {
|
|
325
|
-
super(), this.
|
|
342
|
+
super(), this._values = [], this._optionsProp = null, this._active = -1;
|
|
326
343
|
}
|
|
327
344
|
connectedCallback() {
|
|
328
345
|
if (!this._rendered) {
|
|
@@ -340,7 +357,7 @@ var e = {
|
|
|
340
357
|
return this._values.slice();
|
|
341
358
|
}
|
|
342
359
|
set values(e) {
|
|
343
|
-
this._values = Array.isArray(e) ? e.map(String) : [],
|
|
360
|
+
this._values = Array.isArray(e) ? e.map(String) : [], i(this, this._values.join(",")), this._rendered && this._renderControl();
|
|
344
361
|
}
|
|
345
362
|
set options(e) {
|
|
346
363
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -354,6 +371,7 @@ var e = {
|
|
|
354
371
|
e.length && (this._declared = e.map((e) => ({
|
|
355
372
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
356
373
|
label: e.innerHTML,
|
|
374
|
+
[a]: !0,
|
|
357
375
|
selected: e.hasAttribute("selected")
|
|
358
376
|
})));
|
|
359
377
|
}
|
|
@@ -364,96 +382,106 @@ var e = {
|
|
|
364
382
|
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
365
383
|
return t ? t.label : e;
|
|
366
384
|
}
|
|
385
|
+
_labelHtmlFor(e) {
|
|
386
|
+
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
387
|
+
return t ? s(t) : o(e);
|
|
388
|
+
}
|
|
367
389
|
render() {
|
|
368
390
|
this._snapshotDeclared();
|
|
369
391
|
let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
|
|
370
|
-
|
|
392
|
+
i(this, this._values.join(",")), this.innerHTML = `
|
|
371
393
|
<div class="search-select">
|
|
372
|
-
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
|
|
394
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${y(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
|
|
373
395
|
<div class="ms-chips" data-chips></div>
|
|
374
396
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
375
397
|
</div>
|
|
376
398
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
377
|
-
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
399
|
+
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${y(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>` : ""}
|
|
378
400
|
<div class="search-select-options"></div>
|
|
379
401
|
<div class="search-select-empty" hidden>No matches</div>
|
|
380
402
|
</div>
|
|
381
|
-
</div>`, this._rendered = !0, this._renderControl(), this._renderOptions(), this._wire();
|
|
403
|
+
</div>`, this._rendered = !0, i(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
|
|
382
404
|
}
|
|
383
405
|
_renderControl() {
|
|
384
406
|
let e = this.querySelector("[data-chips]");
|
|
385
407
|
if (!e) return;
|
|
386
408
|
let t = this.getAttribute("placeholder") || "Select…";
|
|
387
409
|
if (!this._values.length) {
|
|
388
|
-
e.innerHTML = `<span class="search-select-placeholder">${
|
|
410
|
+
e.innerHTML = `<span class="search-select-placeholder">${o(t)}</span>`;
|
|
389
411
|
return;
|
|
390
412
|
}
|
|
391
|
-
e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this.
|
|
413
|
+
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="${y(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
|
|
392
414
|
}
|
|
393
415
|
_renderOptions(e) {
|
|
394
416
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
395
417
|
if (!t) return;
|
|
396
418
|
let r = (e || "").trim().toLowerCase(), i = this._readOptions();
|
|
397
|
-
r && (i = i.filter((e) =>
|
|
419
|
+
r && (i = i.filter((e) => b(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
|
|
398
420
|
let t = this._values.includes(String(e.value));
|
|
399
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
421
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${y(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${s(e)}</span></button>`;
|
|
400
422
|
}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
|
|
401
423
|
}
|
|
402
424
|
_wire() {
|
|
403
|
-
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"),
|
|
425
|
+
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");
|
|
404
426
|
if (!e || !t) return;
|
|
405
|
-
let
|
|
427
|
+
let o = () => this.hasAttribute("disabled"), s = () => {
|
|
406
428
|
let n = e.getBoundingClientRect();
|
|
407
429
|
t.style.position = "fixed", t.style.top = `${n.bottom + 4}px`, t.style.left = `${n.left}px`, t.style.width = `${n.width}px`;
|
|
408
|
-
},
|
|
409
|
-
let t =
|
|
430
|
+
}, c = () => [...this.querySelectorAll(".search-select-option")], l = () => c().filter((e) => !e.hidden), u = (e) => {
|
|
431
|
+
let t = l();
|
|
410
432
|
this._active = e;
|
|
411
|
-
for (let e of
|
|
433
|
+
for (let e of c()) e.classList.remove("is-active");
|
|
412
434
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
413
|
-
},
|
|
414
|
-
|
|
415
|
-
}, f = () => {
|
|
416
|
-
t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), l(-1);
|
|
435
|
+
}, d = () => !t.hidden, f = () => {
|
|
436
|
+
o() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), s(), n && (n.value = "", this._renderOptions(""), n.focus()));
|
|
417
437
|
}, p = () => {
|
|
418
|
-
|
|
419
|
-
}, m = (
|
|
420
|
-
|
|
421
|
-
this._values.includes(t) ? this._values = this._values.filter((e) => e !== t) : this._values = [...this._values, t], this._renderControl(), this._renderOptions(n ? n.value : ""), p();
|
|
438
|
+
t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), u(-1);
|
|
439
|
+
}, m = () => {
|
|
440
|
+
i(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
422
441
|
}, h = (e) => {
|
|
423
|
-
|
|
442
|
+
let t = String(e);
|
|
443
|
+
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();
|
|
444
|
+
}, g = (e) => {
|
|
445
|
+
this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(n ? n.value : ""), m();
|
|
424
446
|
};
|
|
425
447
|
e.addEventListener("click", (e) => {
|
|
426
448
|
let t = e.target.closest("[data-remove]");
|
|
427
449
|
if (t) {
|
|
428
|
-
e.stopPropagation(),
|
|
450
|
+
e.stopPropagation(), g(t.dataset.remove);
|
|
429
451
|
return;
|
|
430
452
|
}
|
|
431
|
-
|
|
432
|
-
}),
|
|
453
|
+
d() ? p() : f();
|
|
454
|
+
}), a.addEventListener("click", (e) => {
|
|
433
455
|
let t = e.target.closest(".search-select-option");
|
|
434
|
-
t && (
|
|
435
|
-
}),
|
|
456
|
+
t && (h(t.dataset.value), n?.focus());
|
|
457
|
+
}), a.addEventListener("mousemove", (e) => {
|
|
436
458
|
let t = e.target.closest(".search-select-option");
|
|
437
|
-
t && l(
|
|
459
|
+
t && u(l().indexOf(t));
|
|
438
460
|
}), n?.addEventListener("input", () => {
|
|
439
|
-
this._renderOptions(n.value), r && (r.hidden = !n.value),
|
|
440
|
-
})
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
461
|
+
this._renderOptions(n.value), r && (r.hidden = !n.value), u(-1);
|
|
462
|
+
});
|
|
463
|
+
let _ = (t) => {
|
|
464
|
+
let r = l();
|
|
465
|
+
t.key === "ArrowDown" ? (t.preventDefault(), u(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), u(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && h(r[this._active].dataset.value)) : t.key === "Escape" ? (p(), e.focus()) : t.key === "Backspace" && !n.value && this._values.length && g(this._values[this._values.length - 1]);
|
|
466
|
+
};
|
|
467
|
+
n?.addEventListener("keydown", _), r?.addEventListener("click", () => {
|
|
444
468
|
n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
|
|
445
469
|
}), e.addEventListener("keydown", (e) => {
|
|
446
|
-
|
|
470
|
+
if (d()) {
|
|
471
|
+
_(e);
|
|
472
|
+
return;
|
|
473
|
+
}
|
|
474
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
|
|
447
475
|
}), this._onDocClick = (e) => {
|
|
448
|
-
|
|
476
|
+
d() && !this.contains(e.target) && p();
|
|
449
477
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
450
|
-
|
|
478
|
+
d() && s();
|
|
451
479
|
});
|
|
452
480
|
}
|
|
453
481
|
disconnectedCallback() {
|
|
454
482
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
455
483
|
}
|
|
456
|
-
},
|
|
484
|
+
}, y = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), b = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), x = [
|
|
457
485
|
[
|
|
458
486
|
"AF",
|
|
459
487
|
"Afghanistan",
|
|
@@ -1679,12 +1707,11 @@ var e = {
|
|
|
1679
1707
|
"Zimbabwe",
|
|
1680
1708
|
"263"
|
|
1681
1709
|
]
|
|
1682
|
-
],
|
|
1710
|
+
], S = (e) => (x.find((t) => t[0] === e) || [
|
|
1683
1711
|
"",
|
|
1684
1712
|
"",
|
|
1685
1713
|
""
|
|
1686
|
-
])[2],
|
|
1687
|
-
static formAssociated = !0;
|
|
1714
|
+
])[2], C = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, w = class extends HTMLElement {
|
|
1688
1715
|
static get observedAttributes() {
|
|
1689
1716
|
return [
|
|
1690
1717
|
"value",
|
|
@@ -1694,7 +1721,7 @@ var e = {
|
|
|
1694
1721
|
];
|
|
1695
1722
|
}
|
|
1696
1723
|
constructor() {
|
|
1697
|
-
super(), this.
|
|
1724
|
+
super(), this._country = "IN", this._national = "";
|
|
1698
1725
|
}
|
|
1699
1726
|
connectedCallback() {
|
|
1700
1727
|
this._rendered || this.render();
|
|
@@ -1703,74 +1730,73 @@ var e = {
|
|
|
1703
1730
|
this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
|
|
1704
1731
|
}
|
|
1705
1732
|
get value() {
|
|
1706
|
-
return `+${
|
|
1733
|
+
return `+${S(this._country)}${this._national}`;
|
|
1707
1734
|
}
|
|
1708
1735
|
set value(e) {
|
|
1709
1736
|
this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
|
|
1710
1737
|
}
|
|
1711
1738
|
_commit() {
|
|
1712
|
-
|
|
1739
|
+
i(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1713
1740
|
}
|
|
1714
1741
|
render() {
|
|
1715
1742
|
let e = this.getAttribute("placeholder") || "Enter phone number";
|
|
1716
1743
|
this._country = this.getAttribute("country") || this._country;
|
|
1717
|
-
let t =
|
|
1744
|
+
let t = x.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${C(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
|
|
1718
1745
|
this.innerHTML = `
|
|
1719
1746
|
<div class="phone-input-wrap">
|
|
1720
1747
|
<div class="phone-country-adornment">
|
|
1721
1748
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1722
|
-
<span class="${
|
|
1749
|
+
<span class="${C(this._country)}" data-flag aria-hidden="true"></span>
|
|
1723
1750
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
1724
|
-
<span class="phone-dial" data-dial>+${
|
|
1751
|
+
<span class="phone-dial" data-dial>+${S(this._country)}</span>
|
|
1725
1752
|
</button>
|
|
1726
1753
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
1727
1754
|
<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>
|
|
1728
1755
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
1729
1756
|
</div>
|
|
1730
1757
|
</div>
|
|
1731
|
-
<input type="tel" class="input" placeholder="${
|
|
1732
|
-
</div>`, this._rendered = !0, this._wire();
|
|
1758
|
+
<input type="tel" class="input" placeholder="${T(e)}" value="${T(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
1759
|
+
</div>`, this._rendered = !0, i(this, this.value), this._wire();
|
|
1733
1760
|
}
|
|
1734
1761
|
_wire() {
|
|
1735
|
-
let e = this.querySelector(".country-toggle"), t = this.querySelector(".country-dropdown-menu"), n = this.querySelector(".dropdown-search-input"), r = this.querySelector(".country-list-scroll"),
|
|
1762
|
+
let e = this.querySelector(".country-toggle"), t = this.querySelector(".country-dropdown-menu"), n = this.querySelector(".dropdown-search-input"), r = this.querySelector(".country-list-scroll"), a = this.querySelector(".country-empty"), o = this.querySelector("input[type=tel]"), s = this.querySelector("[data-flag]"), c = this.querySelector("[data-dial]");
|
|
1736
1763
|
if (!e || !t) return;
|
|
1737
|
-
let
|
|
1764
|
+
let l = () => !t.hidden, u = () => {
|
|
1738
1765
|
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));
|
|
1739
1766
|
t.style.top = `${Math.max(8, o)}px`, t.style.left = `${s}px`;
|
|
1740
|
-
}, u = () => {
|
|
1741
|
-
t.hidden = !1, e.setAttribute("aria-expanded", "true"), n.value = "", f(""), l(), n.focus();
|
|
1742
1767
|
}, d = () => {
|
|
1768
|
+
t.hidden = !1, e.setAttribute("aria-expanded", "true"), n.value = "", p(""), u(), n.focus();
|
|
1769
|
+
}, f = () => {
|
|
1743
1770
|
t.hidden = !0, e.setAttribute("aria-expanded", "false");
|
|
1744
1771
|
};
|
|
1745
1772
|
this._reposition = () => {
|
|
1746
|
-
|
|
1773
|
+
l() && u();
|
|
1747
1774
|
}, window.addEventListener("scroll", this._reposition, !0), window.addEventListener("resize", this._reposition);
|
|
1748
|
-
let
|
|
1775
|
+
let p = (e) => {
|
|
1749
1776
|
let t = e.trim().toLowerCase(), n = 0;
|
|
1750
1777
|
for (let e of r.querySelectorAll(".country-dropdown-item")) {
|
|
1751
1778
|
let r = !t || e.textContent.toLowerCase().includes(t);
|
|
1752
1779
|
e.hidden = !r, r && (n += 1);
|
|
1753
1780
|
}
|
|
1754
|
-
|
|
1755
|
-
},
|
|
1756
|
-
this._country = e, this.setAttribute("country", e),
|
|
1781
|
+
a && (a.hidden = n > 0);
|
|
1782
|
+
}, m = (e) => {
|
|
1783
|
+
this._country = e, this.setAttribute("country", e), s && (s.className = C(e)), c && (c.textContent = `+${S(e)}`);
|
|
1757
1784
|
for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
|
|
1758
|
-
|
|
1785
|
+
f(), this._commit();
|
|
1759
1786
|
};
|
|
1760
|
-
e.addEventListener("click", () =>
|
|
1787
|
+
e.addEventListener("click", () => l() ? f() : d()), n.addEventListener("input", () => p(n.value)), r.addEventListener("click", (e) => {
|
|
1761
1788
|
let t = e.target.closest(".country-dropdown-item");
|
|
1762
|
-
t &&
|
|
1763
|
-
}),
|
|
1764
|
-
this._national =
|
|
1789
|
+
t && m(t.dataset.iso);
|
|
1790
|
+
}), o.addEventListener("input", () => {
|
|
1791
|
+
this._national = o.value.replace(/[^0-9]/g, ""), this._commit();
|
|
1765
1792
|
}), this._onDocClick = (e) => {
|
|
1766
|
-
|
|
1767
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
1793
|
+
l() && !this.contains(e.target) && f();
|
|
1794
|
+
}, document.addEventListener("click", this._onDocClick), i(this, this.value);
|
|
1768
1795
|
}
|
|
1769
1796
|
disconnectedCallback() {
|
|
1770
1797
|
this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1771
1798
|
}
|
|
1772
|
-
},
|
|
1773
|
-
static formAssociated = !0;
|
|
1799
|
+
}, T = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), E = class extends HTMLElement {
|
|
1774
1800
|
static get observedAttributes() {
|
|
1775
1801
|
return [
|
|
1776
1802
|
"value",
|
|
@@ -1778,11 +1804,15 @@ var e = {
|
|
|
1778
1804
|
"search-placeholder",
|
|
1779
1805
|
"searchable",
|
|
1780
1806
|
"disabled",
|
|
1781
|
-
"compact"
|
|
1807
|
+
"compact",
|
|
1808
|
+
"aria-label"
|
|
1782
1809
|
];
|
|
1783
1810
|
}
|
|
1811
|
+
_accessibleName() {
|
|
1812
|
+
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
1813
|
+
}
|
|
1784
1814
|
constructor() {
|
|
1785
|
-
super(), this.
|
|
1815
|
+
super(), this._value = "", this._optionsProp = null, this._active = -1;
|
|
1786
1816
|
}
|
|
1787
1817
|
connectedCallback() {
|
|
1788
1818
|
this._rendered || this.render();
|
|
@@ -1794,7 +1824,7 @@ var e = {
|
|
|
1794
1824
|
return this._value;
|
|
1795
1825
|
}
|
|
1796
1826
|
set value(e) {
|
|
1797
|
-
this._value = e == null ? "" : String(e),
|
|
1827
|
+
this._value = e == null ? "" : String(e), i(this, this._value), this._syncSelected();
|
|
1798
1828
|
}
|
|
1799
1829
|
set options(e) {
|
|
1800
1830
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -1808,6 +1838,7 @@ var e = {
|
|
|
1808
1838
|
e.length && (this._declared = e.map((e) => ({
|
|
1809
1839
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
1810
1840
|
label: e.innerHTML,
|
|
1841
|
+
[a]: !0,
|
|
1811
1842
|
selected: e.hasAttribute("selected")
|
|
1812
1843
|
})));
|
|
1813
1844
|
}
|
|
@@ -1816,23 +1847,23 @@ var e = {
|
|
|
1816
1847
|
}
|
|
1817
1848
|
render() {
|
|
1818
1849
|
this._snapshotDeclared();
|
|
1819
|
-
let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.getAttribute("placeholder") || "Select...", r = this.getAttribute("search-placeholder") || "Search...",
|
|
1820
|
-
|
|
1821
|
-
let
|
|
1850
|
+
let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.getAttribute("placeholder") || "Select...", r = this.getAttribute("search-placeholder") || "Search...", a = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
|
|
1851
|
+
a && (this._value = String(a.value)), i(this, this._value);
|
|
1852
|
+
let c = e.map((e) => {
|
|
1822
1853
|
let t = String(e.value) === String(this._value);
|
|
1823
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
1854
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${D(e.value)}" aria-selected="${t}">${s(e)}</button>`;
|
|
1824
1855
|
}).join("");
|
|
1825
1856
|
this.innerHTML = `
|
|
1826
1857
|
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}">
|
|
1827
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1828
|
-
<span class="${
|
|
1858
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${D(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1859
|
+
<span class="${a ? "" : "search-select-placeholder"}" data-label>${a ? s(a) : o(n)}</span>
|
|
1829
1860
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
1830
1861
|
</button>
|
|
1831
1862
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
1832
|
-
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
1833
|
-
<div class="search-select-options">${
|
|
1863
|
+
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${D(r)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
|
|
1864
|
+
<div class="search-select-options">${c}<div class="search-select-empty" hidden>No matches</div></div>
|
|
1834
1865
|
</div>
|
|
1835
|
-
</div>`, this._rendered = !0, this._wire();
|
|
1866
|
+
</div>`, this._rendered = !0, i(this, this._value), this._wire();
|
|
1836
1867
|
}
|
|
1837
1868
|
_refs() {
|
|
1838
1869
|
return {
|
|
@@ -1857,7 +1888,7 @@ var e = {
|
|
|
1857
1888
|
let t = e.dataset.value === String(this._value);
|
|
1858
1889
|
e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
|
|
1859
1890
|
}
|
|
1860
|
-
e && (e.innerHTML = t ? t
|
|
1891
|
+
e && (e.innerHTML = t ? s(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
|
|
1861
1892
|
}
|
|
1862
1893
|
_wire() {
|
|
1863
1894
|
let e = this._refs();
|
|
@@ -1888,7 +1919,11 @@ var e = {
|
|
|
1888
1919
|
t.key === "ArrowDown" ? (t.preventDefault(), n(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), n(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && s(r[this._active])) : t.key === "Escape" && (o(), e.control.focus());
|
|
1889
1920
|
};
|
|
1890
1921
|
e.control.addEventListener("click", () => i() ? o() : a()), e.control.addEventListener("keydown", (e) => {
|
|
1891
|
-
|
|
1922
|
+
if (i()) {
|
|
1923
|
+
c(e);
|
|
1924
|
+
return;
|
|
1925
|
+
}
|
|
1926
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
|
|
1892
1927
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
1893
1928
|
let t = e.target.closest(".search-select-option");
|
|
1894
1929
|
t && s(t);
|
|
@@ -1908,14 +1943,14 @@ var e = {
|
|
|
1908
1943
|
disconnectedCallback() {
|
|
1909
1944
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1910
1945
|
}
|
|
1911
|
-
},
|
|
1946
|
+
}, D = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), O = "image/png,image/jpeg,image/webp", k = 5, A = {
|
|
1912
1947
|
"image/png": [".png"],
|
|
1913
1948
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
1914
1949
|
"image/webp": [".webp"],
|
|
1915
1950
|
"image/gif": [".gif"],
|
|
1916
1951
|
"image/svg+xml": [".svg"],
|
|
1917
1952
|
"application/pdf": [".pdf"]
|
|
1918
|
-
},
|
|
1953
|
+
}, j = {
|
|
1919
1954
|
"image/png": "PNG",
|
|
1920
1955
|
"image/jpeg": "JPG",
|
|
1921
1956
|
"image/webp": "WEBP",
|
|
@@ -1929,34 +1964,34 @@ var e = {
|
|
|
1929
1964
|
".gif": "GIF",
|
|
1930
1965
|
".svg": "SVG",
|
|
1931
1966
|
".pdf": "PDF"
|
|
1932
|
-
},
|
|
1933
|
-
function
|
|
1967
|
+
}, M = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
|
|
1968
|
+
function N(e) {
|
|
1934
1969
|
let t = [];
|
|
1935
|
-
for (let n of
|
|
1936
|
-
let e =
|
|
1970
|
+
for (let n of M(e)) {
|
|
1971
|
+
let e = j[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
1937
1972
|
t.includes(e) || t.push(e);
|
|
1938
1973
|
}
|
|
1939
1974
|
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
1940
1975
|
}
|
|
1941
|
-
function
|
|
1942
|
-
let n =
|
|
1976
|
+
function P(e, t) {
|
|
1977
|
+
let n = M(t);
|
|
1943
1978
|
if (!n.length) return !0;
|
|
1944
1979
|
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
1945
|
-
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (
|
|
1980
|
+
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (A[e] || []).some((e) => i.endsWith(e)));
|
|
1946
1981
|
}
|
|
1947
|
-
function
|
|
1982
|
+
function F(e, t = {}) {
|
|
1948
1983
|
if (!e) return null;
|
|
1949
|
-
let n = t.accept === void 0 ?
|
|
1950
|
-
return
|
|
1984
|
+
let n = t.accept === void 0 ? O : t.accept, r = t.maxSizeMb || 5;
|
|
1985
|
+
return P(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${N(n)} file.`;
|
|
1951
1986
|
}
|
|
1952
1987
|
//#endregion
|
|
1953
1988
|
//#region src/index.js
|
|
1954
|
-
var
|
|
1989
|
+
var I = (e, t) => {
|
|
1955
1990
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
1956
1991
|
};
|
|
1957
|
-
function
|
|
1958
|
-
|
|
1992
|
+
function L() {
|
|
1993
|
+
I("wui-select", E), I("wui-phone", w), I("wui-datepicker", _), I("wui-autocomplete", c), I("wui-multiselect", v), I("wui-status-icon", n);
|
|
1959
1994
|
}
|
|
1960
|
-
|
|
1995
|
+
L();
|
|
1961
1996
|
//#endregion
|
|
1962
|
-
export {
|
|
1997
|
+
export { O as DEFAULT_IMAGE_ACCEPT, k as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, c as WuiAutocomplete, _ as WuiDatePicker, v as WuiMultiSelect, w as WuiPhone, E as WuiSelect, n as WuiStatusIcon, N as acceptLabel, L as defineWeborityElements, P as matchesAccept, F as validateFile };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/ui-elements",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
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",
|