@webority/ui-elements 0.6.10 → 0.6.11
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 +27 -24
- package/dist/ui-elements.js +214 -161
- 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=4;function a(e,t,n={}){if(!e||!t)return;let r=e.getBoundingClientRect(),a=t.offsetHeight,o=window.innerHeight-r.bottom,s=o<a+i&&r.top>o;t.classList.toggle(`drop-up`,s),t.style.position=`fixed`,t.style.top=s?`${Math.max(i,r.top-a-i)}px`:`${r.bottom+i}px`,n.matchWidth&&(t.style.width=`${r.width}px`);let c=t.offsetWidth,l=Math.min(r.left,window.innerWidth-c-i);t.style.left=`${Math.max(i,l)}px`}var
|
|
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="${
|
|
46
|
+
<defs><clipPath id="wui_delete_clip0"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath><clipPath id="wui_delete_clip1"><rect width="65" height="65" fill="white" transform="translate(54.3535 54.502)"/></clipPath></defs>`},n=Object.keys(t),r=class extends HTMLElement{static get observedAttributes(){return[`tone`,`size`]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){let e=this.getAttribute(`tone`),n=this.getAttribute(`size`)||`72`,r=t[e]||t.info;this.innerHTML=`<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`}},i=4;function a(e,t,n={}){if(!e||!t)return;let r=e.getBoundingClientRect(),a=t.offsetHeight,o=window.innerHeight-r.bottom,s=o<a+i&&r.top>o;t.classList.toggle(`drop-up`,s),t.style.position=`fixed`,t.style.top=s?`${Math.max(i,r.top-a-i)}px`:`${r.bottom+i}px`,n.matchWidth&&(t.style.width=`${r.width}px`);let c=t.offsetWidth,l=Math.min(r.left,window.innerWidth-c-i);t.style.left=`${Math.max(i,l)}px`}function o(e,t){s(e),e._reanchor=t,window.addEventListener(`resize`,e._reanchor),window.addEventListener(`scroll`,e._reanchor,!0)}function s(e){e?._reanchor&&(window.removeEventListener(`resize`,e._reanchor),window.removeEventListener(`scroll`,e._reanchor,!0),e._reanchor=null)}var c=`data-wui-mirror`;function l(e,t){let n=e.getAttribute(`name`),r=e.querySelector(`:scope > input[${c}]`);if(!n){r?.remove();return}r||(r=document.createElement(`input`),r.type=`hidden`,r.setAttribute(c,``),e.appendChild(r)),r.name=n,r.value=t==null?``:String(t);for(let t of e.attributes)t.name.startsWith(`data-val`)&&r.setAttribute(t.name,t.value);r.disabled=e.hasAttribute(`disabled`)}var u=Symbol(`wui.trustedHtml`),d=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`).replace(/>/g,`>`).replace(/"/g,`"`).replace(/'/g,`'`),f=e=>{if(!e)return``;let t=String(e).toLowerCase().replace(/[^a-z0-9-]/g,``);return t?`<i class="bi bi-${t}" aria-hidden="true"></i>`:``},p=e=>{if(e==null)return``;let t=e[u]?String(e.label??``):d(e.label),n=f(e.icon);return n?`<span class="wui-opt-label">${n}${t}</span>`:t},m=class extends HTMLElement{_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`min-chars`,`debounce`,`remote`,`size`,`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),l(this,this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=g(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,icon:e.getAttribute(`icon`)||void 0,[u]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this.getAttribute(`placeholder`)||`Search…`,t=this.getAttribute(`size`),n=t===`sm`?` search-select-sm`:t===`lg`?` search-select-lg`:``;this.innerHTML=`
|
|
47
|
+
<div class="search-select${n}">
|
|
48
|
+
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${h(this._accessibleName())}">
|
|
49
|
+
<input class="search-select-input search-select-ac-input" placeholder="${h(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,33 +55,34 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
55
55
|
<div class="search-select-empty" hidden>No matches</div>
|
|
56
56
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
57
57
|
</div>
|
|
58
|
-
</div>`,this._rendered=!0,
|
|
58
|
+
</div>`,this._rendered=!0,l(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=>g(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="${h(e.value)}" aria-selected="${t}">${p(e)}</button>`}).join(``),this._active=-1;let i=n.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&i&&!r.length)),t.empty&&(t.empty.hidden=this._loading||r.length>0||this._remote&&i)}_wire(){let e=this._refs();if(!e.control||!e.input)return;let t=()=>a(e.control,e.menu,{matchWidth:!0}),n=()=>this._optionEls().filter(e=>!e.hidden),r=e=>{let t=n();this._active=e;for(let e of this._optionEls())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},i=()=>!e.menu.hidden,s=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),this._renderOptions()},c=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),r(-1),this._syncInput()},u=t=>{this._value=t.dataset.value,this._label=g(t.innerHTML),l(this,this._value),e.input.value=this._label,this.dispatchEvent(new Event(`change`,{bubbles:!0})),c(),e.input.focus()};e.input.addEventListener(`focus`,()=>s()),e.input.addEventListener(`input`,()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),i()||s(),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()||s(),r(Math.min(this._active+1,t.length-1))):e.key===`ArrowUp`?(e.preventDefault(),r(Math.max(this._active-1,0))):e.key===`Enter`?t[this._active]&&(e.preventDefault(),u(t[this._active])):e.key===`Escape`&&c()}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&u(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&r(this._optionEls().indexOf(t))}),e.optionsWrap.addEventListener(`mouseleave`,()=>r(-1)),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,l(this,``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus()}),this._onDocClick=e=>{i()&&!this.contains(e.target)&&c()},document.addEventListener(`click`,this._onDocClick),o(this,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),s(this),clearTimeout(this._timer)}},h=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),g=e=>String(e??``).replace(/<[^>]*>/g,``),_=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],v=[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`],y=e=>String(e).padStart(2,`0`),b=(e,t,n)=>`${e}-${y(t+1)}-${y(n)}`,x=e=>{let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e||``);return t?{y:+t[1],m:t[2]-1,d:+t[3]}:null},S=e=>{let t=x(e);return t?`${y(t.d)} ${_[t.m].slice(0,3)} ${t.y}`:``},C=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||``,l(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=x(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?S(this._value):e}</span>
|
|
62
62
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
63
63
|
</button>
|
|
64
64
|
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
65
|
-
</div>`,this._rendered=!0,
|
|
65
|
+
</div>`,this._rendered=!0,l(this,this._value),this._wire()}_syncFormValue(){l(this,this._value)}_syncTrigger(){let e=this.querySelector(`[data-trigger-label]`);if(!e)return;let t=x(this._value);e.textContent=t?S(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=x(this._value),i=x(this.getAttribute(`min`)),a=x(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=b(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">${_[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">${v.map(e=>`<span>${e}</span>`).join(``)}</div>
|
|
72
72
|
<div class="datepicker-grid">${s}</div>
|
|
73
|
-
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_position(e,t){a(e,t)}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{if(!
|
|
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="${
|
|
73
|
+
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_position(e,t){a(e,t)}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{if(!x(this._value)&&!this._viewNavigated){let e=new Date;this._viewY=e.getFullYear(),this._viewM=e.getMonth()}this._renderMonth(),t.hidden=!1,this._position(e,t),e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewNavigated=!0,this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{n()&&e.key===`Escape`&&i()},document.addEventListener(`keydown`,this._onDocKey),o(this,()=>{n()&&this._position(e,t)}),this._syncFormValue()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),this._onDocKey&&document.removeEventListener(`keydown`,this._onDocKey),s(this)}},w=class extends HTMLElement{_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`,`icon`,`size`,`collapse-chips`,`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):[],l(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,icon:e.getAttribute(`icon`)||void 0,[u]:!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?p(t):d(e)}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`,n=this.getAttribute(`icon`),r=this.getAttribute(`size`),i=r===`sm`?` search-select-sm`:r===`lg`?` search-select-lg`:``;l(this,this._values.join(`,`)),this.innerHTML=`
|
|
74
|
+
<div class="search-select${i}">
|
|
75
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${T(this._accessibleName())}"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
|
|
76
|
+
${n?`<i class="bi bi-${T(n)} search-select-icon" aria-hidden="true"></i>`:``}
|
|
76
77
|
<div class="ms-chips" data-chips></div>
|
|
77
78
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
78
79
|
</div>
|
|
79
80
|
<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="${
|
|
81
|
+
${e?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${T(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
82
|
<div class="search-select-options"></div>
|
|
82
83
|
<div class="search-select-empty" hidden>No matches</div>
|
|
83
84
|
</div>
|
|
84
|
-
</div>`,this._rendered=!0,
|
|
85
|
+
</div>`,this._rendered=!0,l(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">${d(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="${T(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``),this._collapseChips()}_collapseChips(){let e=this.querySelector(`[data-chips]`);if(!e||!this.hasAttribute(`collapse-chips`)||!this._values.length)return;e.querySelector(`.chip-more`)?.remove();let t=[...e.querySelectorAll(`:scope > .chip:not(.chip-more)`)];for(let e of t)e.style.display=``;if(!t.length)return;let n=e.clientWidth,r=e=>e.offsetLeft+e.offsetWidth;if(r(t[t.length-1])<=n)return;let i=document.createElement(`span`);i.className=`chip chip-sm chip-more`,i.textContent=`+${t.length}`,e.appendChild(i);let a=i.offsetWidth+6,o=0;for(let e of t)if(r(e)<=n-a)o+=1;else break;o<1&&(o=1);for(let e=o;e<t.length;e+=1)t[e].style.display=`none`;i.textContent=`+${t.length-o}`}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>E(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="${T(e.value)}" aria-selected="${t}"><span class="ms-opt-label">${p(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></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 s=()=>this.hasAttribute(`disabled`);!this._ro&&typeof ResizeObserver<`u`&&(this._ro=new ResizeObserver(()=>this._collapseChips()),this._ro.observe(this));let c=()=>a(e,t,{matchWidth:!0}),u=()=>[...this.querySelectorAll(`.search-select-option`)],d=()=>u().filter(e=>!e.hidden),f=e=>{let t=d();this._active=e;for(let e of u())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},p=()=>!t.hidden,m=()=>{s()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),c(),n&&(n.value=``,this._renderOptions(``),n.focus()))},h=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),f(-1)},g=()=>{l(this,this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},_=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:``),g()},v=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),g()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),v(t.dataset.remove);return}p()?h():m()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(_(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&f(d().indexOf(t))}),i.addEventListener(`mouseleave`,()=>f(-1)),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),f(-1)});let y=t=>{let r=d();t.key===`ArrowDown`?(t.preventDefault(),f(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),f(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&_(r[this._active].dataset.value)):t.key===`Escape`?(h(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&v(this._values[this._values.length-1])};n?.addEventListener(`keydown`,y),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{if(p()){y(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),m())}),this._onDocClick=e=>{p()&&!this.contains(e.target)&&h()},document.addEventListener(`click`,this._onDocClick),o(this,()=>{p()&&c()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),s(this),this._ro?.disconnect(),this._ro=null}},T=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),E=e=>String(e??``).replace(/<[^>]*>/g,``),D=/[^0-9]/g,O=/[^0-9a-zA-Z]/g,k=class extends HTMLElement{static get observedAttributes(){return[`value`,`length`,`mode`,`disabled`,`aria-label`]}get length(){let e=Number.parseInt(this.getAttribute(`length`)??`6`,10);return Number.isFinite(e)&&e>0?e:6}set length(e){this.setAttribute(`length`,String(e))}get mode(){return this.getAttribute(`mode`)===`alphanumeric`?`alphanumeric`:`numeric`}set mode(e){this.setAttribute(`mode`,String(e??`numeric`))}get value(){return this._value??``}set value(e){this._value=this._clean(e),l(this,this._value),this._paint()}_clean(e){return(e==null?``:String(e)).replace(this.mode===`alphanumeric`?O:D,``).slice(0,this.length)}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?(this._value=this._clean(n),l(this,this._value),this._paint()):this.render())}render(){this._value=this._clean(this.getAttribute(`value`)??this._value);let e=this.length,t=this.mode===`numeric`,n=this.hasAttribute(`disabled`),r=Array.from({length:e},()=>`<span class="otp-slot" aria-hidden="true"></span>`).join(``),i=this.getAttribute(`aria-label`),a=i?` aria-label="${i.replace(/"/g,`"`)}"`:``;this.innerHTML=`
|
|
85
86
|
<div class="otp">
|
|
86
87
|
<input
|
|
87
88
|
class="otp-field"
|
|
@@ -94,29 +95,31 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
94
95
|
spellcheck="false"
|
|
95
96
|
${n?`disabled`:``} />
|
|
96
97
|
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
97
|
-
</div>`,this._rendered=!0,
|
|
98
|
+
</div>`,this._rendered=!0,l(this,this._value),this._wire(),this._paint()}_refs(){return{input:this.querySelector(`.otp-field`),slots:[...this.querySelectorAll(`.otp-slot`)]}}_paint(){let{input:e,slots:t}=this._refs();if(!e||!t.length)return;e.value!==this._value&&(e.value=this._value);let n=e.selectionStart??this._value.length,r=Math.min(n,t.length-1),i=document.activeElement===e;t.forEach((e,t)=>{e.textContent=this._value[t]??``,e.classList.toggle(`filled`,!!this._value[t]),e.classList.toggle(`active`,i&&t===r)})}_wire(){let{input:e}=this._refs();if(!e)return;let t=e=>{let t=this._clean(e),n=t!==this._value;this._value=t,l(this,this._value),this._paint(),n&&this.dispatchEvent(new Event(`change`,{bubbles:!0})),n&&t.length===this.length&&this.dispatchEvent(new CustomEvent(`complete`,{bubbles:!0,detail:t}))};e.addEventListener(`input`,()=>t(e.value)),e.addEventListener(`paste`,e=>{let n=e.clipboardData?.getData(`text`);n!=null&&(e.preventDefault(),t(n))});for(let t of[`keyup`,`click`,`focus`,`blur`,`select`])e.addEventListener(t,()=>this._paint());document.addEventListener(`selectionchange`,()=>{document.activeElement===e&&this._paint()})}},A=[[`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`]],j=e=>(A.find(t=>t[0]===e)||[``,``,``])[2],M=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,N=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`+${j(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){l(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=A.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${M(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
98
99
|
<div class="phone-input-wrap">
|
|
99
100
|
<div class="phone-country-adornment">
|
|
100
101
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
101
|
-
<span class="${
|
|
102
|
+
<span class="${M(this._country)}" data-flag aria-hidden="true"></span>
|
|
102
103
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
103
|
-
<span class="phone-dial" data-dial>+${
|
|
104
|
+
<span class="phone-dial" data-dial>+${j(this._country)}</span>
|
|
104
105
|
</button>
|
|
105
106
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
106
107
|
<div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
|
|
107
108
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
108
109
|
</div>
|
|
109
110
|
</div>
|
|
110
|
-
<input type="tel" class="input" placeholder="${
|
|
111
|
-
</div>`,this._rendered=!0,
|
|
111
|
+
<input type="tel" class="input" placeholder="${P(e)}" value="${P(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
|
|
112
|
+
</div>`,this._rendered=!0,l(this,this.value),this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),a=this.querySelector(`input[type=tel]`),o=this.querySelector(`[data-flag]`),s=this.querySelector(`[data-dial]`);if(!e||!t)return;let c=()=>!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=()=>{c()&&u()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let p=e=>{let t=e.trim().toLowerCase(),n=0;for(let e of r.querySelectorAll(`.country-dropdown-item`)){let r=!t||e.textContent.toLowerCase().includes(t);e.hidden=!r,r&&(n+=1)}i&&(i.hidden=n>0)},m=e=>{this._country=e,this.setAttribute(`country`,e),o&&(o.className=M(e)),s&&(s.textContent=`+${j(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);f(),this._commit()};e.addEventListener(`click`,()=>c()?f():d()),n.addEventListener(`input`,()=>p(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&m(t.dataset.iso)}),a.addEventListener(`input`,()=>{this._national=a.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{c()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),l(this,this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},P=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),F=class extends HTMLElement{static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`,`size`,`clearable`,`icon`,`prefix`,`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),l(this,this._value),this._syncSelected(),this._syncReset()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,icon:e.getAttribute(`icon`)||void 0,[u]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.hasAttribute(`clearable`),r=this.getAttribute(`size`),i=r===`sm`?` search-select-sm`:r===`lg`?` search-select-lg`:``,a=this.getAttribute(`icon`),o=this.getAttribute(`prefix`),s=this.getAttribute(`placeholder`)||`Select...`,c=this.getAttribute(`search-placeholder`)||`Search...`,u=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);u&&(this._value=String(u.value)),l(this,this._value);let f=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="${I(e.value)}" aria-selected="${t}">${p(e)}</button>`}).join(``);this.innerHTML=`
|
|
112
113
|
<div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}${i}">
|
|
113
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
114
|
-
|
|
114
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${I(this._accessibleName())}"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
115
|
+
${a?`<i class="bi bi-${I(a)} search-select-icon" aria-hidden="true"></i>`:``}
|
|
116
|
+
${o?`<span class="search-select-prefix">${d(o)}</span>`:``}
|
|
117
|
+
<span class="${u?``:`search-select-placeholder`}" data-label>${u?p(u):d(s)}</span>
|
|
115
118
|
${n?`<span class="search-select-reset" role="button" aria-label="Clear selection" hidden><i class="bi bi-x-lg" aria-hidden="true"></i></span>`:``}
|
|
116
119
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
117
120
|
</button>
|
|
118
121
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
119
|
-
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
120
|
-
<div class="search-select-options">${
|
|
122
|
+
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${I(c)}" 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>`:``}
|
|
123
|
+
<div class="search-select-options">${f}<div class="search-select-empty" hidden>No matches</div></div>
|
|
121
124
|
</div>
|
|
122
|
-
</div>`,this._rendered=!0,
|
|
125
|
+
</div>`,this._rendered=!0,l(this,this._value),this._wire(),this._syncReset()}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),reset:this.querySelector(`.search-select-reset`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e}=this._refs(),t=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}e&&(e.innerHTML=t?p(t):e.innerHTML,e.classList.toggle(`search-select-placeholder`,!t))}_syncReset(){let{reset:e}=this._refs();e&&(e.hidden=!(this.hasAttribute(`clearable`)&&this._value!==``&&!this.hasAttribute(`disabled`)))}_wire(){let e=this._refs();if(!e.control||!e.menu)return;let t=()=>{if(this.hasAttribute(`compact`)){let t=e.control.getBoundingClientRect();e.menu.style.width=`max-content`,e.menu.style.minWidth=`${t.width}px`,e.menu.style.maxWidth=`280px`,a(e.control,e.menu)}else a(e.control,e.menu,{matchWidth:!0})},n=e=>{let t=this._visible();this._active=e;for(let e of this._optionEls())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},r=t=>{let n=t.trim().toLowerCase(),r=0;for(let e of this._optionEls()){let t=!n||e.textContent.toLowerCase().includes(n);e.hidden=!t,t&&(r+=1)}e.empty&&(e.empty.hidden=r>0),e.clear&&(e.clear.hidden=!n)},i=()=>!e.menu.hidden,s=()=>{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`)))},c=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),n(-1)},l=t=>{this.value=t.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0})),c(),e.control.focus()},u=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]&&l(r[this._active])):t.key===`Escape`&&(c(),e.control.focus())};e.reset?.addEventListener(`click`,t=>{t.stopPropagation(),this.value=``,this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.control.focus()}),e.control.addEventListener(`click`,()=>i()?c():s()),e.control.addEventListener(`keydown`,e=>{if(i()){u(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),s())}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&n(this._visible().indexOf(t))}),e.optionsWrap.addEventListener(`mouseleave`,()=>n(-1)),e.search?.addEventListener(`input`,()=>{r(e.search.value),n(-1)}),e.search?.addEventListener(`keydown`,u),e.clear?.addEventListener(`click`,()=>{e.search.value=``,r(``),e.search.focus()}),e.menu.addEventListener(`keydown`,u),this._onDocClick=e=>{i()&&!this.contains(e.target)&&c()},document.addEventListener(`click`,this._onDocClick),o(this,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),s(this)}},I=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),L=`image/png,image/jpeg,image/webp`,R=5,z={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},B={"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`},V=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function H(e){let t=[];for(let n of V(e)){let e=B[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 U(e,t){let n=V(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&&(z[e]||[]).some(e=>i.endsWith(e)))}function W(e,t={}){if(!e)return null;let n=t.accept===void 0?L:t.accept,r=t.maxSizeMb||5;return U(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${H(n)} file.`}var G=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function K(){G(`wui-select`,F),G(`wui-phone`,N),G(`wui-datepicker`,C),G(`wui-autocomplete`,m),G(`wui-multiselect`,w),G(`wui-otp`,k),G(`wui-status-icon`,r)}return K(),e.DEFAULT_IMAGE_ACCEPT=L,e.DEFAULT_MAX_SIZE_MB=R,e.STATUS_TONES=n,e.WuiAutocomplete=m,e.WuiDatePicker=C,e.WuiMultiSelect=w,e.WuiOtp=k,e.WuiPhone=N,e.WuiSelect=F,e.WuiStatusIcon=r,e.acceptLabel=H,e.defineWeborityElements=K,e.matchesAccept=U,e.validateFile=W,e})({});
|
package/dist/ui-elements.js
CHANGED
|
@@ -27,22 +27,36 @@ function i(e, t, n = {}) {
|
|
|
27
27
|
let c = t.offsetWidth, l = Math.min(i.left, window.innerWidth - c - r);
|
|
28
28
|
t.style.left = `${Math.max(r, l)}px`;
|
|
29
29
|
}
|
|
30
|
+
function a(e, t) {
|
|
31
|
+
o(e), e._reanchor = t, window.addEventListener("resize", e._reanchor), window.addEventListener("scroll", e._reanchor, !0);
|
|
32
|
+
}
|
|
33
|
+
function o(e) {
|
|
34
|
+
e?._reanchor && (window.removeEventListener("resize", e._reanchor), window.removeEventListener("scroll", e._reanchor, !0), e._reanchor = null);
|
|
35
|
+
}
|
|
30
36
|
//#endregion
|
|
31
37
|
//#region src/formMirror.js
|
|
32
|
-
var
|
|
33
|
-
function
|
|
34
|
-
let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${
|
|
38
|
+
var s = "data-wui-mirror";
|
|
39
|
+
function c(e, t) {
|
|
40
|
+
let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${s}]`);
|
|
35
41
|
if (!n) {
|
|
36
42
|
r?.remove();
|
|
37
43
|
return;
|
|
38
44
|
}
|
|
39
|
-
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(
|
|
45
|
+
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(s, ""), e.appendChild(r)), r.name = n, r.value = t == null ? "" : String(t);
|
|
40
46
|
for (let t of e.attributes) t.name.startsWith("data-val") && r.setAttribute(t.name, t.value);
|
|
41
47
|
r.disabled = e.hasAttribute("disabled");
|
|
42
48
|
}
|
|
43
49
|
//#endregion
|
|
44
50
|
//#region src/optionLabel.js
|
|
45
|
-
var
|
|
51
|
+
var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"), d = (e) => {
|
|
52
|
+
if (!e) return "";
|
|
53
|
+
let t = String(e).toLowerCase().replace(/[^a-z0-9-]/g, "");
|
|
54
|
+
return t ? `<i class="bi bi-${t}" aria-hidden="true"></i>` : "";
|
|
55
|
+
}, f = (e) => {
|
|
56
|
+
if (e == null) return "";
|
|
57
|
+
let t = e[l] ? String(e.label ?? "") : u(e.label), n = d(e.icon);
|
|
58
|
+
return n ? `<span class="wui-opt-label">${n}${t}</span>` : t;
|
|
59
|
+
}, p = class extends HTMLElement {
|
|
46
60
|
_accessibleName() {
|
|
47
61
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
48
62
|
}
|
|
@@ -54,6 +68,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
54
68
|
"min-chars",
|
|
55
69
|
"debounce",
|
|
56
70
|
"remote",
|
|
71
|
+
"size",
|
|
57
72
|
"aria-label"
|
|
58
73
|
];
|
|
59
74
|
}
|
|
@@ -70,9 +85,9 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
70
85
|
return this._value;
|
|
71
86
|
}
|
|
72
87
|
set value(e) {
|
|
73
|
-
this._value = e == null ? "" : String(e),
|
|
88
|
+
this._value = e == null ? "" : String(e), c(this, this._value);
|
|
74
89
|
let t = this._readOptions().find((e) => String(e.value) === this._value);
|
|
75
|
-
t && (this._label =
|
|
90
|
+
t && (this._label = h(t.label)), this._syncInput();
|
|
76
91
|
}
|
|
77
92
|
set options(e) {
|
|
78
93
|
this._optionsProp = Array.isArray(e) ? e : [], this._renderOptions();
|
|
@@ -102,7 +117,8 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
102
117
|
e.length && (this._declared = e.map((e) => ({
|
|
103
118
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
104
119
|
label: e.innerHTML,
|
|
105
|
-
|
|
120
|
+
icon: e.getAttribute("icon") || void 0,
|
|
121
|
+
[l]: !0,
|
|
106
122
|
selected: e.hasAttribute("selected")
|
|
107
123
|
})));
|
|
108
124
|
}
|
|
@@ -111,11 +127,11 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
111
127
|
}
|
|
112
128
|
render() {
|
|
113
129
|
this._snapshotDeclared();
|
|
114
|
-
let e = this.getAttribute("placeholder") || "Search…";
|
|
130
|
+
let e = this.getAttribute("placeholder") || "Search…", t = this.getAttribute("size"), n = t === "sm" ? " search-select-sm" : t === "lg" ? " search-select-lg" : "";
|
|
115
131
|
this.innerHTML = `
|
|
116
|
-
<div class="search-select">
|
|
117
|
-
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
118
|
-
<input class="search-select-input search-select-ac-input" placeholder="${
|
|
132
|
+
<div class="search-select${n}">
|
|
133
|
+
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${m(this._accessibleName())}">
|
|
134
|
+
<input class="search-select-input search-select-ac-input" placeholder="${m(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
119
135
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
120
136
|
<button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
|
|
121
137
|
</div>
|
|
@@ -124,7 +140,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
124
140
|
<div class="search-select-empty" hidden>No matches</div>
|
|
125
141
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
126
142
|
</div>
|
|
127
|
-
</div>`, this._rendered = !0,
|
|
143
|
+
</div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
|
|
128
144
|
}
|
|
129
145
|
_refs() {
|
|
130
146
|
return {
|
|
@@ -153,9 +169,9 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
153
169
|
let t = this._refs();
|
|
154
170
|
if (!t.optionsWrap) return;
|
|
155
171
|
let n = (e ?? (t.input ? t.input.value : "")).trim().toLowerCase(), r = this._readOptions();
|
|
156
|
-
!this._remote && n && (r = r.filter((e) =>
|
|
172
|
+
!this._remote && n && (r = r.filter((e) => h(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
|
|
157
173
|
let t = String(e.value) === String(this._value);
|
|
158
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
174
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${m(e.value)}" aria-selected="${t}">${f(e)}</button>`;
|
|
159
175
|
}).join(""), this._active = -1;
|
|
160
176
|
let i = n.length < this._minChars;
|
|
161
177
|
t.hint && (t.hint.hidden = !(this._remote && i && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && i);
|
|
@@ -168,16 +184,16 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
168
184
|
this._active = e;
|
|
169
185
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
170
186
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
171
|
-
},
|
|
187
|
+
}, o = () => !e.menu.hidden, s = () => {
|
|
172
188
|
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
|
|
173
|
-
},
|
|
189
|
+
}, l = () => {
|
|
174
190
|
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
|
|
175
|
-
},
|
|
176
|
-
this._value = t.dataset.value, this._label =
|
|
191
|
+
}, u = (t) => {
|
|
192
|
+
this._value = t.dataset.value, this._label = h(t.innerHTML), c(this, this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), l(), e.input.focus();
|
|
177
193
|
};
|
|
178
194
|
e.input.addEventListener("focus", () => s()), e.input.addEventListener("input", () => {
|
|
179
195
|
let t = e.input.value;
|
|
180
|
-
if (e.clear && (e.clear.hidden = !t),
|
|
196
|
+
if (e.clear && (e.clear.hidden = !t), o() || s(), this._remote) {
|
|
181
197
|
if (this._renderOptions(t), t.trim().length < this._minChars) return;
|
|
182
198
|
clearTimeout(this._timer), this._timer = setTimeout(() => {
|
|
183
199
|
this.dispatchEvent(new CustomEvent("search", {
|
|
@@ -188,25 +204,25 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
188
204
|
} else this._renderOptions(t);
|
|
189
205
|
}), e.input.addEventListener("keydown", (e) => {
|
|
190
206
|
let t = n();
|
|
191
|
-
e.key === "ArrowDown" ? (e.preventDefault(),
|
|
207
|
+
e.key === "ArrowDown" ? (e.preventDefault(), o() || s(), r(Math.min(this._active + 1, t.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), r(Math.max(this._active - 1, 0))) : e.key === "Enter" ? t[this._active] && (e.preventDefault(), u(t[this._active])) : e.key === "Escape" && l();
|
|
192
208
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
193
209
|
let t = e.target.closest(".search-select-option");
|
|
194
|
-
t &&
|
|
210
|
+
t && u(t);
|
|
195
211
|
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
196
212
|
let t = e.target.closest(".search-select-option");
|
|
197
213
|
t && r(this._optionEls().indexOf(t));
|
|
198
|
-
}), e.clear?.addEventListener("click", () => {
|
|
199
|
-
this._value = "", this._label = "",
|
|
214
|
+
}), e.optionsWrap.addEventListener("mouseleave", () => r(-1)), e.clear?.addEventListener("click", () => {
|
|
215
|
+
this._value = "", this._label = "", c(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
|
|
200
216
|
}), this._onDocClick = (e) => {
|
|
201
|
-
|
|
202
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
203
|
-
|
|
217
|
+
o() && !this.contains(e.target) && l();
|
|
218
|
+
}, document.addEventListener("click", this._onDocClick), a(this, () => {
|
|
219
|
+
o() && t();
|
|
204
220
|
});
|
|
205
221
|
}
|
|
206
222
|
disconnectedCallback() {
|
|
207
|
-
this._onDocClick && document.removeEventListener("click", this._onDocClick), clearTimeout(this._timer);
|
|
223
|
+
this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), clearTimeout(this._timer);
|
|
208
224
|
}
|
|
209
|
-
},
|
|
225
|
+
}, m = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), h = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), g = [
|
|
210
226
|
"January",
|
|
211
227
|
"February",
|
|
212
228
|
"March",
|
|
@@ -219,7 +235,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
219
235
|
"October",
|
|
220
236
|
"November",
|
|
221
237
|
"December"
|
|
222
|
-
],
|
|
238
|
+
], _ = [
|
|
223
239
|
"Su",
|
|
224
240
|
"Mo",
|
|
225
241
|
"Tu",
|
|
@@ -227,17 +243,17 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
227
243
|
"Th",
|
|
228
244
|
"Fr",
|
|
229
245
|
"Sa"
|
|
230
|
-
],
|
|
246
|
+
], v = (e) => String(e).padStart(2, "0"), y = (e, t, n) => `${e}-${v(t + 1)}-${v(n)}`, b = (e) => {
|
|
231
247
|
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
232
248
|
return t ? {
|
|
233
249
|
y: +t[1],
|
|
234
250
|
m: t[2] - 1,
|
|
235
251
|
d: +t[3]
|
|
236
252
|
} : null;
|
|
237
|
-
},
|
|
238
|
-
let t =
|
|
239
|
-
return t ? `${
|
|
240
|
-
},
|
|
253
|
+
}, x = (e) => {
|
|
254
|
+
let t = b(e);
|
|
255
|
+
return t ? `${v(t.d)} ${g[t.m].slice(0, 3)} ${t.y}` : "";
|
|
256
|
+
}, S = class extends HTMLElement {
|
|
241
257
|
static get observedAttributes() {
|
|
242
258
|
return [
|
|
243
259
|
"value",
|
|
@@ -262,46 +278,46 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
262
278
|
return this._value;
|
|
263
279
|
}
|
|
264
280
|
set value(e) {
|
|
265
|
-
this._value = e || "",
|
|
281
|
+
this._value = e || "", c(this, this._value), this._syncTrigger(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
266
282
|
}
|
|
267
283
|
render() {
|
|
268
284
|
this._value = this.getAttribute("value") || this._value;
|
|
269
|
-
let e = this.getAttribute("placeholder") || "Enter Date", t =
|
|
285
|
+
let e = this.getAttribute("placeholder") || "Enter Date", t = b(this._value);
|
|
270
286
|
t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
|
|
271
287
|
<div class="datepicker">
|
|
272
288
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
273
|
-
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ?
|
|
289
|
+
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? x(this._value) : e}</span>
|
|
274
290
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
275
291
|
</button>
|
|
276
292
|
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
277
|
-
</div>`, this._rendered = !0,
|
|
293
|
+
</div>`, this._rendered = !0, c(this, this._value), this._wire();
|
|
278
294
|
}
|
|
279
295
|
_syncFormValue() {
|
|
280
|
-
|
|
296
|
+
c(this, this._value);
|
|
281
297
|
}
|
|
282
298
|
_syncTrigger() {
|
|
283
299
|
let e = this.querySelector("[data-trigger-label]");
|
|
284
300
|
if (!e) return;
|
|
285
|
-
let t =
|
|
286
|
-
e.textContent = t ?
|
|
301
|
+
let t = b(this._value);
|
|
302
|
+
e.textContent = t ? x(this._value) : this.getAttribute("placeholder") || "Enter Date", e.classList.toggle("search-select-placeholder", !t);
|
|
287
303
|
}
|
|
288
304
|
_renderMonth() {
|
|
289
|
-
let e = this.querySelector(".datepicker-pop"), t = new Date(this._viewY, this._viewM, 1).getDay(), n = new Date(this._viewY, this._viewM + 1, 0).getDate(), r =
|
|
305
|
+
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 = b(this._value), i = b(this.getAttribute("min")), a = b(this.getAttribute("max")), o = (e, t, n) => {
|
|
290
306
|
let r = new Date(e, t, n).getTime();
|
|
291
307
|
return !!(i && r < new Date(i.y, i.m, i.d).getTime() || a && r > new Date(a.y, a.m, a.d).getTime());
|
|
292
308
|
}, s = "";
|
|
293
309
|
for (let e = 0; e < t; e++) s += "<span class=\"datepicker-day is-outside\"></span>";
|
|
294
310
|
for (let e = 1; e <= n; e++) {
|
|
295
|
-
let t =
|
|
311
|
+
let t = y(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);
|
|
296
312
|
s += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${i ? " disabled" : ""}>${e}</button>`;
|
|
297
313
|
}
|
|
298
314
|
e.innerHTML = `
|
|
299
315
|
<div class="datepicker-head">
|
|
300
316
|
<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>
|
|
301
|
-
<span class="datepicker-month">${
|
|
317
|
+
<span class="datepicker-month">${g[this._viewM]} ${this._viewY}</span>
|
|
302
318
|
<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>
|
|
303
319
|
</div>
|
|
304
|
-
<div class="datepicker-weekdays">${
|
|
320
|
+
<div class="datepicker-weekdays">${_.map((e) => `<span>${e}</span>`).join("")}</div>
|
|
305
321
|
<div class="datepicker-grid">${s}</div>
|
|
306
322
|
<div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
|
|
307
323
|
}
|
|
@@ -312,7 +328,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
312
328
|
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop");
|
|
313
329
|
if (!e || !t) return;
|
|
314
330
|
let n = () => !t.hidden, r = () => {
|
|
315
|
-
if (!
|
|
331
|
+
if (!b(this._value) && !this._viewNavigated) {
|
|
316
332
|
let e = /* @__PURE__ */ new Date();
|
|
317
333
|
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
318
334
|
}
|
|
@@ -336,12 +352,14 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
336
352
|
n() && !this.contains(e.target) && i();
|
|
337
353
|
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
338
354
|
n() && e.key === "Escape" && i();
|
|
339
|
-
}, document.addEventListener("keydown", this._onDocKey), this
|
|
355
|
+
}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
|
|
356
|
+
n() && this._position(e, t);
|
|
357
|
+
}), this._syncFormValue();
|
|
340
358
|
}
|
|
341
359
|
disconnectedCallback() {
|
|
342
|
-
this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey);
|
|
360
|
+
this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
|
|
343
361
|
}
|
|
344
|
-
},
|
|
362
|
+
}, C = class extends HTMLElement {
|
|
345
363
|
_accessibleName() {
|
|
346
364
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
347
365
|
}
|
|
@@ -351,6 +369,9 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
351
369
|
"search-placeholder",
|
|
352
370
|
"searchable",
|
|
353
371
|
"disabled",
|
|
372
|
+
"icon",
|
|
373
|
+
"size",
|
|
374
|
+
"collapse-chips",
|
|
354
375
|
"aria-label"
|
|
355
376
|
];
|
|
356
377
|
}
|
|
@@ -373,7 +394,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
373
394
|
return this._values.slice();
|
|
374
395
|
}
|
|
375
396
|
set values(e) {
|
|
376
|
-
this._values = Array.isArray(e) ? e.map(String) : [],
|
|
397
|
+
this._values = Array.isArray(e) ? e.map(String) : [], c(this, this._values.join(",")), this._rendered && this._renderControl();
|
|
377
398
|
}
|
|
378
399
|
set options(e) {
|
|
379
400
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -387,7 +408,8 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
387
408
|
e.length && (this._declared = e.map((e) => ({
|
|
388
409
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
389
410
|
label: e.innerHTML,
|
|
390
|
-
|
|
411
|
+
icon: e.getAttribute("icon") || void 0,
|
|
412
|
+
[l]: !0,
|
|
391
413
|
selected: e.hasAttribute("selected")
|
|
392
414
|
})));
|
|
393
415
|
}
|
|
@@ -400,101 +422,122 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
400
422
|
}
|
|
401
423
|
_labelHtmlFor(e) {
|
|
402
424
|
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
403
|
-
return t ?
|
|
425
|
+
return t ? f(t) : u(e);
|
|
404
426
|
}
|
|
405
427
|
render() {
|
|
406
428
|
this._snapshotDeclared();
|
|
407
|
-
let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
|
|
408
|
-
|
|
409
|
-
<div class="search-select">
|
|
410
|
-
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
429
|
+
let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…", n = this.getAttribute("icon"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "";
|
|
430
|
+
c(this, this._values.join(",")), this.innerHTML = `
|
|
431
|
+
<div class="search-select${i}">
|
|
432
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${w(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
|
|
433
|
+
${n ? `<i class="bi bi-${w(n)} search-select-icon" aria-hidden="true"></i>` : ""}
|
|
411
434
|
<div class="ms-chips" data-chips></div>
|
|
412
435
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
413
436
|
</div>
|
|
414
437
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
415
|
-
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
438
|
+
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${w(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>` : ""}
|
|
416
439
|
<div class="search-select-options"></div>
|
|
417
440
|
<div class="search-select-empty" hidden>No matches</div>
|
|
418
441
|
</div>
|
|
419
|
-
</div>`, this._rendered = !0,
|
|
442
|
+
</div>`, this._rendered = !0, c(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
|
|
420
443
|
}
|
|
421
444
|
_renderControl() {
|
|
422
445
|
let e = this.querySelector("[data-chips]");
|
|
423
446
|
if (!e) return;
|
|
424
447
|
let t = this.getAttribute("placeholder") || "Select…";
|
|
425
448
|
if (!this._values.length) {
|
|
426
|
-
e.innerHTML = `<span class="search-select-placeholder">${
|
|
449
|
+
e.innerHTML = `<span class="search-select-placeholder">${u(t)}</span>`;
|
|
427
450
|
return;
|
|
428
451
|
}
|
|
429
|
-
e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${
|
|
452
|
+
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="${w(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
|
|
453
|
+
}
|
|
454
|
+
_collapseChips() {
|
|
455
|
+
let e = this.querySelector("[data-chips]");
|
|
456
|
+
if (!e || !this.hasAttribute("collapse-chips") || !this._values.length) return;
|
|
457
|
+
e.querySelector(".chip-more")?.remove();
|
|
458
|
+
let t = [...e.querySelectorAll(":scope > .chip:not(.chip-more)")];
|
|
459
|
+
for (let e of t) e.style.display = "";
|
|
460
|
+
if (!t.length) return;
|
|
461
|
+
let n = e.clientWidth, r = (e) => e.offsetLeft + e.offsetWidth;
|
|
462
|
+
if (r(t[t.length - 1]) <= n) return;
|
|
463
|
+
let i = document.createElement("span");
|
|
464
|
+
i.className = "chip chip-sm chip-more", i.textContent = `+${t.length}`, e.appendChild(i);
|
|
465
|
+
let a = i.offsetWidth + 6, o = 0;
|
|
466
|
+
for (let e of t) if (r(e) <= n - a) o += 1;
|
|
467
|
+
else break;
|
|
468
|
+
o < 1 && (o = 1);
|
|
469
|
+
for (let e = o; e < t.length; e += 1) t[e].style.display = "none";
|
|
470
|
+
i.textContent = `+${t.length - o}`;
|
|
430
471
|
}
|
|
431
472
|
_renderOptions(e) {
|
|
432
473
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
433
474
|
if (!t) return;
|
|
434
475
|
let r = (e || "").trim().toLowerCase(), i = this._readOptions();
|
|
435
|
-
r && (i = i.filter((e) =>
|
|
476
|
+
r && (i = i.filter((e) => T(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
|
|
436
477
|
let t = this._values.includes(String(e.value));
|
|
437
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
478
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${w(e.value)}" aria-selected="${t}"><span class="ms-opt-label">${f(e)}</span><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span></button>`;
|
|
438
479
|
}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
|
|
439
480
|
}
|
|
440
481
|
_wire() {
|
|
441
|
-
let e = this.querySelector(".search-select-control"), t = this.querySelector(".search-select-menu"), n = this.querySelector(".search-select-input"), r = this.querySelector(".search-select-clear"),
|
|
482
|
+
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"), o = this.querySelector(".search-select-options");
|
|
442
483
|
if (!e || !t) return;
|
|
443
|
-
let s = () => this.hasAttribute("disabled")
|
|
444
|
-
|
|
484
|
+
let s = () => this.hasAttribute("disabled");
|
|
485
|
+
!this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this));
|
|
486
|
+
let l = () => i(e, t, { matchWidth: !0 }), u = () => [...this.querySelectorAll(".search-select-option")], d = () => u().filter((e) => !e.hidden), f = (e) => {
|
|
487
|
+
let t = d();
|
|
445
488
|
this._active = e;
|
|
446
|
-
for (let e of
|
|
489
|
+
for (let e of u()) e.classList.remove("is-active");
|
|
447
490
|
e >= 0 && t[e] && (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }));
|
|
448
|
-
},
|
|
449
|
-
s() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"),
|
|
450
|
-
}, m = () => {
|
|
451
|
-
t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), d(-1);
|
|
491
|
+
}, p = () => !t.hidden, m = () => {
|
|
492
|
+
s() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), l(), n && (n.value = "", this._renderOptions(""), n.focus()));
|
|
452
493
|
}, h = () => {
|
|
453
|
-
|
|
454
|
-
}, g = (
|
|
455
|
-
|
|
456
|
-
this._values.includes(t) ? this._values = this._values.filter((e) => e !== t) : this._values = [...this._values, t], this._renderControl(), this._renderOptions(n ? n.value : ""), h();
|
|
494
|
+
t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), f(-1);
|
|
495
|
+
}, g = () => {
|
|
496
|
+
c(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
457
497
|
}, _ = (e) => {
|
|
458
|
-
|
|
498
|
+
let t = String(e);
|
|
499
|
+
this._values.includes(t) ? this._values = this._values.filter((e) => e !== t) : this._values = [...this._values, t], this._renderControl(), this._renderOptions(n ? n.value : ""), g();
|
|
500
|
+
}, v = (e) => {
|
|
501
|
+
this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(n ? n.value : ""), g();
|
|
459
502
|
};
|
|
460
503
|
e.addEventListener("click", (e) => {
|
|
461
504
|
let t = e.target.closest("[data-remove]");
|
|
462
505
|
if (t) {
|
|
463
|
-
e.stopPropagation(),
|
|
506
|
+
e.stopPropagation(), v(t.dataset.remove);
|
|
464
507
|
return;
|
|
465
508
|
}
|
|
466
|
-
|
|
467
|
-
}),
|
|
509
|
+
p() ? h() : m();
|
|
510
|
+
}), o.addEventListener("click", (e) => {
|
|
468
511
|
let t = e.target.closest(".search-select-option");
|
|
469
|
-
t && (
|
|
470
|
-
}),
|
|
512
|
+
t && (_(t.dataset.value), n?.focus());
|
|
513
|
+
}), o.addEventListener("mousemove", (e) => {
|
|
471
514
|
let t = e.target.closest(".search-select-option");
|
|
472
|
-
t && d(
|
|
473
|
-
}), n?.addEventListener("input", () => {
|
|
474
|
-
this._renderOptions(n.value), r && (r.hidden = !n.value),
|
|
515
|
+
t && f(d().indexOf(t));
|
|
516
|
+
}), o.addEventListener("mouseleave", () => f(-1)), n?.addEventListener("input", () => {
|
|
517
|
+
this._renderOptions(n.value), r && (r.hidden = !n.value), f(-1);
|
|
475
518
|
});
|
|
476
|
-
let
|
|
477
|
-
let r =
|
|
478
|
-
t.key === "ArrowDown" ? (t.preventDefault(),
|
|
519
|
+
let y = (t) => {
|
|
520
|
+
let r = d();
|
|
521
|
+
t.key === "ArrowDown" ? (t.preventDefault(), f(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), f(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && _(r[this._active].dataset.value)) : t.key === "Escape" ? (h(), e.focus()) : t.key === "Backspace" && !n.value && this._values.length && v(this._values[this._values.length - 1]);
|
|
479
522
|
};
|
|
480
|
-
n?.addEventListener("keydown",
|
|
523
|
+
n?.addEventListener("keydown", y), r?.addEventListener("click", () => {
|
|
481
524
|
n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
|
|
482
525
|
}), e.addEventListener("keydown", (e) => {
|
|
483
|
-
if (
|
|
484
|
-
|
|
526
|
+
if (p()) {
|
|
527
|
+
y(e);
|
|
485
528
|
return;
|
|
486
529
|
}
|
|
487
|
-
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
530
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
|
|
488
531
|
}), this._onDocClick = (e) => {
|
|
489
|
-
|
|
490
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
491
|
-
|
|
532
|
+
p() && !this.contains(e.target) && h();
|
|
533
|
+
}, document.addEventListener("click", this._onDocClick), a(this, () => {
|
|
534
|
+
p() && l();
|
|
492
535
|
});
|
|
493
536
|
}
|
|
494
537
|
disconnectedCallback() {
|
|
495
|
-
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
538
|
+
this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), this._ro?.disconnect(), this._ro = null;
|
|
496
539
|
}
|
|
497
|
-
},
|
|
540
|
+
}, w = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), T = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), E = /[^0-9]/g, D = /[^0-9a-zA-Z]/g, O = class extends HTMLElement {
|
|
498
541
|
static get observedAttributes() {
|
|
499
542
|
return [
|
|
500
543
|
"value",
|
|
@@ -521,16 +564,16 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
521
564
|
return this._value ?? "";
|
|
522
565
|
}
|
|
523
566
|
set value(e) {
|
|
524
|
-
this._value = this._clean(e),
|
|
567
|
+
this._value = this._clean(e), c(this, this._value), this._paint();
|
|
525
568
|
}
|
|
526
569
|
_clean(e) {
|
|
527
|
-
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ?
|
|
570
|
+
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? D : E, "").slice(0, this.length);
|
|
528
571
|
}
|
|
529
572
|
connectedCallback() {
|
|
530
573
|
this._rendered || this.render();
|
|
531
574
|
}
|
|
532
575
|
attributeChangedCallback(e, t, n) {
|
|
533
|
-
this._rendered && (e === "value" ? (this._value = this._clean(n),
|
|
576
|
+
this._rendered && (e === "value" ? (this._value = this._clean(n), c(this, this._value), this._paint()) : this.render());
|
|
534
577
|
}
|
|
535
578
|
render() {
|
|
536
579
|
this._value = this._clean(this.getAttribute("value") ?? this._value);
|
|
@@ -548,7 +591,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
548
591
|
spellcheck="false"
|
|
549
592
|
${n ? "disabled" : ""} />
|
|
550
593
|
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
551
|
-
</div>`, this._rendered = !0,
|
|
594
|
+
</div>`, this._rendered = !0, c(this, this._value), this._wire(), this._paint();
|
|
552
595
|
}
|
|
553
596
|
_refs() {
|
|
554
597
|
return {
|
|
@@ -570,7 +613,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
570
613
|
if (!e) return;
|
|
571
614
|
let t = (e) => {
|
|
572
615
|
let t = this._clean(e), n = t !== this._value;
|
|
573
|
-
this._value = t,
|
|
616
|
+
this._value = t, c(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
|
|
574
617
|
bubbles: !0,
|
|
575
618
|
detail: t
|
|
576
619
|
}));
|
|
@@ -590,7 +633,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
590
633
|
document.activeElement === e && this._paint();
|
|
591
634
|
});
|
|
592
635
|
}
|
|
593
|
-
},
|
|
636
|
+
}, k = [
|
|
594
637
|
[
|
|
595
638
|
"AF",
|
|
596
639
|
"Afghanistan",
|
|
@@ -1816,11 +1859,11 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1816
1859
|
"Zimbabwe",
|
|
1817
1860
|
"263"
|
|
1818
1861
|
]
|
|
1819
|
-
],
|
|
1862
|
+
], A = (e) => (k.find((t) => t[0] === e) || [
|
|
1820
1863
|
"",
|
|
1821
1864
|
"",
|
|
1822
1865
|
""
|
|
1823
|
-
])[2],
|
|
1866
|
+
])[2], j = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, M = class extends HTMLElement {
|
|
1824
1867
|
static get observedAttributes() {
|
|
1825
1868
|
return [
|
|
1826
1869
|
"value",
|
|
@@ -1839,36 +1882,36 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1839
1882
|
this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
|
|
1840
1883
|
}
|
|
1841
1884
|
get value() {
|
|
1842
|
-
return `+${
|
|
1885
|
+
return `+${A(this._country)}${this._national}`;
|
|
1843
1886
|
}
|
|
1844
1887
|
set value(e) {
|
|
1845
1888
|
this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
|
|
1846
1889
|
}
|
|
1847
1890
|
_commit() {
|
|
1848
|
-
|
|
1891
|
+
c(this, this.value), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1849
1892
|
}
|
|
1850
1893
|
render() {
|
|
1851
1894
|
let e = this.getAttribute("placeholder") || "Enter phone number";
|
|
1852
1895
|
this._country = this.getAttribute("country") || this._country;
|
|
1853
|
-
let t =
|
|
1896
|
+
let t = k.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${j(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
|
|
1854
1897
|
this.innerHTML = `
|
|
1855
1898
|
<div class="phone-input-wrap">
|
|
1856
1899
|
<div class="phone-country-adornment">
|
|
1857
1900
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1858
|
-
<span class="${
|
|
1901
|
+
<span class="${j(this._country)}" data-flag aria-hidden="true"></span>
|
|
1859
1902
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
1860
|
-
<span class="phone-dial" data-dial>+${
|
|
1903
|
+
<span class="phone-dial" data-dial>+${A(this._country)}</span>
|
|
1861
1904
|
</button>
|
|
1862
1905
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
1863
1906
|
<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>
|
|
1864
1907
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
1865
1908
|
</div>
|
|
1866
1909
|
</div>
|
|
1867
|
-
<input type="tel" class="input" placeholder="${
|
|
1868
|
-
</div>`, this._rendered = !0,
|
|
1910
|
+
<input type="tel" class="input" placeholder="${N(e)}" value="${N(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
1911
|
+
</div>`, this._rendered = !0, c(this, this.value), this._wire();
|
|
1869
1912
|
}
|
|
1870
1913
|
_wire() {
|
|
1871
|
-
let e = this.querySelector(".country-toggle"), t = this.querySelector(".country-dropdown-menu"), n = this.querySelector(".dropdown-search-input"), r = this.querySelector(".country-list-scroll"), i = this.querySelector(".country-empty"), a = this.querySelector("input[type=tel]"),
|
|
1914
|
+
let e = this.querySelector(".country-toggle"), t = this.querySelector(".country-dropdown-menu"), n = this.querySelector(".dropdown-search-input"), r = this.querySelector(".country-list-scroll"), i = this.querySelector(".country-empty"), a = this.querySelector("input[type=tel]"), o = this.querySelector("[data-flag]"), s = this.querySelector("[data-dial]");
|
|
1872
1915
|
if (!e || !t) return;
|
|
1873
1916
|
let l = () => !t.hidden, u = () => {
|
|
1874
1917
|
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));
|
|
@@ -1889,7 +1932,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1889
1932
|
}
|
|
1890
1933
|
i && (i.hidden = n > 0);
|
|
1891
1934
|
}, m = (e) => {
|
|
1892
|
-
this._country = e, this.setAttribute("country", e),
|
|
1935
|
+
this._country = e, this.setAttribute("country", e), o && (o.className = j(e)), s && (s.textContent = `+${A(e)}`);
|
|
1893
1936
|
for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
|
|
1894
1937
|
f(), this._commit();
|
|
1895
1938
|
};
|
|
@@ -1900,12 +1943,12 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1900
1943
|
this._national = a.value.replace(/[^0-9]/g, ""), this._commit();
|
|
1901
1944
|
}), this._onDocClick = (e) => {
|
|
1902
1945
|
l() && !this.contains(e.target) && f();
|
|
1903
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
1946
|
+
}, document.addEventListener("click", this._onDocClick), c(this, this.value);
|
|
1904
1947
|
}
|
|
1905
1948
|
disconnectedCallback() {
|
|
1906
1949
|
this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1907
1950
|
}
|
|
1908
|
-
},
|
|
1951
|
+
}, N = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), P = class extends HTMLElement {
|
|
1909
1952
|
static get observedAttributes() {
|
|
1910
1953
|
return [
|
|
1911
1954
|
"value",
|
|
@@ -1916,6 +1959,8 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1916
1959
|
"compact",
|
|
1917
1960
|
"size",
|
|
1918
1961
|
"clearable",
|
|
1962
|
+
"icon",
|
|
1963
|
+
"prefix",
|
|
1919
1964
|
"aria-label"
|
|
1920
1965
|
];
|
|
1921
1966
|
}
|
|
@@ -1935,7 +1980,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1935
1980
|
return this._value;
|
|
1936
1981
|
}
|
|
1937
1982
|
set value(e) {
|
|
1938
|
-
this._value = e == null ? "" : String(e),
|
|
1983
|
+
this._value = e == null ? "" : String(e), c(this, this._value), this._syncSelected(), this._syncReset();
|
|
1939
1984
|
}
|
|
1940
1985
|
set options(e) {
|
|
1941
1986
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -1949,7 +1994,8 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1949
1994
|
e.length && (this._declared = e.map((e) => ({
|
|
1950
1995
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
1951
1996
|
label: e.innerHTML,
|
|
1952
|
-
|
|
1997
|
+
icon: e.getAttribute("icon") || void 0,
|
|
1998
|
+
[l]: !0,
|
|
1953
1999
|
selected: e.hasAttribute("selected")
|
|
1954
2000
|
})));
|
|
1955
2001
|
}
|
|
@@ -1958,24 +2004,26 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1958
2004
|
}
|
|
1959
2005
|
render() {
|
|
1960
2006
|
this._snapshotDeclared();
|
|
1961
|
-
let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", a = this.getAttribute("placeholder") || "Select...",
|
|
1962
|
-
|
|
1963
|
-
let
|
|
2007
|
+
let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", a = this.getAttribute("icon"), o = this.getAttribute("prefix"), s = this.getAttribute("placeholder") || "Select...", l = this.getAttribute("search-placeholder") || "Search...", d = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
|
|
2008
|
+
d && (this._value = String(d.value)), c(this, this._value);
|
|
2009
|
+
let p = e.map((e) => {
|
|
1964
2010
|
let t = String(e.value) === String(this._value);
|
|
1965
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
2011
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${F(e.value)}" aria-selected="${t}">${f(e)}</button>`;
|
|
1966
2012
|
}).join("");
|
|
1967
2013
|
this.innerHTML = `
|
|
1968
2014
|
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
|
|
1969
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
1970
|
-
|
|
2015
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${F(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
2016
|
+
${a ? `<i class="bi bi-${F(a)} search-select-icon" aria-hidden="true"></i>` : ""}
|
|
2017
|
+
${o ? `<span class="search-select-prefix">${u(o)}</span>` : ""}
|
|
2018
|
+
<span class="${d ? "" : "search-select-placeholder"}" data-label>${d ? f(d) : u(s)}</span>
|
|
1971
2019
|
${n ? "<span class=\"search-select-reset\" role=\"button\" aria-label=\"Clear selection\" hidden><i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i></span>" : ""}
|
|
1972
2020
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
1973
2021
|
</button>
|
|
1974
2022
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
1975
|
-
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
1976
|
-
<div class="search-select-options">${
|
|
2023
|
+
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${F(l)}" 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>` : ""}
|
|
2024
|
+
<div class="search-select-options">${p}<div class="search-select-empty" hidden>No matches</div></div>
|
|
1977
2025
|
</div>
|
|
1978
|
-
</div>`, this._rendered = !0,
|
|
2026
|
+
</div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncReset();
|
|
1979
2027
|
}
|
|
1980
2028
|
_refs() {
|
|
1981
2029
|
return {
|
|
@@ -2001,7 +2049,7 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2001
2049
|
let t = e.dataset.value === String(this._value);
|
|
2002
2050
|
e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
|
|
2003
2051
|
}
|
|
2004
|
-
e && (e.innerHTML = t ?
|
|
2052
|
+
e && (e.innerHTML = t ? f(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
|
|
2005
2053
|
}
|
|
2006
2054
|
_syncReset() {
|
|
2007
2055
|
let { reset: e } = this._refs();
|
|
@@ -2010,7 +2058,12 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2010
2058
|
_wire() {
|
|
2011
2059
|
let e = this._refs();
|
|
2012
2060
|
if (!e.control || !e.menu) return;
|
|
2013
|
-
let t = () =>
|
|
2061
|
+
let t = () => {
|
|
2062
|
+
if (this.hasAttribute("compact")) {
|
|
2063
|
+
let t = e.control.getBoundingClientRect();
|
|
2064
|
+
e.menu.style.width = "max-content", e.menu.style.minWidth = `${t.width}px`, e.menu.style.maxWidth = "280px", i(e.control, e.menu);
|
|
2065
|
+
} else i(e.control, e.menu, { matchWidth: !0 });
|
|
2066
|
+
}, n = (e) => {
|
|
2014
2067
|
let t = this._visible();
|
|
2015
2068
|
this._active = e;
|
|
2016
2069
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
@@ -2022,51 +2075,51 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2022
2075
|
e.hidden = !t, t && (r += 1);
|
|
2023
2076
|
}
|
|
2024
2077
|
e.empty && (e.empty.hidden = r > 0), e.clear && (e.clear.hidden = !n);
|
|
2025
|
-
},
|
|
2078
|
+
}, o = () => !e.menu.hidden, s = () => {
|
|
2026
2079
|
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")));
|
|
2027
|
-
},
|
|
2080
|
+
}, c = () => {
|
|
2028
2081
|
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), n(-1);
|
|
2029
|
-
}, c = (t) => {
|
|
2030
|
-
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), s(), e.control.focus();
|
|
2031
2082
|
}, l = (t) => {
|
|
2083
|
+
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), c(), e.control.focus();
|
|
2084
|
+
}, u = (t) => {
|
|
2032
2085
|
let r = this._visible();
|
|
2033
|
-
t.key === "ArrowDown" ? (t.preventDefault(), n(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), n(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] &&
|
|
2086
|
+
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] && l(r[this._active])) : t.key === "Escape" && (c(), e.control.focus());
|
|
2034
2087
|
};
|
|
2035
2088
|
e.reset?.addEventListener("click", (t) => {
|
|
2036
2089
|
t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
|
|
2037
|
-
}), e.control.addEventListener("click", () =>
|
|
2038
|
-
if (
|
|
2039
|
-
|
|
2090
|
+
}), e.control.addEventListener("click", () => o() ? c() : s()), e.control.addEventListener("keydown", (e) => {
|
|
2091
|
+
if (o()) {
|
|
2092
|
+
u(e);
|
|
2040
2093
|
return;
|
|
2041
2094
|
}
|
|
2042
|
-
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
2095
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), s());
|
|
2043
2096
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
2044
2097
|
let t = e.target.closest(".search-select-option");
|
|
2045
|
-
t &&
|
|
2098
|
+
t && l(t);
|
|
2046
2099
|
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
2047
2100
|
let t = e.target.closest(".search-select-option");
|
|
2048
2101
|
t && n(this._visible().indexOf(t));
|
|
2049
2102
|
}), e.optionsWrap.addEventListener("mouseleave", () => n(-1)), e.search?.addEventListener("input", () => {
|
|
2050
2103
|
r(e.search.value), n(-1);
|
|
2051
|
-
}), e.search?.addEventListener("keydown",
|
|
2104
|
+
}), e.search?.addEventListener("keydown", u), e.clear?.addEventListener("click", () => {
|
|
2052
2105
|
e.search.value = "", r(""), e.search.focus();
|
|
2053
|
-
}), e.menu.addEventListener("keydown",
|
|
2054
|
-
|
|
2055
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
2056
|
-
|
|
2106
|
+
}), e.menu.addEventListener("keydown", u), this._onDocClick = (e) => {
|
|
2107
|
+
o() && !this.contains(e.target) && c();
|
|
2108
|
+
}, document.addEventListener("click", this._onDocClick), a(this, () => {
|
|
2109
|
+
o() && t();
|
|
2057
2110
|
});
|
|
2058
2111
|
}
|
|
2059
2112
|
disconnectedCallback() {
|
|
2060
|
-
this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
2113
|
+
this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
|
|
2061
2114
|
}
|
|
2062
|
-
},
|
|
2115
|
+
}, F = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), I = "image/png,image/jpeg,image/webp", L = 5, R = {
|
|
2063
2116
|
"image/png": [".png"],
|
|
2064
2117
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
2065
2118
|
"image/webp": [".webp"],
|
|
2066
2119
|
"image/gif": [".gif"],
|
|
2067
2120
|
"image/svg+xml": [".svg"],
|
|
2068
2121
|
"application/pdf": [".pdf"]
|
|
2069
|
-
},
|
|
2122
|
+
}, z = {
|
|
2070
2123
|
"image/png": "PNG",
|
|
2071
2124
|
"image/jpeg": "JPG",
|
|
2072
2125
|
"image/webp": "WEBP",
|
|
@@ -2080,34 +2133,34 @@ var s = Symbol("wui.trustedHtml"), c = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2080
2133
|
".gif": "GIF",
|
|
2081
2134
|
".svg": "SVG",
|
|
2082
2135
|
".pdf": "PDF"
|
|
2083
|
-
},
|
|
2084
|
-
function
|
|
2136
|
+
}, B = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
|
|
2137
|
+
function V(e) {
|
|
2085
2138
|
let t = [];
|
|
2086
|
-
for (let n of
|
|
2087
|
-
let e =
|
|
2139
|
+
for (let n of B(e)) {
|
|
2140
|
+
let e = z[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
2088
2141
|
t.includes(e) || t.push(e);
|
|
2089
2142
|
}
|
|
2090
2143
|
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
2091
2144
|
}
|
|
2092
|
-
function
|
|
2093
|
-
let n =
|
|
2145
|
+
function H(e, t) {
|
|
2146
|
+
let n = B(t);
|
|
2094
2147
|
if (!n.length) return !0;
|
|
2095
2148
|
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
2096
|
-
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (
|
|
2149
|
+
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (R[e] || []).some((e) => i.endsWith(e)));
|
|
2097
2150
|
}
|
|
2098
|
-
function
|
|
2151
|
+
function U(e, t = {}) {
|
|
2099
2152
|
if (!e) return null;
|
|
2100
|
-
let n = t.accept === void 0 ?
|
|
2101
|
-
return
|
|
2153
|
+
let n = t.accept === void 0 ? I : t.accept, r = t.maxSizeMb || 5;
|
|
2154
|
+
return H(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${V(n)} file.`;
|
|
2102
2155
|
}
|
|
2103
2156
|
//#endregion
|
|
2104
2157
|
//#region src/index.js
|
|
2105
|
-
var
|
|
2158
|
+
var W = (e, t) => {
|
|
2106
2159
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
2107
2160
|
};
|
|
2108
|
-
function
|
|
2109
|
-
|
|
2161
|
+
function G() {
|
|
2162
|
+
W("wui-select", P), W("wui-phone", M), W("wui-datepicker", S), W("wui-autocomplete", p), W("wui-multiselect", C), W("wui-otp", O), W("wui-status-icon", n);
|
|
2110
2163
|
}
|
|
2111
|
-
|
|
2164
|
+
G();
|
|
2112
2165
|
//#endregion
|
|
2113
|
-
export {
|
|
2166
|
+
export { I as DEFAULT_IMAGE_ACCEPT, L as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, S as WuiDatePicker, C as WuiMultiSelect, O as WuiOtp, M as WuiPhone, P as WuiSelect, n as WuiStatusIcon, V as acceptLabel, G as defineWeborityElements, H as matchesAccept, U as validateFile };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/ui-elements",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.11",
|
|
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",
|