@webority/ui-elements 0.6.11 → 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 +60 -21
- package/dist/ui-elements.js +489 -80
- package/package.json +1 -1
|
@@ -55,34 +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,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=`
|
|
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`:``}>
|
|
60
|
+
<button type="button" class="input datepicker-trigger${r}${t?` has-value`:``}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
61
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,l(this,this._value),this._wire()}_syncFormValue(){l(this,this._value)}_syncTrigger(){let e=this.querySelector(`[data-trigger-label]`);if(!
|
|
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"
|
|
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=`
|
|
74
113
|
<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="${
|
|
76
|
-
${n?`<i class="bi bi-${
|
|
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>`:``}
|
|
77
116
|
<div class="ms-chips" data-chips></div>
|
|
78
117
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
79
118
|
</div>
|
|
80
119
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
81
|
-
${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>`:``}
|
|
82
121
|
<div class="search-select-options"></div>
|
|
83
122
|
<div class="search-select-empty" hidden>No matches</div>
|
|
84
123
|
</div>
|
|
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="${
|
|
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=`
|
|
86
125
|
<div class="otp">
|
|
87
126
|
<input
|
|
88
127
|
class="otp-field"
|
|
@@ -95,31 +134,31 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
95
134
|
spellcheck="false"
|
|
96
135
|
${n?`disabled`:``} />
|
|
97
136
|
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
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()})}},
|
|
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=`
|
|
99
138
|
<div class="phone-input-wrap">
|
|
100
139
|
<div class="phone-country-adornment">
|
|
101
140
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
102
|
-
<span class="${
|
|
141
|
+
<span class="${U(this._country)}" data-flag aria-hidden="true"></span>
|
|
103
142
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
104
|
-
<span class="phone-dial" data-dial>+${
|
|
143
|
+
<span class="phone-dial" data-dial>+${H(this._country)}</span>
|
|
105
144
|
</button>
|
|
106
145
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
107
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>
|
|
108
147
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
109
148
|
</div>
|
|
110
149
|
</div>
|
|
111
|
-
<input type="tel" class="input" placeholder="${
|
|
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=
|
|
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=`
|
|
113
152
|
<div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}${i}">
|
|
114
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
115
|
-
${a?`<i class="bi bi-${
|
|
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>`:``}
|
|
116
155
|
${o?`<span class="search-select-prefix">${d(o)}</span>`:``}
|
|
117
156
|
<span class="${u?``:`search-select-placeholder`}" data-label>${u?p(u):d(s)}</span>
|
|
118
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>`:``}
|
|
119
158
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
120
159
|
</button>
|
|
121
160
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
122
|
-
${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
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>`:``}
|
|
123
162
|
<div class="search-select-options">${f}<div class="search-select-empty" hidden>No matches</div></div>
|
|
124
163
|
</div>
|
|
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)}},
|
|
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})({});
|
package/dist/ui-elements.js
CHANGED
|
@@ -253,26 +253,35 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
253
253
|
}, x = (e) => {
|
|
254
254
|
let t = b(e);
|
|
255
255
|
return t ? `${v(t.d)} ${g[t.m].slice(0, 3)} ${t.y}` : "";
|
|
256
|
-
}, S =
|
|
256
|
+
}, S = (e, t) => new Date(e, t + 1, 0).getDate(), C = (e, t) => {
|
|
257
|
+
for (; t < 0;) t += 12, --e;
|
|
258
|
+
for (; t > 11;) t -= 12, e += 1;
|
|
259
|
+
return {
|
|
260
|
+
y: e,
|
|
261
|
+
m: t
|
|
262
|
+
};
|
|
263
|
+
}, w = class extends HTMLElement {
|
|
257
264
|
static get observedAttributes() {
|
|
258
265
|
return [
|
|
259
266
|
"value",
|
|
260
267
|
"min",
|
|
261
268
|
"max",
|
|
262
269
|
"placeholder",
|
|
263
|
-
"disabled"
|
|
270
|
+
"disabled",
|
|
271
|
+
"first-day",
|
|
272
|
+
"size"
|
|
264
273
|
];
|
|
265
274
|
}
|
|
266
275
|
constructor() {
|
|
267
276
|
super(), this._value = "";
|
|
268
277
|
let e = new Date(2e3, 0, 1);
|
|
269
|
-
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
278
|
+
this._viewY = e.getFullYear(), this._viewM = e.getMonth(), this._mode = "days", this._focus = null, this._slide = "";
|
|
270
279
|
}
|
|
271
280
|
connectedCallback() {
|
|
272
281
|
this._rendered || this.render();
|
|
273
282
|
}
|
|
274
283
|
attributeChangedCallback(e, t, n) {
|
|
275
|
-
this._rendered && (e === "value" ? (this._value = n || "", this._syncTrigger()) : this.render());
|
|
284
|
+
this._rendered && (e === "value" ? (this._value = n || "", this._syncTrigger()) : e === "first-day" ? this.querySelector(".datepicker-pop")?.hidden || this._renderView() : this.render());
|
|
276
285
|
}
|
|
277
286
|
get value() {
|
|
278
287
|
return this._value;
|
|
@@ -280,86 +289,486 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
280
289
|
set value(e) {
|
|
281
290
|
this._value = e || "", c(this, this._value), this._syncTrigger(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
282
291
|
}
|
|
292
|
+
_firstDay() {
|
|
293
|
+
let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
|
|
294
|
+
return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
|
|
295
|
+
}
|
|
283
296
|
render() {
|
|
284
297
|
this._value = this.getAttribute("value") || this._value;
|
|
285
298
|
let e = this.getAttribute("placeholder") || "Enter Date", t = b(this._value);
|
|
286
|
-
t && (this._viewY = t.y, this._viewM = t.m)
|
|
299
|
+
t && (this._viewY = t.y, this._viewM = t.m);
|
|
300
|
+
let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "";
|
|
301
|
+
this.innerHTML = `
|
|
287
302
|
<div class="datepicker">
|
|
288
|
-
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
303
|
+
<button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
289
304
|
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? x(this._value) : e}</span>
|
|
290
305
|
<i class="bi bi-calendar3" aria-hidden="true"></i>
|
|
291
306
|
</button>
|
|
292
|
-
<div class="datepicker-pop" role="dialog" hidden></div>
|
|
307
|
+
<div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
|
|
293
308
|
</div>`, this._rendered = !0, c(this, this._value), this._wire();
|
|
294
309
|
}
|
|
295
310
|
_syncFormValue() {
|
|
296
311
|
c(this, this._value);
|
|
297
312
|
}
|
|
298
313
|
_syncTrigger() {
|
|
299
|
-
let e = this.querySelector("[data-trigger-label]");
|
|
300
|
-
if (!
|
|
301
|
-
let
|
|
302
|
-
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
let e = this.
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
314
|
+
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
|
|
315
|
+
if (!t) return;
|
|
316
|
+
let n = b(this._value);
|
|
317
|
+
t.textContent = n ? x(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
|
|
318
|
+
}
|
|
319
|
+
_limits() {
|
|
320
|
+
let e = b(this.getAttribute("min")), t = b(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
|
|
321
|
+
return {
|
|
322
|
+
dayDisabled: (e, t, i) => {
|
|
323
|
+
let a = new Date(e, t, i).getTime();
|
|
324
|
+
return a < n || a > r;
|
|
325
|
+
},
|
|
326
|
+
monthDisabled: (e, t) => {
|
|
327
|
+
let i = new Date(e, t, 1).getTime();
|
|
328
|
+
return new Date(e, t, S(e, t)).getTime() < n || i > r;
|
|
329
|
+
},
|
|
330
|
+
yearDisabled: (e) => {
|
|
331
|
+
let t = new Date(e, 0, 1).getTime();
|
|
332
|
+
return new Date(e, 11, 31).getTime() < n || t > r;
|
|
333
|
+
}
|
|
334
|
+
};
|
|
335
|
+
}
|
|
336
|
+
_renderView() {
|
|
337
|
+
let e = this.querySelector(".datepicker-pop");
|
|
338
|
+
e && (this._mode === "months" ? e.innerHTML = this._monthsHtml() : this._mode === "years" ? e.innerHTML = this._yearsHtml() : e.innerHTML = this._daysHtml(), this._focusActive());
|
|
339
|
+
}
|
|
340
|
+
_daysHtml() {
|
|
341
|
+
let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = S(this._viewY, this._viewM), r = b(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
|
|
342
|
+
y: this._viewY,
|
|
343
|
+
m: this._viewM,
|
|
344
|
+
d: 1
|
|
345
|
+
}, s = (e, t, n, s) => {
|
|
346
|
+
let c = y(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);
|
|
347
|
+
return `<button type="button" class="${[
|
|
348
|
+
"datepicker-day",
|
|
349
|
+
s ? "is-outside" : "",
|
|
350
|
+
u ? "is-today" : "",
|
|
351
|
+
l ? "is-selected" : ""
|
|
352
|
+
].filter(Boolean).join(" ")}" data-iso="${c}" role="gridcell" tabindex="${d && !f ? "0" : "-1"}"${l ? " aria-selected=\"true\"" : ""}${f ? " disabled aria-disabled=\"true\"" : ""}>${n}</button>`;
|
|
353
|
+
}, c = "", l = C(this._viewY, this._viewM - 1), u = S(l.y, l.m);
|
|
354
|
+
for (let e = t - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
|
|
355
|
+
for (let e = 1; e <= n; e++) c += s(this._viewY, this._viewM, e, !1);
|
|
356
|
+
let d = C(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
|
|
357
|
+
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
358
|
+
let p = _.map((t, n) => _[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
|
|
359
|
+
return `
|
|
315
360
|
<div class="datepicker-head">
|
|
316
361
|
<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>
|
|
317
|
-
<
|
|
362
|
+
<button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${g[this._viewM]} ${this._viewY}</button>
|
|
318
363
|
<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>
|
|
319
364
|
</div>
|
|
320
|
-
<div class="datepicker-weekdays">${
|
|
321
|
-
<div class="datepicker-grid">${
|
|
322
|
-
<div class="datepicker-foot"
|
|
365
|
+
<div class="datepicker-weekdays">${p}</div>
|
|
366
|
+
<div class="datepicker-grid${this._slide ? ` ${this._slide}` : ""}" role="grid">${c}</div>
|
|
367
|
+
<div class="datepicker-foot">
|
|
368
|
+
<button type="button" class="datepicker-link" data-today>Today</button>
|
|
369
|
+
<button type="button" class="datepicker-link" data-clear>Clear</button>
|
|
370
|
+
</div>`;
|
|
371
|
+
}
|
|
372
|
+
_monthsHtml() {
|
|
373
|
+
let e = b(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
|
|
374
|
+
for (let i = 0; i < 12; i++) {
|
|
375
|
+
let a = e && e.y === this._viewY && e.m === i, o = t.getFullYear() === this._viewY && t.getMonth() === i, s = n(this._viewY, i), c = [
|
|
376
|
+
"datepicker-cell",
|
|
377
|
+
o ? "is-today" : "",
|
|
378
|
+
a ? "is-selected" : ""
|
|
379
|
+
].filter(Boolean).join(" ");
|
|
380
|
+
r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${g[i].slice(0, 3)}</button>`;
|
|
381
|
+
}
|
|
382
|
+
return `
|
|
383
|
+
<div class="datepicker-head">
|
|
384
|
+
<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>
|
|
385
|
+
<button type="button" class="datepicker-month" data-view="years" aria-label="Choose year">${this._viewY}</button>
|
|
386
|
+
<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>
|
|
387
|
+
</div>
|
|
388
|
+
<div class="datepicker-cells">${r}</div>`;
|
|
389
|
+
}
|
|
390
|
+
_yearsHtml() {
|
|
391
|
+
let e = b(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
|
|
392
|
+
for (let a = 0; a < 12; a++) {
|
|
393
|
+
let o = r + a, s = e && e.y === o, c = t === o, l = n(o), u = [
|
|
394
|
+
"datepicker-cell",
|
|
395
|
+
c ? "is-today" : "",
|
|
396
|
+
s ? "is-selected" : ""
|
|
397
|
+
].filter(Boolean).join(" ");
|
|
398
|
+
i += `<button type="button" class="${u}" data-year="${o}"${l ? " disabled" : ""}>${o}</button>`;
|
|
399
|
+
}
|
|
400
|
+
return `
|
|
401
|
+
<div class="datepicker-head">
|
|
402
|
+
<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>
|
|
403
|
+
<span class="datepicker-month">${r + 1} – ${r + 10}</span>
|
|
404
|
+
<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>
|
|
405
|
+
</div>
|
|
406
|
+
<div class="datepicker-cells">${i}</div>`;
|
|
407
|
+
}
|
|
408
|
+
_focusActive() {
|
|
409
|
+
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)");
|
|
410
|
+
t && e.contains(document.activeElement) && t.focus();
|
|
323
411
|
}
|
|
324
412
|
_position(e, t) {
|
|
325
413
|
i(e, t);
|
|
326
414
|
}
|
|
415
|
+
_setFocus(e, t, n, r) {
|
|
416
|
+
let { y: i, m: a } = C(e, t);
|
|
417
|
+
this._focus = {
|
|
418
|
+
y: i,
|
|
419
|
+
m: a,
|
|
420
|
+
d: n
|
|
421
|
+
};
|
|
422
|
+
let o = i !== this._viewY || a !== this._viewM;
|
|
423
|
+
this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${y(i, a, n)}"]`)?.focus();
|
|
424
|
+
}
|
|
425
|
+
_onKey(e) {
|
|
426
|
+
if (this._mode !== "days") {
|
|
427
|
+
e.key === "Escape" && this._close();
|
|
428
|
+
return;
|
|
429
|
+
}
|
|
430
|
+
let t = this._focus || b(this._value) || {
|
|
431
|
+
y: this._viewY,
|
|
432
|
+
m: this._viewM,
|
|
433
|
+
d: 1
|
|
434
|
+
}, n = (n, r) => {
|
|
435
|
+
e.preventDefault();
|
|
436
|
+
let i = new Date(t.y, t.m, t.d + n);
|
|
437
|
+
this._setFocus(i.getFullYear(), i.getMonth(), i.getDate(), r);
|
|
438
|
+
};
|
|
439
|
+
switch (e.key) {
|
|
440
|
+
case "ArrowLeft": return n(-1, "slide-prev");
|
|
441
|
+
case "ArrowRight": return n(1, "slide-next");
|
|
442
|
+
case "ArrowUp": return n(-7, "slide-prev");
|
|
443
|
+
case "ArrowDown": return n(7, "slide-next");
|
|
444
|
+
case "Home": return n(-((new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7), "slide-prev");
|
|
445
|
+
case "End": return n(6 - (new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7, "slide-next");
|
|
446
|
+
case "PageUp": {
|
|
447
|
+
e.preventDefault();
|
|
448
|
+
let n = C(t.y, t.m - (e.shiftKey ? 12 : 1));
|
|
449
|
+
return this._setFocus(n.y, n.m, Math.min(t.d, S(n.y, n.m)), "slide-prev");
|
|
450
|
+
}
|
|
451
|
+
case "PageDown": {
|
|
452
|
+
e.preventDefault();
|
|
453
|
+
let n = C(t.y, t.m + (e.shiftKey ? 12 : 1));
|
|
454
|
+
return this._setFocus(n.y, n.m, Math.min(t.d, S(n.y, n.m)), "slide-next");
|
|
455
|
+
}
|
|
456
|
+
case "Enter":
|
|
457
|
+
case " ":
|
|
458
|
+
e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = y(t.y, t.m, t.d), this._close());
|
|
459
|
+
return;
|
|
460
|
+
case "Escape": return this._close();
|
|
461
|
+
default:
|
|
462
|
+
}
|
|
463
|
+
}
|
|
327
464
|
_wire() {
|
|
328
|
-
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop");
|
|
465
|
+
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop"), n = this.querySelector(".datepicker");
|
|
329
466
|
if (!e || !t) return;
|
|
330
|
-
let
|
|
467
|
+
let r = () => !t.hidden;
|
|
468
|
+
this._open = () => {
|
|
331
469
|
if (!b(this._value) && !this._viewNavigated) {
|
|
332
470
|
let e = /* @__PURE__ */ new Date();
|
|
333
471
|
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
334
472
|
}
|
|
335
|
-
this.
|
|
336
|
-
|
|
337
|
-
|
|
473
|
+
let r = b(this._value), i = /* @__PURE__ */ new Date();
|
|
474
|
+
this._mode = "days", this._focus = r || {
|
|
475
|
+
y: this._viewY,
|
|
476
|
+
m: this._viewM,
|
|
477
|
+
d: i.getFullYear() === this._viewY && i.getMonth() === this._viewM ? i.getDate() : 1
|
|
478
|
+
}, this._renderView(), t.hidden = !1, n?.classList.add("open"), this._position(e, t), e.setAttribute("aria-expanded", "true"), t.querySelector("[tabindex=\"0\"]")?.focus();
|
|
479
|
+
}, this._close = () => {
|
|
480
|
+
t.hidden = !0, n?.classList.remove("open"), e.setAttribute("aria-expanded", "false"), e.focus();
|
|
481
|
+
}, e.addEventListener("click", () => r() ? this._close() : this._open()), t.addEventListener("click", (e) => {
|
|
482
|
+
this._popClick = !0;
|
|
483
|
+
let t = e.target.closest("[data-nav]");
|
|
484
|
+
if (t) {
|
|
485
|
+
this._viewNavigated = !0, this._slide = Number(t.dataset.nav) < 0 ? "slide-prev" : "slide-next";
|
|
486
|
+
let e = C(this._viewY, this._viewM + Number(t.dataset.nav));
|
|
487
|
+
this._viewY = e.y, this._viewM = e.m, this._focus = {
|
|
488
|
+
y: e.y,
|
|
489
|
+
m: e.m,
|
|
490
|
+
d: 1
|
|
491
|
+
}, this._renderView(), this._slide = "";
|
|
492
|
+
return;
|
|
493
|
+
}
|
|
494
|
+
let n = e.target.closest("[data-nav-year]");
|
|
495
|
+
if (n) {
|
|
496
|
+
this._viewY += Number(n.dataset.navYear), this._renderView();
|
|
497
|
+
return;
|
|
498
|
+
}
|
|
499
|
+
let r = e.target.closest("[data-nav-decade]");
|
|
500
|
+
if (r) {
|
|
501
|
+
this._viewY += Number(r.dataset.navDecade) * 10, this._renderView();
|
|
502
|
+
return;
|
|
503
|
+
}
|
|
504
|
+
let i = e.target.closest("[data-view]");
|
|
505
|
+
if (i) {
|
|
506
|
+
this._mode = i.dataset.view, this._renderView();
|
|
507
|
+
return;
|
|
508
|
+
}
|
|
509
|
+
let a = e.target.closest("[data-month]");
|
|
510
|
+
if (a && !a.disabled) {
|
|
511
|
+
this._viewNavigated = !0, this._viewM = Number(a.dataset.month), this._mode = "days", this._focus = {
|
|
512
|
+
y: this._viewY,
|
|
513
|
+
m: this._viewM,
|
|
514
|
+
d: 1
|
|
515
|
+
}, this._renderView();
|
|
516
|
+
return;
|
|
517
|
+
}
|
|
518
|
+
let o = e.target.closest("[data-year]");
|
|
519
|
+
if (o && !o.disabled) {
|
|
520
|
+
this._viewNavigated = !0, this._viewY = Number(o.dataset.year), this._mode = "months", this._renderView();
|
|
521
|
+
return;
|
|
522
|
+
}
|
|
523
|
+
if (e.target.closest("[data-today]")) {
|
|
524
|
+
let e = /* @__PURE__ */ new Date();
|
|
525
|
+
this.value = y(e.getFullYear(), e.getMonth(), e.getDate()), this._close();
|
|
526
|
+
return;
|
|
527
|
+
}
|
|
528
|
+
if (e.target.closest("[data-clear]")) {
|
|
529
|
+
this.value = "", this._close();
|
|
530
|
+
return;
|
|
531
|
+
}
|
|
532
|
+
let s = e.target.closest(".datepicker-day[data-iso]");
|
|
533
|
+
s && !s.disabled && (this.value = s.dataset.iso, this._close());
|
|
534
|
+
}), this._onKeyBound = (e) => {
|
|
535
|
+
r() && this._onKey(e);
|
|
536
|
+
}, t.addEventListener("keydown", this._onKeyBound), this._onDocClick = (e) => {
|
|
537
|
+
let t = this._popClick;
|
|
538
|
+
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
539
|
+
}, document.addEventListener("click", this._onDocClick), a(this, () => {
|
|
540
|
+
r() && this._position(e, t);
|
|
541
|
+
}), this._syncFormValue();
|
|
542
|
+
}
|
|
543
|
+
disconnectedCallback() {
|
|
544
|
+
this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
|
|
545
|
+
}
|
|
546
|
+
}, T = [
|
|
547
|
+
"January",
|
|
548
|
+
"February",
|
|
549
|
+
"March",
|
|
550
|
+
"April",
|
|
551
|
+
"May",
|
|
552
|
+
"June",
|
|
553
|
+
"July",
|
|
554
|
+
"August",
|
|
555
|
+
"September",
|
|
556
|
+
"October",
|
|
557
|
+
"November",
|
|
558
|
+
"December"
|
|
559
|
+
], E = [
|
|
560
|
+
"Su",
|
|
561
|
+
"Mo",
|
|
562
|
+
"Tu",
|
|
563
|
+
"We",
|
|
564
|
+
"Th",
|
|
565
|
+
"Fr",
|
|
566
|
+
"Sa"
|
|
567
|
+
], D = (e) => String(e).padStart(2, "0"), O = (e, t, n) => `${e}-${D(t + 1)}-${D(n)}`, k = (e) => {
|
|
568
|
+
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
569
|
+
return t ? {
|
|
570
|
+
y: +t[1],
|
|
571
|
+
m: t[2] - 1,
|
|
572
|
+
d: +t[3]
|
|
573
|
+
} : null;
|
|
574
|
+
}, A = (e) => {
|
|
575
|
+
let t = k(e);
|
|
576
|
+
return t ? `${D(t.d)} ${T[t.m].slice(0, 3)} ${t.y}` : "";
|
|
577
|
+
}, j = (e, t) => new Date(e, t + 1, 0).getDate(), M = (e, t) => {
|
|
578
|
+
for (; t < 0;) t += 12, --e;
|
|
579
|
+
for (; t > 11;) t -= 12, e += 1;
|
|
580
|
+
return {
|
|
581
|
+
y: e,
|
|
582
|
+
m: t
|
|
583
|
+
};
|
|
584
|
+
}, N = class extends HTMLElement {
|
|
585
|
+
static get observedAttributes() {
|
|
586
|
+
return [
|
|
587
|
+
"start",
|
|
588
|
+
"end",
|
|
589
|
+
"min",
|
|
590
|
+
"max",
|
|
591
|
+
"placeholder",
|
|
592
|
+
"disabled",
|
|
593
|
+
"first-day",
|
|
594
|
+
"size"
|
|
595
|
+
];
|
|
596
|
+
}
|
|
597
|
+
constructor() {
|
|
598
|
+
super(), this._start = "", this._end = "", this._hover = "";
|
|
599
|
+
let e = new Date(2e3, 0, 1);
|
|
600
|
+
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
601
|
+
}
|
|
602
|
+
connectedCallback() {
|
|
603
|
+
this._rendered || this.render();
|
|
604
|
+
}
|
|
605
|
+
attributeChangedCallback(e, t, n) {
|
|
606
|
+
this._rendered && (e === "start" || e === "end" ? (this._start = this.getAttribute("start") || "", this._end = this.getAttribute("end") || "", this._syncTrigger(), this._syncMirrors()) : this.render());
|
|
607
|
+
}
|
|
608
|
+
get value() {
|
|
609
|
+
return {
|
|
610
|
+
start: this._start,
|
|
611
|
+
end: this._end
|
|
338
612
|
};
|
|
339
|
-
|
|
613
|
+
}
|
|
614
|
+
set value(e) {
|
|
615
|
+
this._start = e?.start || "", this._end = e?.end || "", this._syncTrigger(), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
616
|
+
}
|
|
617
|
+
_firstDay() {
|
|
618
|
+
let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
|
|
619
|
+
return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
|
|
620
|
+
}
|
|
621
|
+
_label() {
|
|
622
|
+
let e = this.getAttribute("placeholder") || "Start – End";
|
|
623
|
+
return !this._start && !this._end ? {
|
|
624
|
+
text: e,
|
|
625
|
+
empty: !0
|
|
626
|
+
} : {
|
|
627
|
+
text: `${A(this._start) || "Start"} – ${A(this._end) || "End"}`,
|
|
628
|
+
empty: !1
|
|
629
|
+
};
|
|
630
|
+
}
|
|
631
|
+
render() {
|
|
632
|
+
this._start = this.getAttribute("start") || this._start, this._end = this.getAttribute("end") || this._end;
|
|
633
|
+
let e = k(this._start);
|
|
634
|
+
e && (this._viewY = e.y, this._viewM = e.m);
|
|
635
|
+
let t = this.getAttribute("size"), n = t === "sm" ? " input-sm" : t === "lg" ? " input-lg" : "", { text: r, empty: i } = this._label();
|
|
636
|
+
this.innerHTML = `
|
|
637
|
+
<div class="daterange">
|
|
638
|
+
<button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
639
|
+
<span data-range-label class="${i ? "search-select-placeholder" : ""}">${r}</span>
|
|
640
|
+
<i class="bi bi-calendar-range" aria-hidden="true"></i>
|
|
641
|
+
</button>
|
|
642
|
+
<div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
|
|
643
|
+
</div>`, this._rendered = !0, this._syncMirrors(), this._wire();
|
|
644
|
+
}
|
|
645
|
+
_syncTrigger() {
|
|
646
|
+
let e = this.querySelector(".daterange-trigger"), t = this.querySelector("[data-range-label]");
|
|
647
|
+
if (!t) return;
|
|
648
|
+
let { text: n, empty: r } = this._label();
|
|
649
|
+
t.textContent = n, t.classList.toggle("search-select-placeholder", r), e?.classList.toggle("has-value", !r);
|
|
650
|
+
}
|
|
651
|
+
_syncMirrors() {
|
|
652
|
+
let e = this.getAttribute("start-name") || this.getAttribute("name"), t = this.getAttribute("end-name");
|
|
653
|
+
this._mirror("start", e, this._start), this._mirror("end", t, this._end);
|
|
654
|
+
}
|
|
655
|
+
_mirror(e, t, n) {
|
|
656
|
+
if (!t) return;
|
|
657
|
+
let r = this.querySelector(`input[type="hidden"][data-range-mirror="${e}"]`);
|
|
658
|
+
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "";
|
|
659
|
+
}
|
|
660
|
+
_limits() {
|
|
661
|
+
let e = k(this.getAttribute("min")), t = k(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
|
|
662
|
+
return (e, t, i) => {
|
|
663
|
+
let a = new Date(e, t, i).getTime();
|
|
664
|
+
return a < n || a > r;
|
|
665
|
+
};
|
|
666
|
+
}
|
|
667
|
+
_monthHtml(e, t) {
|
|
668
|
+
let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = j(e, t), a = this._limits(), o = E.map((e, t) => E[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
|
|
669
|
+
let i = O(e, t, n), o = a(e, t, n);
|
|
670
|
+
return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
|
|
671
|
+
}, c = "", l = M(e, t - 1), u = j(l.y, l.m);
|
|
672
|
+
for (let e = r - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
|
|
673
|
+
for (let n = 1; n <= i; n++) c += s(e, t, n, !1);
|
|
674
|
+
let d = M(e, t + 1), f = (7 - (r + i) % 7) % 7;
|
|
675
|
+
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
676
|
+
return `
|
|
677
|
+
<div class="daterange-cal">
|
|
678
|
+
<div class="datepicker-month-label">${T[t]} ${e}</div>
|
|
679
|
+
<div class="datepicker-weekdays">${o}</div>
|
|
680
|
+
<div class="datepicker-grid" role="grid">${c}</div>
|
|
681
|
+
</div>`;
|
|
682
|
+
}
|
|
683
|
+
_renderView() {
|
|
684
|
+
let e = this.querySelector(".daterange-pop");
|
|
685
|
+
if (!e) return;
|
|
686
|
+
let t = M(this._viewY, this._viewM + 1);
|
|
687
|
+
e.innerHTML = `
|
|
688
|
+
<div class="daterange-head">
|
|
689
|
+
<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>
|
|
690
|
+
<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>
|
|
691
|
+
</div>
|
|
692
|
+
<div class="daterange-cals">
|
|
693
|
+
${this._monthHtml(this._viewY, this._viewM)}
|
|
694
|
+
${this._monthHtml(t.y, t.m)}
|
|
695
|
+
</div>
|
|
696
|
+
<div class="datepicker-foot">
|
|
697
|
+
<span class="daterange-hint" data-range-hint></span>
|
|
698
|
+
<button type="button" class="datepicker-link" data-clear>Clear</button>
|
|
699
|
+
</div>`, this._paint();
|
|
700
|
+
}
|
|
701
|
+
_paint() {
|
|
702
|
+
let e = this.querySelector(".daterange-pop");
|
|
703
|
+
if (!e) return;
|
|
704
|
+
let t = this._start ? new Date(this._start).getTime() : null, n = this._end;
|
|
705
|
+
t && !this._end && this._hover && new Date(this._hover).getTime() >= t && (n = this._hover);
|
|
706
|
+
let r = n ? new Date(n).getTime() : null;
|
|
707
|
+
for (let n of e.querySelectorAll(".datepicker-day[data-iso]")) {
|
|
708
|
+
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;
|
|
709
|
+
n.classList.toggle("is-range-start", i), n.classList.toggle("is-range-end", a), n.classList.toggle("in-range", o);
|
|
710
|
+
}
|
|
711
|
+
let i = e.querySelector("[data-range-hint]");
|
|
712
|
+
i && (i.textContent = this._start ? this._end ? `${A(this._start)} – ${A(this._end)}` : "Pick an end date" : "Pick a start date");
|
|
713
|
+
}
|
|
714
|
+
_position(e, t) {
|
|
715
|
+
i(e, t);
|
|
716
|
+
}
|
|
717
|
+
_pick(e) {
|
|
718
|
+
if (!this._start || this._start && this._end) {
|
|
719
|
+
this._start = e, this._end = "", this._hover = "", this._syncTrigger(), this._syncMirrors(), this._paint();
|
|
720
|
+
return;
|
|
721
|
+
}
|
|
722
|
+
if (new Date(e).getTime() < new Date(this._start).getTime()) {
|
|
723
|
+
this._start = e, this._paint();
|
|
724
|
+
return;
|
|
725
|
+
}
|
|
726
|
+
this._end = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
|
|
727
|
+
}
|
|
728
|
+
_wire() {
|
|
729
|
+
let e = this.querySelector(".daterange-trigger"), t = this.querySelector(".daterange-pop"), n = this.querySelector(".daterange");
|
|
730
|
+
if (!e || !t) return;
|
|
731
|
+
let r = () => !t.hidden;
|
|
732
|
+
this._open = () => {
|
|
733
|
+
let r = k(this._start);
|
|
734
|
+
if (r) this._viewY = r.y, this._viewM = r.m;
|
|
735
|
+
else {
|
|
736
|
+
let e = /* @__PURE__ */ new Date();
|
|
737
|
+
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
738
|
+
}
|
|
739
|
+
this._renderView(), t.hidden = !1, n?.classList.add("open"), this._position(e, t), e.setAttribute("aria-expanded", "true");
|
|
740
|
+
}, this._close = () => {
|
|
741
|
+
t.hidden = !0, this._hover = "", n?.classList.remove("open"), e.setAttribute("aria-expanded", "false");
|
|
742
|
+
}, e.addEventListener("click", () => r() ? this._close() : this._open()), t.addEventListener("click", (e) => {
|
|
743
|
+
this._popClick = !0;
|
|
340
744
|
let t = e.target.closest("[data-nav]");
|
|
341
745
|
if (t) {
|
|
342
|
-
|
|
746
|
+
let e = M(this._viewY, this._viewM + Number(t.dataset.nav));
|
|
747
|
+
this._viewY = e.y, this._viewM = e.m, this._renderView();
|
|
343
748
|
return;
|
|
344
749
|
}
|
|
345
750
|
if (e.target.closest("[data-clear]")) {
|
|
346
|
-
this.
|
|
751
|
+
this._start = "", this._end = "", this._hover = "", this._syncTrigger(), this._syncMirrors(), this._renderView(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
347
752
|
return;
|
|
348
753
|
}
|
|
349
754
|
let n = e.target.closest(".datepicker-day[data-iso]");
|
|
350
|
-
n && !n.disabled &&
|
|
755
|
+
n && !n.disabled && this._pick(n.dataset.iso);
|
|
756
|
+
}), t.addEventListener("mouseover", (e) => {
|
|
757
|
+
let t = e.target.closest(".datepicker-day[data-iso]");
|
|
758
|
+
t && this._start && !this._end && (this._hover = t.dataset.iso, this._paint());
|
|
351
759
|
}), this._onDocClick = (e) => {
|
|
352
|
-
|
|
760
|
+
let t = this._popClick;
|
|
761
|
+
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
353
762
|
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
354
|
-
|
|
763
|
+
r() && e.key === "Escape" && this._close();
|
|
355
764
|
}, document.addEventListener("keydown", this._onDocKey), a(this, () => {
|
|
356
|
-
|
|
357
|
-
}), this.
|
|
765
|
+
r() && this._position(e, t);
|
|
766
|
+
}), this._syncMirrors();
|
|
358
767
|
}
|
|
359
768
|
disconnectedCallback() {
|
|
360
769
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey), o(this);
|
|
361
770
|
}
|
|
362
|
-
},
|
|
771
|
+
}, P = class extends HTMLElement {
|
|
363
772
|
_accessibleName() {
|
|
364
773
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
365
774
|
}
|
|
@@ -429,13 +838,13 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
429
838
|
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
839
|
c(this, this._values.join(",")), this.innerHTML = `
|
|
431
840
|
<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="${
|
|
433
|
-
${n ? `<i class="bi bi-${
|
|
841
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${F(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
|
|
842
|
+
${n ? `<i class="bi bi-${F(n)} search-select-icon" aria-hidden="true"></i>` : ""}
|
|
434
843
|
<div class="ms-chips" data-chips></div>
|
|
435
844
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
436
845
|
</div>
|
|
437
846
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
|
|
438
|
-
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
847
|
+
${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${F(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>` : ""}
|
|
439
848
|
<div class="search-select-options"></div>
|
|
440
849
|
<div class="search-select-empty" hidden>No matches</div>
|
|
441
850
|
</div>
|
|
@@ -449,7 +858,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
449
858
|
e.innerHTML = `<span class="search-select-placeholder">${u(t)}</span>`;
|
|
450
859
|
return;
|
|
451
860
|
}
|
|
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="${
|
|
861
|
+
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="${F(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(""), this._collapseChips();
|
|
453
862
|
}
|
|
454
863
|
_collapseChips() {
|
|
455
864
|
let e = this.querySelector("[data-chips]");
|
|
@@ -473,9 +882,9 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
473
882
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
474
883
|
if (!t) return;
|
|
475
884
|
let r = (e || "").trim().toLowerCase(), i = this._readOptions();
|
|
476
|
-
r && (i = i.filter((e) =>
|
|
885
|
+
r && (i = i.filter((e) => ee(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
|
|
477
886
|
let t = this._values.includes(String(e.value));
|
|
478
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
887
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${F(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>`;
|
|
479
888
|
}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
|
|
480
889
|
}
|
|
481
890
|
_wire() {
|
|
@@ -537,7 +946,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
537
946
|
disconnectedCallback() {
|
|
538
947
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this), this._ro?.disconnect(), this._ro = null;
|
|
539
948
|
}
|
|
540
|
-
},
|
|
949
|
+
}, F = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), ee = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), I = /[^0-9]/g, L = /[^0-9a-zA-Z]/g, R = class extends HTMLElement {
|
|
541
950
|
static get observedAttributes() {
|
|
542
951
|
return [
|
|
543
952
|
"value",
|
|
@@ -567,7 +976,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
567
976
|
this._value = this._clean(e), c(this, this._value), this._paint();
|
|
568
977
|
}
|
|
569
978
|
_clean(e) {
|
|
570
|
-
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ?
|
|
979
|
+
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? L : I, "").slice(0, this.length);
|
|
571
980
|
}
|
|
572
981
|
connectedCallback() {
|
|
573
982
|
this._rendered || this.render();
|
|
@@ -633,7 +1042,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
633
1042
|
document.activeElement === e && this._paint();
|
|
634
1043
|
});
|
|
635
1044
|
}
|
|
636
|
-
},
|
|
1045
|
+
}, z = [
|
|
637
1046
|
[
|
|
638
1047
|
"AF",
|
|
639
1048
|
"Afghanistan",
|
|
@@ -1859,11 +2268,11 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1859
2268
|
"Zimbabwe",
|
|
1860
2269
|
"263"
|
|
1861
2270
|
]
|
|
1862
|
-
],
|
|
2271
|
+
], B = (e) => (z.find((t) => t[0] === e) || [
|
|
1863
2272
|
"",
|
|
1864
2273
|
"",
|
|
1865
2274
|
""
|
|
1866
|
-
])[2],
|
|
2275
|
+
])[2], V = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, H = class extends HTMLElement {
|
|
1867
2276
|
static get observedAttributes() {
|
|
1868
2277
|
return [
|
|
1869
2278
|
"value",
|
|
@@ -1882,7 +2291,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1882
2291
|
this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
|
|
1883
2292
|
}
|
|
1884
2293
|
get value() {
|
|
1885
|
-
return `+${
|
|
2294
|
+
return `+${B(this._country)}${this._national}`;
|
|
1886
2295
|
}
|
|
1887
2296
|
set value(e) {
|
|
1888
2297
|
this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
|
|
@@ -1893,21 +2302,21 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1893
2302
|
render() {
|
|
1894
2303
|
let e = this.getAttribute("placeholder") || "Enter phone number";
|
|
1895
2304
|
this._country = this.getAttribute("country") || this._country;
|
|
1896
|
-
let t =
|
|
2305
|
+
let t = z.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${V(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
|
|
1897
2306
|
this.innerHTML = `
|
|
1898
2307
|
<div class="phone-input-wrap">
|
|
1899
2308
|
<div class="phone-country-adornment">
|
|
1900
2309
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
1901
|
-
<span class="${
|
|
2310
|
+
<span class="${V(this._country)}" data-flag aria-hidden="true"></span>
|
|
1902
2311
|
<i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
|
|
1903
|
-
<span class="phone-dial" data-dial>+${
|
|
2312
|
+
<span class="phone-dial" data-dial>+${B(this._country)}</span>
|
|
1904
2313
|
</button>
|
|
1905
2314
|
<div class="country-dropdown-menu" role="listbox" hidden>
|
|
1906
2315
|
<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>
|
|
1907
2316
|
<div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
|
|
1908
2317
|
</div>
|
|
1909
2318
|
</div>
|
|
1910
|
-
<input type="tel" class="input" placeholder="${
|
|
2319
|
+
<input type="tel" class="input" placeholder="${U(e)}" value="${U(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
1911
2320
|
</div>`, this._rendered = !0, c(this, this.value), this._wire();
|
|
1912
2321
|
}
|
|
1913
2322
|
_wire() {
|
|
@@ -1932,7 +2341,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1932
2341
|
}
|
|
1933
2342
|
i && (i.hidden = n > 0);
|
|
1934
2343
|
}, m = (e) => {
|
|
1935
|
-
this._country = e, this.setAttribute("country", e), o && (o.className =
|
|
2344
|
+
this._country = e, this.setAttribute("country", e), o && (o.className = V(e)), s && (s.textContent = `+${B(e)}`);
|
|
1936
2345
|
for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
|
|
1937
2346
|
f(), this._commit();
|
|
1938
2347
|
};
|
|
@@ -1948,7 +2357,7 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1948
2357
|
disconnectedCallback() {
|
|
1949
2358
|
this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
|
|
1950
2359
|
}
|
|
1951
|
-
},
|
|
2360
|
+
}, U = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), W = class extends HTMLElement {
|
|
1952
2361
|
static get observedAttributes() {
|
|
1953
2362
|
return [
|
|
1954
2363
|
"value",
|
|
@@ -2008,19 +2417,19 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2008
2417
|
d && (this._value = String(d.value)), c(this, this._value);
|
|
2009
2418
|
let p = e.map((e) => {
|
|
2010
2419
|
let t = String(e.value) === String(this._value);
|
|
2011
|
-
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${
|
|
2420
|
+
return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${G(e.value)}" aria-selected="${t}">${f(e)}</button>`;
|
|
2012
2421
|
}).join("");
|
|
2013
2422
|
this.innerHTML = `
|
|
2014
2423
|
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
|
|
2015
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${
|
|
2016
|
-
${a ? `<i class="bi bi-${
|
|
2424
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${G(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
2425
|
+
${a ? `<i class="bi bi-${G(a)} search-select-icon" aria-hidden="true"></i>` : ""}
|
|
2017
2426
|
${o ? `<span class="search-select-prefix">${u(o)}</span>` : ""}
|
|
2018
2427
|
<span class="${d ? "" : "search-select-placeholder"}" data-label>${d ? f(d) : u(s)}</span>
|
|
2019
2428
|
${n ? "<span class=\"search-select-reset\" role=\"button\" aria-label=\"Clear selection\" hidden><i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i></span>" : ""}
|
|
2020
2429
|
<i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
|
|
2021
2430
|
</button>
|
|
2022
2431
|
<div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
|
|
2023
|
-
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${
|
|
2432
|
+
${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${G(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
2433
|
<div class="search-select-options">${p}<div class="search-select-empty" hidden>No matches</div></div>
|
|
2025
2434
|
</div>
|
|
2026
2435
|
</div>`, this._rendered = !0, c(this, this._value), this._wire(), this._syncReset();
|
|
@@ -2112,14 +2521,14 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2112
2521
|
disconnectedCallback() {
|
|
2113
2522
|
this._onDocClick && document.removeEventListener("click", this._onDocClick), o(this);
|
|
2114
2523
|
}
|
|
2115
|
-
},
|
|
2524
|
+
}, G = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), K = "image/png,image/jpeg,image/webp", te = 5, q = {
|
|
2116
2525
|
"image/png": [".png"],
|
|
2117
2526
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
2118
2527
|
"image/webp": [".webp"],
|
|
2119
2528
|
"image/gif": [".gif"],
|
|
2120
2529
|
"image/svg+xml": [".svg"],
|
|
2121
2530
|
"application/pdf": [".pdf"]
|
|
2122
|
-
},
|
|
2531
|
+
}, J = {
|
|
2123
2532
|
"image/png": "PNG",
|
|
2124
2533
|
"image/jpeg": "JPG",
|
|
2125
2534
|
"image/webp": "WEBP",
|
|
@@ -2133,34 +2542,34 @@ var l = Symbol("wui.trustedHtml"), u = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2133
2542
|
".gif": "GIF",
|
|
2134
2543
|
".svg": "SVG",
|
|
2135
2544
|
".pdf": "PDF"
|
|
2136
|
-
},
|
|
2137
|
-
function
|
|
2545
|
+
}, Y = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
|
|
2546
|
+
function X(e) {
|
|
2138
2547
|
let t = [];
|
|
2139
|
-
for (let n of
|
|
2140
|
-
let e =
|
|
2548
|
+
for (let n of Y(e)) {
|
|
2549
|
+
let e = J[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
2141
2550
|
t.includes(e) || t.push(e);
|
|
2142
2551
|
}
|
|
2143
2552
|
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
2144
2553
|
}
|
|
2145
|
-
function
|
|
2146
|
-
let n =
|
|
2554
|
+
function Z(e, t) {
|
|
2555
|
+
let n = Y(t);
|
|
2147
2556
|
if (!n.length) return !0;
|
|
2148
2557
|
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
2149
|
-
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (
|
|
2558
|
+
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (q[e] || []).some((e) => i.endsWith(e)));
|
|
2150
2559
|
}
|
|
2151
|
-
function
|
|
2560
|
+
function ne(e, t = {}) {
|
|
2152
2561
|
if (!e) return null;
|
|
2153
|
-
let n = t.accept === void 0 ?
|
|
2154
|
-
return
|
|
2562
|
+
let n = t.accept === void 0 ? K : t.accept, r = t.maxSizeMb || 5;
|
|
2563
|
+
return Z(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${X(n)} file.`;
|
|
2155
2564
|
}
|
|
2156
2565
|
//#endregion
|
|
2157
2566
|
//#region src/index.js
|
|
2158
|
-
var
|
|
2567
|
+
var Q = (e, t) => {
|
|
2159
2568
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
2160
2569
|
};
|
|
2161
|
-
function
|
|
2162
|
-
|
|
2570
|
+
function $() {
|
|
2571
|
+
Q("wui-select", W), Q("wui-phone", H), Q("wui-datepicker", w), Q("wui-date-range", N), Q("wui-autocomplete", p), Q("wui-multiselect", P), Q("wui-otp", R), Q("wui-status-icon", n);
|
|
2163
2572
|
}
|
|
2164
|
-
|
|
2573
|
+
$();
|
|
2165
2574
|
//#endregion
|
|
2166
|
-
export {
|
|
2575
|
+
export { K as DEFAULT_IMAGE_ACCEPT, te as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, p as WuiAutocomplete, w as WuiDatePicker, N as WuiDateRange, P as WuiMultiSelect, R as WuiOtp, H as WuiPhone, W as WuiSelect, n as WuiStatusIcon, X as acceptLabel, $ as defineWeborityElements, Z as matchesAccept, ne 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.12",
|
|
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",
|