@webority/ui-elements 0.0.9 → 0.0.10
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.
|
@@ -10,7 +10,7 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
10
10
|
<div class="search-select-empty" hidden>No matches</div>
|
|
11
11
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
12
12
|
</div>
|
|
13
|
-
</div>`,this._rendered=!0,this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!
|
|
13
|
+
</div>`,this._rendered=!0,this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!e?.value)}_renderLoading(){let{spinner:e}=this._refs();e&&(e.hidden=!this._loading)}_renderOptions(e){let t=this._refs();if(!t.optionsWrap)return;let i=(e??(t.input?t.input.value:``)).trim().toLowerCase(),a=this._readOptions();!this._remote&&i&&(a=a.filter(e=>r(e.label).toLowerCase().includes(i))),t.optionsWrap.innerHTML=a.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${n(e.value)}" aria-selected="${t}">${e.label}</button>`}).join(``),this._active=-1;let o=i.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&o&&!a.length)),t.empty&&(t.empty.hidden=this._loading||a.length>0||this._remote&&o)}_wire(){let e=this._refs();if(!e.control||!e.input)return;let t=()=>{let t=e.control.getBoundingClientRect();e.menu.style.position=`fixed`,e.menu.style.top=`${t.bottom+4}px`,e.menu.style.left=`${t.left}px`,e.menu.style.width=`${t.width}px`},n=()=>this._optionEls().filter(e=>!e.hidden),i=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`}))},a=()=>!e.menu.hidden,o=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),this._renderOptions()},s=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),i(-1),this._syncInput()},c=t=>{this._value=t.dataset.value,this._label=r(t.innerHTML),this._internals?.setFormValue(this._value),e.input.value=this._label,this.dispatchEvent(new Event(`change`,{bubbles:!0})),s(),e.input.focus()};e.input.addEventListener(`focus`,()=>o()),e.input.addEventListener(`input`,()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),a()||o(),this._remote){if(this._renderOptions(t),t.trim().length<this._minChars)return;clearTimeout(this._timer),this._timer=setTimeout(()=>{this.dispatchEvent(new CustomEvent(`search`,{bubbles:!0,detail:{query:t}}))},this._debounceMs)}else this._renderOptions(t)}),e.input.addEventListener(`keydown`,e=>{let t=n();e.key===`ArrowDown`?(e.preventDefault(),a()||o(),i(Math.min(this._active+1,t.length-1))):e.key===`ArrowUp`?(e.preventDefault(),i(Math.max(this._active-1,0))):e.key===`Enter`?t[this._active]&&(e.preventDefault(),c(t[this._active])):e.key===`Escape`&&s()}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&c(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&i(this._optionEls().indexOf(t))}),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,this._internals?.setFormValue(``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus()}),this._onDocClick=e=>{a()&&!this.contains(e.target)&&s()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{a()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),clearTimeout(this._timer)}},n=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),r=e=>String(e??``).replace(/<[^>]*>/g,``),i=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],a=[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`],o=e=>String(e).padStart(2,`0`),s=(e,t,n)=>`${e}-${o(t+1)}-${o(n)}`,c=e=>{let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e||``);return t?{y:+t[1],m:t[2]-1,d:+t[3]}:null},l=e=>{let t=c(e);return t?`${o(t.d)} ${i[t.m].slice(0,3)} ${t.y}`:``},u=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`min`,`max`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,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||``,this._internals?.setFormValue(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=c(this._value);t&&(this._viewY=t.y,this._viewM=t.m),this.innerHTML=`
|
|
14
14
|
<div class="datepicker">
|
|
15
15
|
<button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
|
16
16
|
<span data-trigger-label class="${t?``:`search-select-placeholder`}">${t?l(this._value):e}</span>
|
|
@@ -36,7 +36,7 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
|
|
|
36
36
|
<div class="search-select-options"></div>
|
|
37
37
|
<div class="search-select-empty" hidden>No matches</div>
|
|
38
38
|
</div>
|
|
39
|
-
</div>`,this._rendered=!0,this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`;if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${p(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${f(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>m(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="${f(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(
|
|
39
|
+
</div>`,this._rendered=!0,this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`;if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${p(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${f(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>m(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="${f(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(!e||!t)return;let a=()=>this.hasAttribute(`disabled`),o=()=>{let n=e.getBoundingClientRect();t.style.position=`fixed`,t.style.top=`${n.bottom+4}px`,t.style.left=`${n.left}px`,t.style.width=`${n.width}px`},s=()=>[...this.querySelectorAll(`.search-select-option`)],c=()=>s().filter(e=>!e.hidden),l=e=>{let t=c();this._active=e;for(let e of s())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},u=()=>!t.hidden,d=()=>{a()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),o(),n&&(n.value=``,this._renderOptions(``),n.focus()))},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),l(-1)},p=()=>{this._internals?.setFormValue(this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=e=>{let t=String(e);this._values.includes(t)?this._values=this._values.filter(e=>e!==t):this._values=[...this._values,t],this._renderControl(),this._renderOptions(n?n.value:``),p()},h=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),p()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),h(t.dataset.remove);return}u()?f():d()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(m(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(c().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),l(-1)}),n?.addEventListener(`keydown`,t=>{let r=c();t.key===`ArrowDown`?(t.preventDefault(),l(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),l(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&m(r[this._active].dataset.value)):t.key===`Escape`?(f(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&h(this._values[this._values.length-1])}),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{!u()&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())}),this._onDocClick=e=>{u()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{u()&&o()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},f=e=>String(e??``).replace(/"/g,`"`).replace(/</g,`<`),p=e=>String(e??``).replace(/&/g,`&`).replace(/</g,`<`),m=e=>String(e??``).replace(/<[^>]*>/g,``),h=[[`IN`,`India`,`91`],[`US`,`United States`,`1`],[`GB`,`United Kingdom`,`44`],[`AE`,`United Arab Emirates`,`971`],[`SG`,`Singapore`,`65`],[`AU`,`Australia`,`61`],[`CA`,`Canada`,`1`],[`DE`,`Germany`,`49`],[`FR`,`France`,`33`],[`IT`,`Italy`,`39`],[`ES`,`Spain`,`34`],[`NL`,`Netherlands`,`31`],[`CH`,`Switzerland`,`41`],[`SE`,`Sweden`,`46`],[`NO`,`Norway`,`47`],[`DK`,`Denmark`,`45`],[`IE`,`Ireland`,`353`],[`NZ`,`New Zealand`,`64`],[`JP`,`Japan`,`81`],[`CN`,`China`,`86`],[`HK`,`Hong Kong`,`852`],[`MY`,`Malaysia`,`60`],[`ID`,`Indonesia`,`62`],[`TH`,`Thailand`,`66`],[`PH`,`Philippines`,`63`],[`VN`,`Vietnam`,`84`],[`KR`,`South Korea`,`82`],[`SA`,`Saudi Arabia`,`966`],[`QA`,`Qatar`,`974`],[`KW`,`Kuwait`,`965`],[`BH`,`Bahrain`,`973`],[`OM`,`Oman`,`968`],[`ZA`,`South Africa`,`27`],[`NG`,`Nigeria`,`234`],[`KE`,`Kenya`,`254`],[`EG`,`Egypt`,`20`],[`BR`,`Brazil`,`55`],[`MX`,`Mexico`,`52`],[`AR`,`Argentina`,`54`],[`BD`,`Bangladesh`,`880`],[`PK`,`Pakistan`,`92`],[`LK`,`Sri Lanka`,`94`],[`NP`,`Nepal`,`977`]],g=e=>e.toUpperCase().replace(/./g,e=>String.fromCodePoint(127397+e.charCodeAt(0))),_=e=>(h.find(t=>t[0]===e)||[``,``,``])[2],v=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._country=`IN`,this._national=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`country`&&(this._country=n||`IN`),this.render())}get value(){return`+${_(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){this._internals?.setFormValue(this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){let e=this.getAttribute(`placeholder`)||`Enter phone number`;this._country=this.getAttribute(`country`)||this._country;let t=h.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="phone-flag-lg">${g(e)}</span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
|
|
40
40
|
<div class="phone-input-wrap">
|
|
41
41
|
<div class="phone-country-adornment">
|
|
42
42
|
<button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
|
package/dist/ui-elements.js
CHANGED
|
@@ -89,7 +89,7 @@ var e = class extends HTMLElement {
|
|
|
89
89
|
}
|
|
90
90
|
_syncInput() {
|
|
91
91
|
let { input: e, clear: t } = this._refs();
|
|
92
|
-
e && document.activeElement !== e && (e.value = this._label), t && (t.hidden = !this._value && !
|
|
92
|
+
e && document.activeElement !== e && (e.value = this._label), t && (t.hidden = !this._value && !e?.value);
|
|
93
93
|
}
|
|
94
94
|
_renderLoading() {
|
|
95
95
|
let { spinner: e } = this._refs();
|
|
@@ -367,7 +367,7 @@ var e = class extends HTMLElement {
|
|
|
367
367
|
}
|
|
368
368
|
_wire() {
|
|
369
369
|
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");
|
|
370
|
-
if (
|
|
370
|
+
if (!e || !t) return;
|
|
371
371
|
let a = () => this.hasAttribute("disabled"), o = () => {
|
|
372
372
|
let n = e.getBoundingClientRect();
|
|
373
373
|
t.style.position = "fixed", t.style.top = `${n.bottom + 4}px`, t.style.left = `${n.left}px`, t.style.width = `${n.width}px`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/ui-elements",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
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",
|