@webority/ui-elements 0.2.0 → 0.3.0

package/dist/ui-elements.global.js

@@ -1,4 +1,4 @@
-var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`min-chars`,`debounce`,`remote`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``,this._label=``,this._optionsProp=null,this._loading=!1,this._active=-1,this._timer=null}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?this.value=n:this.render())}get value(){return this._value}set value(e){this._value=e==null?``:String(e),this._internals?.setFormValue(this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=r(t.label)),this._syncInput()}set options(e){this._optionsProp=Array.isArray(e)?e:[],this._renderOptions()}get options(){return this._readOptions()}set loading(e){this._loading=!!e,this._renderLoading()}get loading(){return this._loading}get _remote(){return this.hasAttribute(`remote`)}get _minChars(){return Math.max(0,Number(this.getAttribute(`min-chars`))||+!!this._remote)}get _debounceMs(){let e=Number(this.getAttribute(`debounce`));return Number.isFinite(e)&&e>=0?e:250}_readOptions(){return this._optionsProp?this._optionsProp:[...this.querySelectorAll(`:scope > wui-option`)].map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML}))}render(){let e=this.getAttribute(`placeholder`)||`Search…`;this.innerHTML=`
+var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`min-chars`,`debounce`,`remote`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``,this._label=``,this._optionsProp=null,this._loading=!1,this._active=-1,this._timer=null}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?this.value=n:this.render())}get value(){return this._value}set value(e){this._value=e==null?``:String(e),this._internals?.setFormValue(this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=r(t.label)),this._syncInput()}set options(e){this._optionsProp=Array.isArray(e)?e:[],this._renderOptions()}get options(){return this._readOptions()}set loading(e){this._loading=!!e,this._renderLoading()}get loading(){return this._loading}get _remote(){return this.hasAttribute(`remote`)}get _minChars(){return Math.max(0,Number(this.getAttribute(`min-chars`))||+!!this._remote)}get _debounceMs(){let e=Number(this.getAttribute(`debounce`));return Number.isFinite(e)&&e>=0?e:250}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this.getAttribute(`placeholder`)||`Search…`;this.innerHTML=`
       <div class="search-select">
         <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false">
           <input class="search-select-input search-select-ac-input" placeholder="${n(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``} />
@@ -25,7 +25,7 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
       </div>
       <div class="datepicker-weekdays">${a.map(e=>`<span>${e}</span>`).join(``)}</div>
       <div class="datepicker-grid">${d}</div>
-      <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{this._renderMonth(),t.hidden=!1,e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),document.addEventListener(`keydown`,e=>{n()&&e.key===`Escape`&&i()}),this._internalsSet()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},d=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,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):[],this._internals?.setFormValue(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()}_readOptions(){return this._optionsProp?this._optionsProp:[...this.querySelectorAll(`:scope > wui-option`)].map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML}))}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?t.label:e}render(){let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;this._internals?.setFormValue(this._values.join(`,`)),this.innerHTML=`
+      <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{this._renderMonth(),t.hidden=!1,e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),document.addEventListener(`keydown`,e=>{n()&&e.key===`Escape`&&i()}),this._internalsSet()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},d=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,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):[],this._internals?.setFormValue(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,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}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;this._internals?.setFormValue(this._values.join(`,`)),this.innerHTML=`
       <div class="search-select">
         <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
           <div class="ms-chips" data-chips></div>
@@ -50,7 +50,7 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
           </div>
         </div>
         <input type="tel" class="input" placeholder="${y(e)}" value="${y(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
-      </div>`,this._rendered=!0,this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),a=this.querySelector(`input[type=tel]`),o=this.querySelector(`[data-flag]`),s=this.querySelector(`[data-dial]`);if(!e||!t)return;let c=()=>!t.hidden,l=()=>{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`},u=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,f(``),l(),n.focus()},d=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{c()&&l()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let f=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)},p=e=>{this._country=e,this.setAttribute(`country`,e),o&&(o.className=_(e)),s&&(s.textContent=`+${g(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);d(),this._commit()};e.addEventListener(`click`,()=>c()?d():u()),n.addEventListener(`input`,()=>f(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&p(t.dataset.iso)}),a.addEventListener(`input`,()=>{this._national=a.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{c()&&!this.contains(e.target)&&d()},document.addEventListener(`click`,this._onDocClick),this._internals?.setFormValue(this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},y=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),b=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,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),this._internals?.setFormValue(this._value),this._syncSelected()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_readOptions(){return this._optionsProp?this._optionsProp:[...this.querySelectorAll(`:scope > wui-option`)].map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,selected:e.hasAttribute(`selected`)}))}render(){let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.getAttribute(`placeholder`)||`Select...`,r=this.getAttribute(`search-placeholder`)||`Search...`,i=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);i&&(this._value=String(i.value)),this._internals?.setFormValue(this._value);let a=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="${x(e.value)}" aria-selected="${t}">${e.label}</button>`}).join(``);this.innerHTML=`
+      </div>`,this._rendered=!0,this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),a=this.querySelector(`input[type=tel]`),o=this.querySelector(`[data-flag]`),s=this.querySelector(`[data-dial]`);if(!e||!t)return;let c=()=>!t.hidden,l=()=>{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`},u=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,f(``),l(),n.focus()},d=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{c()&&l()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let f=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)},p=e=>{this._country=e,this.setAttribute(`country`,e),o&&(o.className=_(e)),s&&(s.textContent=`+${g(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);d(),this._commit()};e.addEventListener(`click`,()=>c()?d():u()),n.addEventListener(`input`,()=>f(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&p(t.dataset.iso)}),a.addEventListener(`input`,()=>{this._national=a.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{c()&&!this.contains(e.target)&&d()},document.addEventListener(`click`,this._onDocClick),this._internals?.setFormValue(this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},y=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),b=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,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),this._internals?.setFormValue(this._value),this._syncSelected()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.getAttribute(`placeholder`)||`Select...`,r=this.getAttribute(`search-placeholder`)||`Search...`,i=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);i&&(this._value=String(i.value)),this._internals?.setFormValue(this._value);let a=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="${x(e.value)}" aria-selected="${t}">${e.label}</button>`}).join(``);this.innerHTML=`
       <div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}">
         <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
           <span class="${i?``:`search-select-placeholder`}" data-label>${i?i.label:n}</span>

