@webority/ui-elements 0.6.10 → 0.6.12
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 +69 -27
- package/dist/ui-elements.js +654 -192
- 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,73 @@ 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=(e,t)=>new Date(e,t+1,0).getDate(),w=(e,t)=>{for(;t<0;)t+=12,--e;for(;t>11;)t-=12,e+=1;return{y:e,m:t}},T=class extends HTMLElement{static get observedAttributes(){return[`value`,`min`,`max`,`placeholder`,`disabled`,`first-day`,`size`]}constructor(){super(),this._value=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth(),this._mode=`days`,this._focus=null,this._slide=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?(this._value=n||``,this._syncTrigger()):e===`first-day`?this.querySelector(`.datepicker-pop`)?.hidden||this._renderView():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}))}_firstDay(){let e=Number.parseInt(this.getAttribute(`first-day`)??``,10);return Number.isInteger(e)&&e>=0&&e<=6?e: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);let n=this.getAttribute(`size`),r=n===`sm`?` input-sm`:n===`lg`?` input-lg`:``;this.innerHTML=`
|
|
59
59
|
<div class="datepicker">
|
|
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?
|
|
60
|
+
<button type="button" class="input datepicker-trigger${r}${t?` has-value`:``}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
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
|
-
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
65
|
-
</div>`,this._rendered=!0,
|
|
64
|
+
<div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
|
|
65
|
+
</div>`,this._rendered=!0,l(this,this._value),this._wire()}_syncFormValue(){l(this,this._value)}_syncTrigger(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`[data-trigger-label]`);if(!t)return;let n=x(this._value);t.textContent=n?S(this._value):this.getAttribute(`placeholder`)||`Enter Date`,t.classList.toggle(`search-select-placeholder`,!n),e?.classList.toggle(`has-value`,!!n)}_limits(){let e=x(this.getAttribute(`min`)),t=x(this.getAttribute(`max`)),n=e?new Date(e.y,e.m,e.d).getTime():-1/0,r=t?new Date(t.y,t.m,t.d).getTime():1/0;return{dayDisabled:(e,t,i)=>{let a=new Date(e,t,i).getTime();return a<n||a>r},monthDisabled:(e,t)=>{let i=new Date(e,t,1).getTime();return new Date(e,t,C(e,t)).getTime()<n||i>r},yearDisabled:e=>{let t=new Date(e,0,1).getTime();return new Date(e,11,31).getTime()<n||t>r}}}_renderView(){let e=this.querySelector(`.datepicker-pop`);e&&(this._mode===`months`?e.innerHTML=this._monthsHtml():this._mode===`years`?e.innerHTML=this._yearsHtml():e.innerHTML=this._daysHtml(),this._focusActive())}_daysHtml(){let e=this._firstDay(),t=(new Date(this._viewY,this._viewM,1).getDay()-e+7)%7,n=C(this._viewY,this._viewM),r=x(this._value),i=new Date,{dayDisabled:a}=this._limits(),o=this._focus||r||{y:this._viewY,m:this._viewM,d:1},s=(e,t,n,s)=>{let c=b(e,t,n),l=r&&r.y===e&&r.m===t&&r.d===n,u=i.getFullYear()===e&&i.getMonth()===t&&i.getDate()===n,d=o.y===e&&o.m===t&&o.d===n,f=a(e,t,n);return`<button type="button" class="${[`datepicker-day`,s?`is-outside`:``,u?`is-today`:``,l?`is-selected`:``].filter(Boolean).join(` `)}" data-iso="${c}" role="gridcell" tabindex="${d&&!f?`0`:`-1`}"${l?` aria-selected="true"`:``}${f?` disabled aria-disabled="true"`:``}>${n}</button>`},c=``,l=w(this._viewY,this._viewM-1),u=C(l.y,l.m);for(let e=t-1;e>=0;e--)c+=s(l.y,l.m,u-e,!0);for(let e=1;e<=n;e++)c+=s(this._viewY,this._viewM,e,!1);let d=w(this._viewY,this._viewM+1),f=(7-(t+n)%7)%7;for(let e=1;e<=f;e++)c+=s(d.y,d.m,e,!0);let p=v.map((t,n)=>v[(n+e)%7]).map(e=>`<span>${e}</span>`).join(``);return`
|
|
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
|
-
<
|
|
68
|
+
<button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${_[this._viewM]} ${this._viewY}</button>
|
|
69
69
|
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
|
|
70
70
|
</div>
|
|
71
|
-
<div class="datepicker-weekdays">${
|
|
72
|
-
<div class="datepicker-grid">${
|
|
73
|
-
<div class="datepicker-foot"
|
|
74
|
-
|
|
75
|
-
<
|
|
71
|
+
<div class="datepicker-weekdays">${p}</div>
|
|
72
|
+
<div class="datepicker-grid${this._slide?` ${this._slide}`:``}" role="grid">${c}</div>
|
|
73
|
+
<div class="datepicker-foot">
|
|
74
|
+
<button type="button" class="datepicker-link" data-today>Today</button>
|
|
75
|
+
<button type="button" class="datepicker-link" data-clear>Clear</button>
|
|
76
|
+
</div>`}_monthsHtml(){let e=x(this._value),t=new Date,{monthDisabled:n}=this._limits(),r=``;for(let i=0;i<12;i++){let a=e&&e.y===this._viewY&&e.m===i,o=t.getFullYear()===this._viewY&&t.getMonth()===i,s=n(this._viewY,i),c=[`datepicker-cell`,o?`is-today`:``,a?`is-selected`:``].filter(Boolean).join(` `);r+=`<button type="button" class="${c}" data-month="${i}"${s?` disabled`:``}>${_[i].slice(0,3)}</button>`}return`
|
|
77
|
+
<div class="datepicker-head">
|
|
78
|
+
<button type="button" class="datepicker-nav-btn" data-nav-year="-1" aria-label="Previous year"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
|
|
79
|
+
<button type="button" class="datepicker-month" data-view="years" aria-label="Choose year">${this._viewY}</button>
|
|
80
|
+
<button type="button" class="datepicker-nav-btn" data-nav-year="1" aria-label="Next year"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="datepicker-cells">${r}</div>`}_yearsHtml(){let e=x(this._value),t=new Date().getFullYear(),{yearDisabled:n}=this._limits(),r=this._viewY-(this._viewY%10+10)%10-1,i=``;for(let a=0;a<12;a++){let o=r+a,s=e&&e.y===o,c=t===o,l=n(o),u=[`datepicker-cell`,c?`is-today`:``,s?`is-selected`:``].filter(Boolean).join(` `);i+=`<button type="button" class="${u}" data-year="${o}"${l?` disabled`:``}>${o}</button>`}return`
|
|
83
|
+
<div class="datepicker-head">
|
|
84
|
+
<button type="button" class="datepicker-nav-btn" data-nav-decade="-1" aria-label="Previous decade"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
|
|
85
|
+
<span class="datepicker-month">${r+1} – ${r+10}</span>
|
|
86
|
+
<button type="button" class="datepicker-nav-btn" data-nav-decade="1" aria-label="Next decade"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="datepicker-cells">${i}</div>`}_focusActive(){let e=this.querySelector(`.datepicker-pop`),t=e?.querySelector(`[tabindex="0"]`)||e?.querySelector(`.is-selected`)||e?.querySelector(`.datepicker-day:not(:disabled), .datepicker-cell:not(:disabled)`);t&&e.contains(document.activeElement)&&t.focus()}_position(e,t){a(e,t)}_setFocus(e,t,n,r){let{y:i,m:a}=w(e,t);this._focus={y:i,m:a,d:n};let o=i!==this._viewY||a!==this._viewM;this._viewY=i,this._viewM=a,this._slide=o&&r||``,this._renderView(),this._slide=``,this.querySelector(`.datepicker-day[data-iso="${b(i,a,n)}"]`)?.focus()}_onKey(e){if(this._mode!==`days`){e.key===`Escape`&&this._close();return}let t=this._focus||x(this._value)||{y:this._viewY,m:this._viewM,d:1},n=(n,r)=>{e.preventDefault();let i=new Date(t.y,t.m,t.d+n);this._setFocus(i.getFullYear(),i.getMonth(),i.getDate(),r)};switch(e.key){case`ArrowLeft`:return n(-1,`slide-prev`);case`ArrowRight`:return n(1,`slide-next`);case`ArrowUp`:return n(-7,`slide-prev`);case`ArrowDown`:return n(7,`slide-next`);case`Home`:return n(-((new Date(t.y,t.m,t.d).getDay()-this._firstDay()+7)%7),`slide-prev`);case`End`:return n(6-(new Date(t.y,t.m,t.d).getDay()-this._firstDay()+7)%7,`slide-next`);case`PageUp`:{e.preventDefault();let n=w(t.y,t.m-(e.shiftKey?12:1));return this._setFocus(n.y,n.m,Math.min(t.d,C(n.y,n.m)),`slide-prev`)}case`PageDown`:{e.preventDefault();let n=w(t.y,t.m+(e.shiftKey?12:1));return this._setFocus(n.y,n.m,Math.min(t.d,C(n.y,n.m)),`slide-next`)}case`Enter`:case` `:e.preventDefault(),this._limits().dayDisabled(t.y,t.m,t.d)||(this.value=b(t.y,t.m,t.d),this._close());return;case`Escape`:return this._close();default:}}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`),n=this.querySelector(`.datepicker`);if(!e||!t)return;let r=()=>!t.hidden;this._open=()=>{if(!x(this._value)&&!this._viewNavigated){let e=new Date;this._viewY=e.getFullYear(),this._viewM=e.getMonth()}let r=x(this._value),i=new Date;this._mode=`days`,this._focus=r||{y:this._viewY,m:this._viewM,d:i.getFullYear()===this._viewY&&i.getMonth()===this._viewM?i.getDate():1},this._renderView(),t.hidden=!1,n?.classList.add(`open`),this._position(e,t),e.setAttribute(`aria-expanded`,`true`),t.querySelector(`[tabindex="0"]`)?.focus()},this._close=()=>{t.hidden=!0,n?.classList.remove(`open`),e.setAttribute(`aria-expanded`,`false`),e.focus()},e.addEventListener(`click`,()=>r()?this._close():this._open()),t.addEventListener(`click`,e=>{this._popClick=!0;let t=e.target.closest(`[data-nav]`);if(t){this._viewNavigated=!0,this._slide=Number(t.dataset.nav)<0?`slide-prev`:`slide-next`;let e=w(this._viewY,this._viewM+Number(t.dataset.nav));this._viewY=e.y,this._viewM=e.m,this._focus={y:e.y,m:e.m,d:1},this._renderView(),this._slide=``;return}let n=e.target.closest(`[data-nav-year]`);if(n){this._viewY+=Number(n.dataset.navYear),this._renderView();return}let r=e.target.closest(`[data-nav-decade]`);if(r){this._viewY+=Number(r.dataset.navDecade)*10,this._renderView();return}let i=e.target.closest(`[data-view]`);if(i){this._mode=i.dataset.view,this._renderView();return}let a=e.target.closest(`[data-month]`);if(a&&!a.disabled){this._viewNavigated=!0,this._viewM=Number(a.dataset.month),this._mode=`days`,this._focus={y:this._viewY,m:this._viewM,d:1},this._renderView();return}let o=e.target.closest(`[data-year]`);if(o&&!o.disabled){this._viewNavigated=!0,this._viewY=Number(o.dataset.year),this._mode=`months`,this._renderView();return}if(e.target.closest(`[data-today]`)){let e=new Date;this.value=b(e.getFullYear(),e.getMonth(),e.getDate()),this._close();return}if(e.target.closest(`[data-clear]`)){this.value=``,this._close();return}let s=e.target.closest(`.datepicker-day[data-iso]`);s&&!s.disabled&&(this.value=s.dataset.iso,this._close())}),this._onKeyBound=e=>{r()&&this._onKey(e)},t.addEventListener(`keydown`,this._onKeyBound),this._onDocClick=e=>{let t=this._popClick;this._popClick=!1,r()&&!t&&!this.contains(e.target)&&this._close()},document.addEventListener(`click`,this._onDocClick),o(this,()=>{r()&&this._position(e,t)}),this._syncFormValue()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),s(this)}},E=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],D=[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`],O=e=>String(e).padStart(2,`0`),k=(e,t,n)=>`${e}-${O(t+1)}-${O(n)}`,A=e=>{let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e||``);return t?{y:+t[1],m:t[2]-1,d:+t[3]}:null},j=e=>{let t=A(e);return t?`${O(t.d)} ${E[t.m].slice(0,3)} ${t.y}`:``},M=(e,t)=>new Date(e,t+1,0).getDate(),N=(e,t)=>{for(;t<0;)t+=12,--e;for(;t>11;)t-=12,e+=1;return{y:e,m:t}},P=class extends HTMLElement{static get observedAttributes(){return[`start`,`end`,`min`,`max`,`placeholder`,`disabled`,`first-day`,`size`]}constructor(){super(),this._start=``,this._end=``,this._hover=``;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===`start`||e===`end`?(this._start=this.getAttribute(`start`)||``,this._end=this.getAttribute(`end`)||``,this._syncTrigger(),this._syncMirrors()):this.render())}get value(){return{start:this._start,end:this._end}}set value(e){this._start=e?.start||``,this._end=e?.end||``,this._syncTrigger(),this._syncMirrors(),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_firstDay(){let e=Number.parseInt(this.getAttribute(`first-day`)??``,10);return Number.isInteger(e)&&e>=0&&e<=6?e:0}_label(){let e=this.getAttribute(`placeholder`)||`Start – End`;return!this._start&&!this._end?{text:e,empty:!0}:{text:`${j(this._start)||`Start`} – ${j(this._end)||`End`}`,empty:!1}}render(){this._start=this.getAttribute(`start`)||this._start,this._end=this.getAttribute(`end`)||this._end;let e=A(this._start);e&&(this._viewY=e.y,this._viewM=e.m);let t=this.getAttribute(`size`),n=t===`sm`?` input-sm`:t===`lg`?` input-lg`:``,{text:r,empty:i}=this._label();this.innerHTML=`
|
|
89
|
+
<div class="daterange">
|
|
90
|
+
<button type="button" class="input daterange-trigger${n}${i?``:` has-value`}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
91
|
+
<span data-range-label class="${i?`search-select-placeholder`:``}">${r}</span>
|
|
92
|
+
<i class="bi bi-calendar-range" aria-hidden="true"></i>
|
|
93
|
+
</button>
|
|
94
|
+
<div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
|
|
95
|
+
</div>`,this._rendered=!0,this._syncMirrors(),this._wire()}_syncTrigger(){let e=this.querySelector(`.daterange-trigger`),t=this.querySelector(`[data-range-label]`);if(!t)return;let{text:n,empty:r}=this._label();t.textContent=n,t.classList.toggle(`search-select-placeholder`,r),e?.classList.toggle(`has-value`,!r)}_syncMirrors(){let e=this.getAttribute(`start-name`)||this.getAttribute(`name`),t=this.getAttribute(`end-name`);this._mirror(`start`,e,this._start),this._mirror(`end`,t,this._end)}_mirror(e,t,n){if(!t)return;let r=this.querySelector(`input[type="hidden"][data-range-mirror="${e}"]`);r||(r=document.createElement(`input`),r.type=`hidden`,r.setAttribute(`data-range-mirror`,e),this.appendChild(r)),r.name=t,r.value=n||``}_limits(){let e=A(this.getAttribute(`min`)),t=A(this.getAttribute(`max`)),n=e?new Date(e.y,e.m,e.d).getTime():-1/0,r=t?new Date(t.y,t.m,t.d).getTime():1/0;return(e,t,i)=>{let a=new Date(e,t,i).getTime();return a<n||a>r}}_monthHtml(e,t){let n=this._firstDay(),r=(new Date(e,t,1).getDay()-n+7)%7,i=M(e,t),a=this._limits(),o=D.map((e,t)=>D[(t+n)%7]).map(e=>`<span>${e}</span>`).join(``),s=(e,t,n,r)=>{let i=k(e,t,n),o=a(e,t,n);return`<button type="button" class="${[`datepicker-day`,r?`is-outside`:``].filter(Boolean).join(` `)}" data-iso="${i}"${o?` disabled`:``}>${n}</button>`},c=``,l=N(e,t-1),u=M(l.y,l.m);for(let e=r-1;e>=0;e--)c+=s(l.y,l.m,u-e,!0);for(let n=1;n<=i;n++)c+=s(e,t,n,!1);let d=N(e,t+1),f=(7-(r+i)%7)%7;for(let e=1;e<=f;e++)c+=s(d.y,d.m,e,!0);return`
|
|
96
|
+
<div class="daterange-cal">
|
|
97
|
+
<div class="datepicker-month-label">${E[t]} ${e}</div>
|
|
98
|
+
<div class="datepicker-weekdays">${o}</div>
|
|
99
|
+
<div class="datepicker-grid" role="grid">${c}</div>
|
|
100
|
+
</div>`}_renderView(){let e=this.querySelector(`.daterange-pop`);if(!e)return;let t=N(this._viewY,this._viewM+1);e.innerHTML=`
|
|
101
|
+
<div class="daterange-head">
|
|
102
|
+
<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>
|
|
103
|
+
<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>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="daterange-cals">
|
|
106
|
+
${this._monthHtml(this._viewY,this._viewM)}
|
|
107
|
+
${this._monthHtml(t.y,t.m)}
|
|
108
|
+
</div>
|
|
109
|
+
<div class="datepicker-foot">
|
|
110
|
+
<span class="daterange-hint" data-range-hint></span>
|
|
111
|
+
<button type="button" class="datepicker-link" data-clear>Clear</button>
|
|
112
|
+
</div>`,this._paint()}_paint(){let e=this.querySelector(`.daterange-pop`);if(!e)return;let t=this._start?new Date(this._start).getTime():null,n=this._end;t&&!this._end&&this._hover&&new Date(this._hover).getTime()>=t&&(n=this._hover);let r=n?new Date(n).getTime():null;for(let n of e.querySelectorAll(`.datepicker-day[data-iso]`)){let e=new Date(n.dataset.iso).getTime(),i=t!=null&&e===t,a=r!=null&&e===r,o=t!=null&&r!=null&&e>t&&e<r;n.classList.toggle(`is-range-start`,i),n.classList.toggle(`is-range-end`,a),n.classList.toggle(`in-range`,o)}let i=e.querySelector(`[data-range-hint]`);i&&(i.textContent=this._start?this._end?`${j(this._start)} – ${j(this._end)}`:`Pick an end date`:`Pick a start date`)}_position(e,t){a(e,t)}_pick(e){if(!this._start||this._start&&this._end){this._start=e,this._end=``,this._hover=``,this._syncTrigger(),this._syncMirrors(),this._paint();return}if(new Date(e).getTime()<new Date(this._start).getTime()){this._start=e,this._paint();return}this._end=e,this._syncTrigger(),this._syncMirrors(),this._paint(),this.dispatchEvent(new Event(`change`,{bubbles:!0})),this._close()}_wire(){let e=this.querySelector(`.daterange-trigger`),t=this.querySelector(`.daterange-pop`),n=this.querySelector(`.daterange`);if(!e||!t)return;let r=()=>!t.hidden;this._open=()=>{let r=A(this._start);if(r)this._viewY=r.y,this._viewM=r.m;else{let e=new Date;this._viewY=e.getFullYear(),this._viewM=e.getMonth()}this._renderView(),t.hidden=!1,n?.classList.add(`open`),this._position(e,t),e.setAttribute(`aria-expanded`,`true`)},this._close=()=>{t.hidden=!0,this._hover=``,n?.classList.remove(`open`),e.setAttribute(`aria-expanded`,`false`)},e.addEventListener(`click`,()=>r()?this._close():this._open()),t.addEventListener(`click`,e=>{this._popClick=!0;let t=e.target.closest(`[data-nav]`);if(t){let e=N(this._viewY,this._viewM+Number(t.dataset.nav));this._viewY=e.y,this._viewM=e.m,this._renderView();return}if(e.target.closest(`[data-clear]`)){this._start=``,this._end=``,this._hover=``,this._syncTrigger(),this._syncMirrors(),this._renderView(),this.dispatchEvent(new Event(`change`,{bubbles:!0}));return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&this._pick(n.dataset.iso)}),t.addEventListener(`mouseover`,e=>{let t=e.target.closest(`.datepicker-day[data-iso]`);t&&this._start&&!this._end&&(this._hover=t.dataset.iso,this._paint())}),this._onDocClick=e=>{let t=this._popClick;this._popClick=!1,r()&&!t&&!this.contains(e.target)&&this._close()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{r()&&e.key===`Escape`&&this._close()},document.addEventListener(`keydown`,this._onDocKey),o(this,()=>{r()&&this._position(e,t)}),this._syncMirrors()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),this._onDocKey&&document.removeEventListener(`keydown`,this._onDocKey),s(this)}},F=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=`
|
|
113
|
+
<div class="search-select${i}">
|
|
114
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${I(this._accessibleName())}"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
|
|
115
|
+
${n?`<i class="bi bi-${I(n)} search-select-icon" aria-hidden="true"></i>`:``}
|
|
76
116
|
<div class="ms-chips" data-chips></div>
|
|
77
117
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
78
118
|
</div>
|
|
79
119
|
<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="${
|
|
120
|
+
${e?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${I(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
121
|
<div class="search-select-options"></div>
|
|
82
122
|
<div class="search-select-empty" hidden>No matches</div>
|
|
83
123
|
</div>
|
|
84
|
-
</div>`,this._rendered=!0,
|
|
124
|
+
</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="${I(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=>L(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="${I(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}},I=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),L=e=>String(e??``).replace(/<[^>]*>/g,``),R=/[^0-9]/g,z=/[^0-9a-zA-Z]/g,B=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`?z:R,``).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
125
|
<div class="otp">
|
|
86
126
|
<input
|
|
87
127
|
class="otp-field"
|
|
@@ -94,29 +134,31 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
94
134
|
spellcheck="false"
|
|
95
135
|
${n?`disabled`:``} />
|
|
96
136
|
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
97
|
-
</div>`,this._rendered=!0,
|
|
137
|
+
</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()})}},V=[[`AF`,`Afghanistan`,`93`],[`AX`,`Åland Islands`,`358`],[`AL`,`Albania`,`355`],[`DZ`,`Algeria`,`213`],[`AS`,`American Samoa`,`1`],[`AD`,`Andorra`,`376`],[`AO`,`Angola`,`244`],[`AI`,`Anguilla`,`1`],[`AG`,`Antigua & Barbuda`,`1`],[`AR`,`Argentina`,`54`],[`AM`,`Armenia`,`374`],[`AW`,`Aruba`,`297`],[`AC`,`Ascension Island`,`247`],[`AU`,`Australia`,`61`],[`AT`,`Austria`,`43`],[`AZ`,`Azerbaijan`,`994`],[`BS`,`Bahamas`,`1`],[`BH`,`Bahrain`,`973`],[`BD`,`Bangladesh`,`880`],[`BB`,`Barbados`,`1`],[`BY`,`Belarus`,`375`],[`BE`,`Belgium`,`32`],[`BZ`,`Belize`,`501`],[`BJ`,`Benin`,`229`],[`BM`,`Bermuda`,`1`],[`BT`,`Bhutan`,`975`],[`BO`,`Bolivia`,`591`],[`BA`,`Bosnia & Herzegovina`,`387`],[`BW`,`Botswana`,`267`],[`BR`,`Brazil`,`55`],[`IO`,`British Indian Ocean Territory`,`246`],[`VG`,`British Virgin Islands`,`1`],[`BN`,`Brunei`,`673`],[`BG`,`Bulgaria`,`359`],[`BF`,`Burkina Faso`,`226`],[`BI`,`Burundi`,`257`],[`KH`,`Cambodia`,`855`],[`CM`,`Cameroon`,`237`],[`CA`,`Canada`,`1`],[`CV`,`Cape Verde`,`238`],[`BQ`,`Caribbean Netherlands`,`599`],[`KY`,`Cayman Islands`,`1`],[`CF`,`Central African Republic`,`236`],[`TD`,`Chad`,`235`],[`CL`,`Chile`,`56`],[`CN`,`China`,`86`],[`CX`,`Christmas Island`,`61`],[`CC`,`Cocos (Keeling) Islands`,`61`],[`CO`,`Colombia`,`57`],[`KM`,`Comoros`,`269`],[`CG`,`Congo - Brazzaville`,`242`],[`CD`,`Congo - Kinshasa`,`243`],[`CK`,`Cook Islands`,`682`],[`CR`,`Costa Rica`,`506`],[`CI`,`Côte d’Ivoire`,`225`],[`HR`,`Croatia`,`385`],[`CU`,`Cuba`,`53`],[`CW`,`Curaçao`,`599`],[`CY`,`Cyprus`,`357`],[`CZ`,`Czechia`,`420`],[`DK`,`Denmark`,`45`],[`DJ`,`Djibouti`,`253`],[`DM`,`Dominica`,`1`],[`DO`,`Dominican Republic`,`1`],[`EC`,`Ecuador`,`593`],[`EG`,`Egypt`,`20`],[`SV`,`El Salvador`,`503`],[`GQ`,`Equatorial Guinea`,`240`],[`ER`,`Eritrea`,`291`],[`EE`,`Estonia`,`372`],[`SZ`,`Eswatini`,`268`],[`ET`,`Ethiopia`,`251`],[`FK`,`Falkland Islands`,`500`],[`FO`,`Faroe Islands`,`298`],[`FJ`,`Fiji`,`679`],[`FI`,`Finland`,`358`],[`FR`,`France`,`33`],[`GF`,`French Guiana`,`594`],[`PF`,`French Polynesia`,`689`],[`GA`,`Gabon`,`241`],[`GM`,`Gambia`,`220`],[`GE`,`Georgia`,`995`],[`DE`,`Germany`,`49`],[`GH`,`Ghana`,`233`],[`GI`,`Gibraltar`,`350`],[`GR`,`Greece`,`30`],[`GL`,`Greenland`,`299`],[`GD`,`Grenada`,`1`],[`GP`,`Guadeloupe`,`590`],[`GU`,`Guam`,`1`],[`GT`,`Guatemala`,`502`],[`GG`,`Guernsey`,`44`],[`GN`,`Guinea`,`224`],[`GW`,`Guinea-Bissau`,`245`],[`GY`,`Guyana`,`592`],[`HT`,`Haiti`,`509`],[`HN`,`Honduras`,`504`],[`HK`,`Hong Kong SAR China`,`852`],[`HU`,`Hungary`,`36`],[`IS`,`Iceland`,`354`],[`IN`,`India`,`91`],[`ID`,`Indonesia`,`62`],[`IR`,`Iran`,`98`],[`IQ`,`Iraq`,`964`],[`IE`,`Ireland`,`353`],[`IM`,`Isle of Man`,`44`],[`IL`,`Israel`,`972`],[`IT`,`Italy`,`39`],[`JM`,`Jamaica`,`1`],[`JP`,`Japan`,`81`],[`JE`,`Jersey`,`44`],[`JO`,`Jordan`,`962`],[`KZ`,`Kazakhstan`,`7`],[`KE`,`Kenya`,`254`],[`KI`,`Kiribati`,`686`],[`XK`,`Kosovo`,`383`],[`KW`,`Kuwait`,`965`],[`KG`,`Kyrgyzstan`,`996`],[`LA`,`Laos`,`856`],[`LV`,`Latvia`,`371`],[`LB`,`Lebanon`,`961`],[`LS`,`Lesotho`,`266`],[`LR`,`Liberia`,`231`],[`LY`,`Libya`,`218`],[`LI`,`Liechtenstein`,`423`],[`LT`,`Lithuania`,`370`],[`LU`,`Luxembourg`,`352`],[`MO`,`Macao SAR China`,`853`],[`MG`,`Madagascar`,`261`],[`MW`,`Malawi`,`265`],[`MY`,`Malaysia`,`60`],[`MV`,`Maldives`,`960`],[`ML`,`Mali`,`223`],[`MT`,`Malta`,`356`],[`MH`,`Marshall Islands`,`692`],[`MQ`,`Martinique`,`596`],[`MR`,`Mauritania`,`222`],[`MU`,`Mauritius`,`230`],[`YT`,`Mayotte`,`262`],[`MX`,`Mexico`,`52`],[`FM`,`Micronesia`,`691`],[`MD`,`Moldova`,`373`],[`MC`,`Monaco`,`377`],[`MN`,`Mongolia`,`976`],[`ME`,`Montenegro`,`382`],[`MS`,`Montserrat`,`1`],[`MA`,`Morocco`,`212`],[`MZ`,`Mozambique`,`258`],[`MM`,`Myanmar (Burma)`,`95`],[`NA`,`Namibia`,`264`],[`NR`,`Nauru`,`674`],[`NP`,`Nepal`,`977`],[`NL`,`Netherlands`,`31`],[`NC`,`New Caledonia`,`687`],[`NZ`,`New Zealand`,`64`],[`NI`,`Nicaragua`,`505`],[`NE`,`Niger`,`227`],[`NG`,`Nigeria`,`234`],[`NU`,`Niue`,`683`],[`NF`,`Norfolk Island`,`672`],[`KP`,`North Korea`,`850`],[`MK`,`North Macedonia`,`389`],[`MP`,`Northern Mariana Islands`,`1`],[`NO`,`Norway`,`47`],[`OM`,`Oman`,`968`],[`PK`,`Pakistan`,`92`],[`PW`,`Palau`,`680`],[`PS`,`Palestinian Territories`,`970`],[`PA`,`Panama`,`507`],[`PG`,`Papua New Guinea`,`675`],[`PY`,`Paraguay`,`595`],[`PE`,`Peru`,`51`],[`PH`,`Philippines`,`63`],[`PL`,`Poland`,`48`],[`PT`,`Portugal`,`351`],[`PR`,`Puerto Rico`,`1`],[`QA`,`Qatar`,`974`],[`RE`,`Réunion`,`262`],[`RO`,`Romania`,`40`],[`RU`,`Russia`,`7`],[`RW`,`Rwanda`,`250`],[`WS`,`Samoa`,`685`],[`SM`,`San Marino`,`378`],[`ST`,`São Tomé & Príncipe`,`239`],[`SA`,`Saudi Arabia`,`966`],[`SN`,`Senegal`,`221`],[`RS`,`Serbia`,`381`],[`SC`,`Seychelles`,`248`],[`SL`,`Sierra Leone`,`232`],[`SG`,`Singapore`,`65`],[`SX`,`Sint Maarten`,`1`],[`SK`,`Slovakia`,`421`],[`SI`,`Slovenia`,`386`],[`SB`,`Solomon Islands`,`677`],[`SO`,`Somalia`,`252`],[`ZA`,`South Africa`,`27`],[`KR`,`South Korea`,`82`],[`SS`,`South Sudan`,`211`],[`ES`,`Spain`,`34`],[`LK`,`Sri Lanka`,`94`],[`BL`,`St. Barthélemy`,`590`],[`SH`,`St. Helena`,`290`],[`KN`,`St. Kitts & Nevis`,`1`],[`LC`,`St. Lucia`,`1`],[`MF`,`St. Martin`,`590`],[`PM`,`St. Pierre & Miquelon`,`508`],[`VC`,`St. Vincent & Grenadines`,`1`],[`SD`,`Sudan`,`249`],[`SR`,`Suriname`,`597`],[`SJ`,`Svalbard & Jan Mayen`,`47`],[`SE`,`Sweden`,`46`],[`CH`,`Switzerland`,`41`],[`SY`,`Syria`,`963`],[`TW`,`Taiwan`,`886`],[`TJ`,`Tajikistan`,`992`],[`TZ`,`Tanzania`,`255`],[`TH`,`Thailand`,`66`],[`TL`,`Timor-Leste`,`670`],[`TG`,`Togo`,`228`],[`TK`,`Tokelau`,`690`],[`TO`,`Tonga`,`676`],[`TT`,`Trinidad & Tobago`,`1`],[`TA`,`Tristan da Cunha`,`290`],[`TN`,`Tunisia`,`216`],[`TR`,`Türkiye`,`90`],[`TM`,`Turkmenistan`,`993`],[`TC`,`Turks & Caicos Islands`,`1`],[`TV`,`Tuvalu`,`688`],[`VI`,`U.S. Virgin Islands`,`1`],[`UG`,`Uganda`,`256`],[`UA`,`Ukraine`,`380`],[`AE`,`United Arab Emirates`,`971`],[`GB`,`United Kingdom`,`44`],[`US`,`United States`,`1`],[`UY`,`Uruguay`,`598`],[`UZ`,`Uzbekistan`,`998`],[`VU`,`Vanuatu`,`678`],[`VA`,`Vatican City`,`39`],[`VE`,`Venezuela`,`58`],[`VN`,`Vietnam`,`84`],[`WF`,`Wallis & Futuna`,`681`],[`EH`,`Western Sahara`,`212`],[`YE`,`Yemen`,`967`],[`ZM`,`Zambia`,`260`],[`ZW`,`Zimbabwe`,`263`]],H=e=>(V.find(t=>t[0]===e)||[``,``,``])[2],U=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,W=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`+${H(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=V.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${U(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
98
138
|
<div class="phone-input-wrap">
|
|
99
139
|
<div class="phone-country-adornment">
|
|
100
140
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
101
|
-
<span class="${
|
|
141
|
+
<span class="${U(this._country)}" data-flag aria-hidden="true"></span>
|
|
102
142
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
103
|
-
<span class="phone-dial" data-dial>+${
|
|
143
|
+
<span class="phone-dial" data-dial>+${H(this._country)}</span>
|
|
104
144
|
</button>
|
|
105
145
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
106
146
|
<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
147
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
108
148
|
</div>
|
|
109
149
|
</div>
|
|
110
|
-
<input type="tel" class="input" placeholder="${
|
|
111
|
-
</div>`,this._rendered=!0,
|
|
150
|
+
<input type="tel" class="input" placeholder="${G(e)}" value="${G(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
|
|
151
|
+
</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=U(e)),s&&(s.textContent=`+${H(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)}},G=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),K=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="${q(e.value)}" aria-selected="${t}">${p(e)}</button>`}).join(``);this.innerHTML=`
|
|
112
152
|
<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
|
-
|
|
153
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${q(this._accessibleName())}"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
154
|
+
${a?`<i class="bi bi-${q(a)} search-select-icon" aria-hidden="true"></i>`:``}
|
|
155
|
+
${o?`<span class="search-select-prefix">${d(o)}</span>`:``}
|
|
156
|
+
<span class="${u?``:`search-select-placeholder`}" data-label>${u?p(u):d(s)}</span>
|
|
115
157
|
${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
158
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
117
159
|
</button>
|
|
118
160
|
<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">${
|
|
161
|
+
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${q(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>`:``}
|
|
162
|
+
<div class="search-select-options">${f}<div class="search-select-empty" hidden>No matches</div></div>
|
|
121
163
|
</div>
|
|
122
|
-
</div>`,this._rendered=!0,
|
|
164
|
+
</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)}},q=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),J=`image/png,image/jpeg,image/webp`,ee=5,te={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},ne={"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`},Y=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function X(e){let t=[];for(let n of Y(e)){let e=ne[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 Z(e,t){let n=Y(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&&(te[e]||[]).some(e=>i.endsWith(e)))}function re(e,t={}){if(!e)return null;let n=t.accept===void 0?J:t.accept,r=t.maxSizeMb||5;return Z(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${X(n)} file.`}var Q=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function $(){Q(`wui-select`,K),Q(`wui-phone`,W),Q(`wui-datepicker`,T),Q(`wui-date-range`,P),Q(`wui-autocomplete`,m),Q(`wui-multiselect`,F),Q(`wui-otp`,B),Q(`wui-status-icon`,r)}return $(),e.DEFAULT_IMAGE_ACCEPT=J,e.DEFAULT_MAX_SIZE_MB=ee,e.STATUS_TONES=n,e.WuiAutocomplete=m,e.WuiDatePicker=T,e.WuiDateRange=P,e.WuiMultiSelect=F,e.WuiOtp=B,e.WuiPhone=W,e.WuiSelect=K,e.WuiStatusIcon=r,e.acceptLabel=X,e.defineWeborityElements=$,e.matchesAccept=Z,e.validateFile=re,e})({});
|