@webority/ui-elements 0.5.0 → 0.6.1
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 +21 -21
- package/dist/ui-elements.js +158 -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=Symbol(`wui.trustedHtml`),
|
|
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" aria-label="${
|
|
49
|
-
<input class="search-select-input search-select-ac-input" placeholder="${
|
|
48
|
+
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${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">${
|
|
71
|
+
<div class="datepicker-weekdays">${p.map(e=>`<span>${e}</span>`).join(``)}</div>
|
|
72
72
|
<div class="datepicker-grid">${s}</div>
|
|
73
|
-
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{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.
|
|
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" aria-label="${
|
|
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">${a(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="${v(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=>y(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="${v(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${o(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 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)});let g=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])};n?.addEventListener(`keydown`,g),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{if(u()){g(e);return}(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)}},v=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),y=e=>String(e??``).replace(/<[^>]*>/g,``),b=[[`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`]],x=e=>(b.find(t=>t[0]===e)||[``,``,``])[2],S=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,C=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`+${x(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=b.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${S(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" aria-label="${
|
|
101
|
-
<span class="${i?``:`search-select-placeholder`}" data-label>${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?
|
|
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,18 @@ 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 {
|
|
24
34
|
_accessibleName() {
|
|
25
35
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
26
36
|
}
|
|
@@ -31,11 +41,12 @@ var e = {
|
|
|
31
41
|
"disabled",
|
|
32
42
|
"min-chars",
|
|
33
43
|
"debounce",
|
|
34
|
-
"remote"
|
|
44
|
+
"remote",
|
|
45
|
+
"aria-label"
|
|
35
46
|
];
|
|
36
47
|
}
|
|
37
48
|
constructor() {
|
|
38
|
-
super(), this.
|
|
49
|
+
super(), this._value = "", this._label = "", this._optionsProp = null, this._loading = !1, this._active = -1, this._timer = null;
|
|
39
50
|
}
|
|
40
51
|
connectedCallback() {
|
|
41
52
|
this._rendered || this.render();
|
|
@@ -47,9 +58,9 @@ var e = {
|
|
|
47
58
|
return this._value;
|
|
48
59
|
}
|
|
49
60
|
set value(e) {
|
|
50
|
-
this._value = e == null ? "" : String(e),
|
|
61
|
+
this._value = e == null ? "" : String(e), i(this, this._value);
|
|
51
62
|
let t = this._readOptions().find((e) => String(e.value) === this._value);
|
|
52
|
-
t && (this._label =
|
|
63
|
+
t && (this._label = u(t.label)), this._syncInput();
|
|
53
64
|
}
|
|
54
65
|
set options(e) {
|
|
55
66
|
this._optionsProp = Array.isArray(e) ? e : [], this._renderOptions();
|
|
@@ -79,7 +90,7 @@ var e = {
|
|
|
79
90
|
e.length && (this._declared = e.map((e) => ({
|
|
80
91
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
81
92
|
label: e.innerHTML,
|
|
82
|
-
[
|
|
93
|
+
[a]: !0,
|
|
83
94
|
selected: e.hasAttribute("selected")
|
|
84
95
|
})));
|
|
85
96
|
}
|
|
@@ -91,8 +102,8 @@ var e = {
|
|
|
91
102
|
let e = this.getAttribute("placeholder") || "Search…";
|
|
92
103
|
this.innerHTML = `
|
|
93
104
|
<div class="search-select">
|
|
94
|
-
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
95
|
-
<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" : ""} />
|
|
96
107
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
97
108
|
<button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
|
|
98
109
|
</div>
|
|
@@ -101,7 +112,7 @@ var e = {
|
|
|
101
112
|
<div class="search-select-empty" hidden>No matches</div>
|
|
102
113
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
103
114
|
</div>
|
|
104
|
-
</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();
|
|
105
116
|
}
|
|
106
117
|
_refs() {
|
|
107
118
|
return {
|
|
@@ -130,9 +141,9 @@ var e = {
|
|
|
130
141
|
let t = this._refs();
|
|
131
142
|
if (!t.optionsWrap) return;
|
|
132
143
|
let n = (e ?? (t.input ? t.input.value : "")).trim().toLowerCase(), r = this._readOptions();
|
|
133
|
-
!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) => {
|
|
134
145
|
let t = String(e.value) === String(this._value);
|
|
135
|
-
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>`;
|
|
136
147
|
}).join(""), this._active = -1;
|
|
137
148
|
let i = n.length < this._minChars;
|
|
138
149
|
t.hint && (t.hint.hidden = !(this._remote && i && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && i);
|
|
@@ -148,16 +159,16 @@ var e = {
|
|
|
148
159
|
this._active = e;
|
|
149
160
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
150
161
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
151
|
-
},
|
|
162
|
+
}, a = () => !e.menu.hidden, o = () => {
|
|
152
163
|
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
|
|
153
|
-
},
|
|
164
|
+
}, s = () => {
|
|
154
165
|
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
|
|
155
|
-
},
|
|
156
|
-
this._value = t.dataset.value, this._label =
|
|
166
|
+
}, c = (t) => {
|
|
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();
|
|
157
168
|
};
|
|
158
|
-
e.input.addEventListener("focus", () =>
|
|
169
|
+
e.input.addEventListener("focus", () => o()), e.input.addEventListener("input", () => {
|
|
159
170
|
let t = e.input.value;
|
|
160
|
-
if (e.clear && (e.clear.hidden = !t),
|
|
171
|
+
if (e.clear && (e.clear.hidden = !t), a() || o(), this._remote) {
|
|
161
172
|
if (this._renderOptions(t), t.trim().length < this._minChars) return;
|
|
162
173
|
clearTimeout(this._timer), this._timer = setTimeout(() => {
|
|
163
174
|
this.dispatchEvent(new CustomEvent("search", {
|
|
@@ -168,25 +179,25 @@ var e = {
|
|
|
168
179
|
} else this._renderOptions(t);
|
|
169
180
|
}), e.input.addEventListener("keydown", (e) => {
|
|
170
181
|
let t = n();
|
|
171
|
-
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();
|
|
172
183
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
173
184
|
let t = e.target.closest(".search-select-option");
|
|
174
|
-
t &&
|
|
185
|
+
t && c(t);
|
|
175
186
|
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
176
187
|
let t = e.target.closest(".search-select-option");
|
|
177
188
|
t && r(this._optionEls().indexOf(t));
|
|
178
189
|
}), e.clear?.addEventListener("click", () => {
|
|
179
|
-
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();
|
|
180
191
|
}), this._onDocClick = (e) => {
|
|
181
|
-
|
|
192
|
+
a() && !this.contains(e.target) && s();
|
|
182
193
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
183
|
-
|
|
194
|
+
a() && t();
|
|
184
195
|
});
|
|
185
196
|
}
|
|
186
197
|
disconnectedCallback() {
|
|
187
198
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), clearTimeout(this._timer);
|
|
188
199
|
}
|
|
189
|
-
},
|
|
200
|
+
}, l = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), u = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), d = [
|
|
190
201
|
"January",
|
|
191
202
|
"February",
|
|
192
203
|
"March",
|
|
@@ -199,7 +210,7 @@ var e = {
|
|
|
199
210
|
"October",
|
|
200
211
|
"November",
|
|
201
212
|
"December"
|
|
202
|
-
],
|
|
213
|
+
], f = [
|
|
203
214
|
"Su",
|
|
204
215
|
"Mo",
|
|
205
216
|
"Tu",
|
|
@@ -207,18 +218,17 @@ var e = {
|
|
|
207
218
|
"Th",
|
|
208
219
|
"Fr",
|
|
209
220
|
"Sa"
|
|
210
|
-
],
|
|
221
|
+
], p = (e) => String(e).padStart(2, "0"), m = (e, t, n) => `${e}-${p(t + 1)}-${p(n)}`, h = (e) => {
|
|
211
222
|
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
212
223
|
return t ? {
|
|
213
224
|
y: +t[1],
|
|
214
225
|
m: t[2] - 1,
|
|
215
226
|
d: +t[3]
|
|
216
227
|
} : null;
|
|
217
|
-
},
|
|
218
|
-
let t =
|
|
219
|
-
return t ? `${
|
|
220
|
-
},
|
|
221
|
-
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 {
|
|
222
232
|
static get observedAttributes() {
|
|
223
233
|
return [
|
|
224
234
|
"value",
|
|
@@ -229,7 +239,7 @@ var e = {
|
|
|
229
239
|
];
|
|
230
240
|
}
|
|
231
241
|
constructor() {
|
|
232
|
-
super(), this.
|
|
242
|
+
super(), this._value = "";
|
|
233
243
|
let e = new Date(2e3, 0, 1);
|
|
234
244
|
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
235
245
|
}
|
|
@@ -243,46 +253,46 @@ var e = {
|
|
|
243
253
|
return this._value;
|
|
244
254
|
}
|
|
245
255
|
set value(e) {
|
|
246
|
-
this._value = e || "",
|
|
256
|
+
this._value = e || "", i(this, this._value), this._syncTrigger(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
247
257
|
}
|
|
248
258
|
render() {
|
|
249
259
|
this._value = this.getAttribute("value") || this._value;
|
|
250
|
-
let e = this.getAttribute("placeholder") || "Enter Date", t =
|
|
260
|
+
let e = this.getAttribute("placeholder") || "Enter Date", t = h(this._value);
|
|
251
261
|
t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
|
|
252
262
|
<div class="datepicker">
|
|
253
263
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
254
|
-
<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>
|
|
255
265
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
256
266
|
</button>
|
|
257
267
|
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
258
|
-
</div>`, this._rendered = !0, this._wire();
|
|
268
|
+
</div>`, this._rendered = !0, i(this, this._value), this._wire();
|
|
259
269
|
}
|
|
260
|
-
|
|
261
|
-
|
|
270
|
+
_syncFormValue() {
|
|
271
|
+
i(this, this._value);
|
|
262
272
|
}
|
|
263
273
|
_syncTrigger() {
|
|
264
274
|
let e = this.querySelector("[data-trigger-label]");
|
|
265
275
|
if (!e) return;
|
|
266
|
-
let t =
|
|
267
|
-
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);
|
|
268
278
|
}
|
|
269
279
|
_renderMonth() {
|
|
270
|
-
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) => {
|
|
271
281
|
let r = new Date(e, t, n).getTime();
|
|
272
282
|
return !!(i && r < new Date(i.y, i.m, i.d).getTime() || a && r > new Date(a.y, a.m, a.d).getTime());
|
|
273
283
|
}, s = "";
|
|
274
284
|
for (let e = 0; e < t; e++) s += "<span class=\"datepicker-day is-outside\"></span>";
|
|
275
285
|
for (let e = 1; e <= n; e++) {
|
|
276
|
-
let t =
|
|
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);
|
|
277
287
|
s += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${i ? " disabled" : ""}>${e}</button>`;
|
|
278
288
|
}
|
|
279
289
|
e.innerHTML = `
|
|
280
290
|
<div class="datepicker-head">
|
|
281
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>
|
|
282
|
-
<span class="datepicker-month">${
|
|
292
|
+
<span class="datepicker-month">${d[this._viewM]} ${this._viewY}</span>
|
|
283
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>
|
|
284
294
|
</div>
|
|
285
|
-
<div class="datepicker-weekdays">${
|
|
295
|
+
<div class="datepicker-weekdays">${f.map((e) => `<span>${e}</span>`).join("")}</div>
|
|
286
296
|
<div class="datepicker-grid">${s}</div>
|
|
287
297
|
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
|
|
288
298
|
}
|
|
@@ -310,13 +320,12 @@ var e = {
|
|
|
310
320
|
n() && !this.contains(e.target) && i();
|
|
311
321
|
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
312
322
|
n() && e.key === "Escape" && i();
|
|
313
|
-
}, document.addEventListener("keydown", this._onDocKey), this.
|
|
323
|
+
}, document.addEventListener("keydown", this._onDocKey), this._syncFormValue();
|
|
314
324
|
}
|
|
315
325
|
disconnectedCallback() {
|
|
316
326
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey);
|
|
317
327
|
}
|
|
318
|
-
},
|
|
319
|
-
static formAssociated = !0;
|
|
328
|
+
}, v = class extends HTMLElement {
|
|
320
329
|
_accessibleName() {
|
|
321
330
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
322
331
|
}
|
|
@@ -325,11 +334,12 @@ var e = {
|
|
|
325
334
|
"placeholder",
|
|
326
335
|
"search-placeholder",
|
|
327
336
|
"searchable",
|
|
328
|
-
"disabled"
|
|
337
|
+
"disabled",
|
|
338
|
+
"aria-label"
|
|
329
339
|
];
|
|
330
340
|
}
|
|
331
341
|
constructor() {
|
|
332
|
-
super(), this.
|
|
342
|
+
super(), this._values = [], this._optionsProp = null, this._active = -1;
|
|
333
343
|
}
|
|
334
344
|
connectedCallback() {
|
|
335
345
|
if (!this._rendered) {
|
|
@@ -347,7 +357,7 @@ var e = {
|
|
|
347
357
|
return this._values.slice();
|
|
348
358
|
}
|
|
349
359
|
set values(e) {
|
|
350
|
-
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();
|
|
351
361
|
}
|
|
352
362
|
set options(e) {
|
|
353
363
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -361,7 +371,7 @@ var e = {
|
|
|
361
371
|
e.length && (this._declared = e.map((e) => ({
|
|
362
372
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
363
373
|
label: e.innerHTML,
|
|
364
|
-
[
|
|
374
|
+
[a]: !0,
|
|
365
375
|
selected: e.hasAttribute("selected")
|
|
366
376
|
})));
|
|
367
377
|
}
|
|
@@ -374,104 +384,104 @@ var e = {
|
|
|
374
384
|
}
|
|
375
385
|
_labelHtmlFor(e) {
|
|
376
386
|
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
377
|
-
return t ?
|
|
387
|
+
return t ? s(t) : o(e);
|
|
378
388
|
}
|
|
379
389
|
render() {
|
|
380
390
|
this._snapshotDeclared();
|
|
381
391
|
let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
|
|
382
|
-
|
|
392
|
+
i(this, this._values.join(",")), this.innerHTML = `
|
|
383
393
|
<div class="search-select">
|
|
384
|
-
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
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\"" : ""}>
|
|
385
395
|
<div class="ms-chips" data-chips></div>
|
|
386
396
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
387
397
|
</div>
|
|
388
398
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
389
|
-
${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>` : ""}
|
|
390
400
|
<div class="search-select-options"></div>
|
|
391
401
|
<div class="search-select-empty" hidden>No matches</div>
|
|
392
402
|
</div>
|
|
393
|
-
</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();
|
|
394
404
|
}
|
|
395
405
|
_renderControl() {
|
|
396
406
|
let e = this.querySelector("[data-chips]");
|
|
397
407
|
if (!e) return;
|
|
398
408
|
let t = this.getAttribute("placeholder") || "Select…";
|
|
399
409
|
if (!this._values.length) {
|
|
400
|
-
e.innerHTML = `<span class="search-select-placeholder">${
|
|
410
|
+
e.innerHTML = `<span class="search-select-placeholder">${o(t)}</span>`;
|
|
401
411
|
return;
|
|
402
412
|
}
|
|
403
|
-
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="${
|
|
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("");
|
|
404
414
|
}
|
|
405
415
|
_renderOptions(e) {
|
|
406
416
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
407
417
|
if (!t) return;
|
|
408
418
|
let r = (e || "").trim().toLowerCase(), i = this._readOptions();
|
|
409
|
-
r && (i = i.filter((e) =>
|
|
419
|
+
r && (i = i.filter((e) => b(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
|
|
410
420
|
let t = this._values.includes(String(e.value));
|
|
411
|
-
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>`;
|
|
412
422
|
}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
|
|
413
423
|
}
|
|
414
424
|
_wire() {
|
|
415
|
-
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");
|
|
416
426
|
if (!e || !t) return;
|
|
417
|
-
let
|
|
427
|
+
let o = () => this.hasAttribute("disabled"), s = () => {
|
|
418
428
|
let n = e.getBoundingClientRect();
|
|
419
429
|
t.style.position = "fixed", t.style.top = `${n.bottom + 4}px`, t.style.left = `${n.left}px`, t.style.width = `${n.width}px`;
|
|
420
|
-
},
|
|
421
|
-
let t =
|
|
430
|
+
}, c = () => [...this.querySelectorAll(".search-select-option")], l = () => c().filter((e) => !e.hidden), u = (e) => {
|
|
431
|
+
let t = l();
|
|
422
432
|
this._active = e;
|
|
423
|
-
for (let e of
|
|
433
|
+
for (let e of c()) e.classList.remove("is-active");
|
|
424
434
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
425
|
-
},
|
|
426
|
-
|
|
427
|
-
}, f = () => {
|
|
428
|
-
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()));
|
|
429
437
|
}, p = () => {
|
|
430
|
-
|
|
431
|
-
}, m = (
|
|
432
|
-
|
|
433
|
-
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 }));
|
|
434
441
|
}, h = (e) => {
|
|
435
|
-
|
|
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();
|
|
436
446
|
};
|
|
437
447
|
e.addEventListener("click", (e) => {
|
|
438
448
|
let t = e.target.closest("[data-remove]");
|
|
439
449
|
if (t) {
|
|
440
|
-
e.stopPropagation(),
|
|
450
|
+
e.stopPropagation(), g(t.dataset.remove);
|
|
441
451
|
return;
|
|
442
452
|
}
|
|
443
|
-
|
|
444
|
-
}),
|
|
453
|
+
d() ? p() : f();
|
|
454
|
+
}), a.addEventListener("click", (e) => {
|
|
445
455
|
let t = e.target.closest(".search-select-option");
|
|
446
|
-
t && (
|
|
447
|
-
}),
|
|
456
|
+
t && (h(t.dataset.value), n?.focus());
|
|
457
|
+
}), a.addEventListener("mousemove", (e) => {
|
|
448
458
|
let t = e.target.closest(".search-select-option");
|
|
449
|
-
t && l(
|
|
459
|
+
t && u(l().indexOf(t));
|
|
450
460
|
}), n?.addEventListener("input", () => {
|
|
451
|
-
this._renderOptions(n.value), r && (r.hidden = !n.value),
|
|
461
|
+
this._renderOptions(n.value), r && (r.hidden = !n.value), u(-1);
|
|
452
462
|
});
|
|
453
|
-
let
|
|
454
|
-
let r =
|
|
455
|
-
t.key === "ArrowDown" ? (t.preventDefault(),
|
|
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]);
|
|
456
466
|
};
|
|
457
|
-
n?.addEventListener("keydown",
|
|
467
|
+
n?.addEventListener("keydown", _), r?.addEventListener("click", () => {
|
|
458
468
|
n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
|
|
459
469
|
}), e.addEventListener("keydown", (e) => {
|
|
460
|
-
if (
|
|
461
|
-
|
|
470
|
+
if (d()) {
|
|
471
|
+
_(e);
|
|
462
472
|
return;
|
|
463
473
|
}
|
|
464
|
-
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
474
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
|
|
465
475
|
}), this._onDocClick = (e) => {
|
|
466
|
-
|
|
476
|
+
d() && !this.contains(e.target) && p();
|
|
467
477
|
}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
|
|
468
|
-
|
|
478
|
+
d() && s();
|
|
469
479
|
});
|
|
470
480
|
}
|
|
471
481
|
disconnectedCallback() {
|
|
472
482
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
473
483
|
}
|
|
474
|
-
},
|
|
484
|
+
}, y = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), b = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), x = [
|
|
475
485
|
[
|
|
476
486
|
"AF",
|
|
477
487
|
"Afghanistan",
|
|
@@ -1697,12 +1707,11 @@ var e = {
|
|
|
1697
1707
|
"Zimbabwe",
|
|
1698
1708
|
"263"
|
|
1699
1709
|
]
|
|
1700
|
-
],
|
|
1710
|
+
], S = (e) => (x.find((t) => t[0] === e) || [
|
|
1701
1711
|
"",
|
|
1702
1712
|
"",
|
|
1703
1713
|
""
|
|
1704
|
-
])[2],
|
|
1705
|
-
static formAssociated = !0;
|
|
1714
|
+
])[2], C = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, w = class extends HTMLElement {
|
|
1706
1715
|
static get observedAttributes() {
|
|
1707
1716
|
return [
|
|
1708
1717
|
"value",
|
|
@@ -1712,7 +1721,7 @@ var e = {
|
|
|
1712
1721
|
];
|
|
1713
1722
|
}
|
|
1714
1723
|
constructor() {
|
|
1715
|
-
super(), this.
|
|
1724
|
+
super(), this._country = "IN", this._national = "";
|
|
1716
1725
|
}
|
|
1717
1726
|
connectedCallback() {
|
|
1718
1727
|
this._rendered || this.render();
|
|
@@ -1721,74 +1730,73 @@ var e = {
|
|
|
1721
1730
|
this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
|
|
1722
1731
|
}
|
|
1723
1732
|
get value() {
|
|
1724
|
-
return `+${
|
|
1733
|
+
return `+${S(this._country)}${this._national}`;
|
|
1725
1734
|
}
|
|
1726
1735
|
set value(e) {
|
|
1727
1736
|
this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
|
|
1728
1737
|
}
|
|
1729
1738
|
_commit() {
|
|
1730
|
-
|
|
1739
|
+
i(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1731
1740
|
}
|
|
1732
1741
|
render() {
|
|
1733
1742
|
let e = this.getAttribute("placeholder") || "Enter phone number";
|
|
1734
1743
|
this._country = this.getAttribute("country") || this._country;
|
|
1735
|
-
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("");
|
|
1736
1745
|
this.innerHTML = `
|
|
1737
1746
|
<div class="phone-input-wrap">
|
|
1738
1747
|
<div class="phone-country-adornment">
|
|
1739
1748
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1740
|
-
<span class="${
|
|
1749
|
+
<span class="${C(this._country)}" data-flag aria-hidden="true"></span>
|
|
1741
1750
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
1742
|
-
<span class="phone-dial" data-dial>+${
|
|
1751
|
+
<span class="phone-dial" data-dial>+${S(this._country)}</span>
|
|
1743
1752
|
</button>
|
|
1744
1753
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
1745
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>
|
|
1746
1755
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
1747
1756
|
</div>
|
|
1748
1757
|
</div>
|
|
1749
|
-
<input type="tel" class="input" placeholder="${
|
|
1750
|
-
</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();
|
|
1751
1760
|
}
|
|
1752
1761
|
_wire() {
|
|
1753
|
-
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]");
|
|
1754
1763
|
if (!e || !t) return;
|
|
1755
|
-
let
|
|
1764
|
+
let l = () => !t.hidden, u = () => {
|
|
1756
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));
|
|
1757
1766
|
t.style.top = `${Math.max(8, o)}px`, t.style.left = `${s}px`;
|
|
1758
|
-
}, u = () => {
|
|
1759
|
-
t.hidden = !1, e.setAttribute("aria-expanded", "true"), n.value = "", f(""), l(), n.focus();
|
|
1760
1767
|
}, d = () => {
|
|
1768
|
+
t.hidden = !1, e.setAttribute("aria-expanded", "true"), n.value = "", p(""), u(), n.focus();
|
|
1769
|
+
}, f = () => {
|
|
1761
1770
|
t.hidden = !0, e.setAttribute("aria-expanded", "false");
|
|
1762
1771
|
};
|
|
1763
1772
|
this._reposition = () => {
|
|
1764
|
-
|
|
1773
|
+
l() && u();
|
|
1765
1774
|
}, window.addEventListener("scroll", this._reposition, !0), window.addEventListener("resize", this._reposition);
|
|
1766
|
-
let
|
|
1775
|
+
let p = (e) => {
|
|
1767
1776
|
let t = e.trim().toLowerCase(), n = 0;
|
|
1768
1777
|
for (let e of r.querySelectorAll(".country-dropdown-item")) {
|
|
1769
1778
|
let r = !t || e.textContent.toLowerCase().includes(t);
|
|
1770
1779
|
e.hidden = !r, r && (n += 1);
|
|
1771
1780
|
}
|
|
1772
|
-
|
|
1773
|
-
},
|
|
1774
|
-
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)}`);
|
|
1775
1784
|
for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
|
|
1776
|
-
|
|
1785
|
+
f(), this._commit();
|
|
1777
1786
|
};
|
|
1778
|
-
e.addEventListener("click", () =>
|
|
1787
|
+
e.addEventListener("click", () => l() ? f() : d()), n.addEventListener("input", () => p(n.value)), r.addEventListener("click", (e) => {
|
|
1779
1788
|
let t = e.target.closest(".country-dropdown-item");
|
|
1780
|
-
t &&
|
|
1781
|
-
}),
|
|
1782
|
-
this._national =
|
|
1789
|
+
t && m(t.dataset.iso);
|
|
1790
|
+
}), o.addEventListener("input", () => {
|
|
1791
|
+
this._national = o.value.replace(/[^0-9]/g, ""), this._commit();
|
|
1783
1792
|
}), this._onDocClick = (e) => {
|
|
1784
|
-
|
|
1785
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
1793
|
+
l() && !this.contains(e.target) && f();
|
|
1794
|
+
}, document.addEventListener("click", this._onDocClick), i(this, this.value);
|
|
1786
1795
|
}
|
|
1787
1796
|
disconnectedCallback() {
|
|
1788
1797
|
this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1789
1798
|
}
|
|
1790
|
-
},
|
|
1791
|
-
static formAssociated = !0;
|
|
1799
|
+
}, T = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), E = class extends HTMLElement {
|
|
1792
1800
|
static get observedAttributes() {
|
|
1793
1801
|
return [
|
|
1794
1802
|
"value",
|
|
@@ -1804,7 +1812,7 @@ var e = {
|
|
|
1804
1812
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
1805
1813
|
}
|
|
1806
1814
|
constructor() {
|
|
1807
|
-
super(), this.
|
|
1815
|
+
super(), this._value = "", this._optionsProp = null, this._active = -1;
|
|
1808
1816
|
}
|
|
1809
1817
|
connectedCallback() {
|
|
1810
1818
|
this._rendered || this.render();
|
|
@@ -1816,7 +1824,7 @@ var e = {
|
|
|
1816
1824
|
return this._value;
|
|
1817
1825
|
}
|
|
1818
1826
|
set value(e) {
|
|
1819
|
-
this._value = e == null ? "" : String(e),
|
|
1827
|
+
this._value = e == null ? "" : String(e), i(this, this._value), this._syncSelected();
|
|
1820
1828
|
}
|
|
1821
1829
|
set options(e) {
|
|
1822
1830
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -1830,7 +1838,7 @@ var e = {
|
|
|
1830
1838
|
e.length && (this._declared = e.map((e) => ({
|
|
1831
1839
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
1832
1840
|
label: e.innerHTML,
|
|
1833
|
-
[
|
|
1841
|
+
[a]: !0,
|
|
1834
1842
|
selected: e.hasAttribute("selected")
|
|
1835
1843
|
})));
|
|
1836
1844
|
}
|
|
@@ -1839,23 +1847,23 @@ var e = {
|
|
|
1839
1847
|
}
|
|
1840
1848
|
render() {
|
|
1841
1849
|
this._snapshotDeclared();
|
|
1842
|
-
let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.getAttribute("placeholder") || "Select...", r = this.getAttribute("search-placeholder") || "Search...",
|
|
1843
|
-
|
|
1844
|
-
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) => {
|
|
1845
1853
|
let t = String(e.value) === String(this._value);
|
|
1846
|
-
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>`;
|
|
1847
1855
|
}).join("");
|
|
1848
1856
|
this.innerHTML = `
|
|
1849
1857
|
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}">
|
|
1850
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
1851
|
-
<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>
|
|
1852
1860
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
1853
1861
|
</button>
|
|
1854
1862
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
1855
|
-
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
1856
|
-
<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>
|
|
1857
1865
|
</div>
|
|
1858
|
-
</div>`, this._rendered = !0, this._wire();
|
|
1866
|
+
</div>`, this._rendered = !0, i(this, this._value), this._wire();
|
|
1859
1867
|
}
|
|
1860
1868
|
_refs() {
|
|
1861
1869
|
return {
|
|
@@ -1880,7 +1888,7 @@ var e = {
|
|
|
1880
1888
|
let t = e.dataset.value === String(this._value);
|
|
1881
1889
|
e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
|
|
1882
1890
|
}
|
|
1883
|
-
e && (e.innerHTML = t ?
|
|
1891
|
+
e && (e.innerHTML = t ? s(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
|
|
1884
1892
|
}
|
|
1885
1893
|
_wire() {
|
|
1886
1894
|
let e = this._refs();
|
|
@@ -1935,14 +1943,14 @@ var e = {
|
|
|
1935
1943
|
disconnectedCallback() {
|
|
1936
1944
|
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1937
1945
|
}
|
|
1938
|
-
},
|
|
1946
|
+
}, D = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), O = "image/png,image/jpeg,image/webp", k = 5, A = {
|
|
1939
1947
|
"image/png": [".png"],
|
|
1940
1948
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
1941
1949
|
"image/webp": [".webp"],
|
|
1942
1950
|
"image/gif": [".gif"],
|
|
1943
1951
|
"image/svg+xml": [".svg"],
|
|
1944
1952
|
"application/pdf": [".pdf"]
|
|
1945
|
-
},
|
|
1953
|
+
}, j = {
|
|
1946
1954
|
"image/png": "PNG",
|
|
1947
1955
|
"image/jpeg": "JPG",
|
|
1948
1956
|
"image/webp": "WEBP",
|
|
@@ -1956,34 +1964,34 @@ var e = {
|
|
|
1956
1964
|
".gif": "GIF",
|
|
1957
1965
|
".svg": "SVG",
|
|
1958
1966
|
".pdf": "PDF"
|
|
1959
|
-
},
|
|
1960
|
-
function
|
|
1967
|
+
}, M = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
|
|
1968
|
+
function N(e) {
|
|
1961
1969
|
let t = [];
|
|
1962
|
-
for (let n of
|
|
1963
|
-
let e =
|
|
1970
|
+
for (let n of M(e)) {
|
|
1971
|
+
let e = j[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
1964
1972
|
t.includes(e) || t.push(e);
|
|
1965
1973
|
}
|
|
1966
1974
|
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
1967
1975
|
}
|
|
1968
|
-
function
|
|
1969
|
-
let n =
|
|
1976
|
+
function P(e, t) {
|
|
1977
|
+
let n = M(t);
|
|
1970
1978
|
if (!n.length) return !0;
|
|
1971
1979
|
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
1972
|
-
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)));
|
|
1973
1981
|
}
|
|
1974
|
-
function
|
|
1982
|
+
function F(e, t = {}) {
|
|
1975
1983
|
if (!e) return null;
|
|
1976
|
-
let n = t.accept === void 0 ?
|
|
1977
|
-
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.`;
|
|
1978
1986
|
}
|
|
1979
1987
|
//#endregion
|
|
1980
1988
|
//#region src/index.js
|
|
1981
|
-
var
|
|
1989
|
+
var I = (e, t) => {
|
|
1982
1990
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
1983
1991
|
};
|
|
1984
|
-
function
|
|
1985
|
-
|
|
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);
|
|
1986
1994
|
}
|
|
1987
|
-
|
|
1995
|
+
L();
|
|
1988
1996
|
//#endregion
|
|
1989
|
-
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.1",
|
|
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",
|