package/dist/ui-elements.js

@@ -50,13 +50,20 @@ var e = class extends HTMLElement {
 		let e = Number(this.getAttribute("debounce"));
 		return Number.isFinite(e) && e >= 0 ? e : 250;
 	}
-	_readOptions() {
-		return this._optionsProp ? this._optionsProp : [...this.querySelectorAll(":scope > wui-option")].map((e) => ({
+	_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
-		}));
+			label: e.innerHTML,
+			selected: e.hasAttribute("selected")
+		})));
+	}
+	_readOptions() {
+		return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
 	}
 	render() {
+		this._snapshotDeclared();
 		let e = this.getAttribute("placeholder") || "Search…";
 		this.innerHTML = `
       <div class="search-select">
@@ -321,17 +328,24 @@ var e = class extends HTMLElement {
 	get options() {
 		return this._readOptions();
 	}
-	_readOptions() {
-		return this._optionsProp ? this._optionsProp : [...this.querySelectorAll(":scope > wui-option")].map((e) => ({
+	_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
-		}));
+			label: e.innerHTML,
+			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;
 	}
 	render() {
+		this._snapshotDeclared();
 		let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
 		this._internals?.setFormValue(this._values.join(",")), this.innerHTML = `
       <div class="search-select">
@@ -1768,14 +1782,20 @@ var e = class extends HTMLElement {
 	get options() {
 		return this._readOptions();
 	}
-	_readOptions() {
-		return this._optionsProp ? this._optionsProp : [...this.querySelectorAll(":scope > wui-option")].map((e) => ({
+	_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,
 			selected: e.hasAttribute("selected")
-		}));
+		})));
+	}
+	_readOptions() {
+		return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
 	}
 	render() {
+		this._snapshotDeclared();
 		let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.getAttribute("placeholder") || "Select...", r = this.getAttribute("search-placeholder") || "Search...", i = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
 		i && (this._value = String(i.value)), this._internals?.setFormValue(this._value);
 		let a = e.map((e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",