@webority/ui-elements 0.6.7 → 0.6.8

package/dist/ui-elements.global.js

@@ -70,7 +70,7 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
       </div>
       <div class="datepicker-weekdays">${p.map(e=>`<span>${e}</span>`).join(``)}</div>
       <div class="datepicker-grid">${s}</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=()=>{if(!g(this._value)&&!this._viewNavigated){let e=new Date;this._viewY=e.getFullYear(),this._viewM=e.getMonth()}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._viewNavigated=!0,this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{n()&&e.key===`Escape`&&i()},document.addEventListener(`keydown`,this._onDocKey),this._syncFormValue()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),this._onDocKey&&document.removeEventListener(`keydown`,this._onDocKey)}},y=class extends HTMLElement{_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`,`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):[],a(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,[o]:!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?c(t):s(e)}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;a(this,this._values.join(`,`)),this.innerHTML=`
+      <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_position(e,t){let n=e.getBoundingClientRect(),r=t.offsetHeight,i=window.innerHeight-n.bottom,a=i<r+4&&n.top>i;t.classList.toggle(`drop-up`,a),t.style.position=`fixed`,t.style.top=a?`${Math.max(4,n.top-r-4)}px`:`${n.bottom+4}px`;let o=t.offsetWidth,s=Math.min(n.left,window.innerWidth-o-4);t.style.left=`${Math.max(4,s)}px`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{if(!g(this._value)&&!this._viewNavigated){let e=new Date;this._viewY=e.getFullYear(),this._viewM=e.getMonth()}this._renderMonth(),t.hidden=!1,this._position(e,t),e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewNavigated=!0,this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{n()&&e.key===`Escape`&&i()},document.addEventListener(`keydown`,this._onDocKey),this._syncFormValue()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),this._onDocKey&&document.removeEventListener(`keydown`,this._onDocKey)}},y=class extends HTMLElement{_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`,`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):[],a(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,[o]:!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?c(t):s(e)}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;a(this,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" aria-label="${b(this._accessibleName())}"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
           <div class="ms-chips" data-chips></div>

package/dist/ui-elements.js

@@ -298,6 +298,12 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
       <div class="datepicker-grid">${s}</div>
       <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
 	}
+	_position(e, t) {
+		let n = e.getBoundingClientRect(), r = t.offsetHeight, i = window.innerHeight - n.bottom, a = i < r + 4 && n.top > i;
+		t.classList.toggle("drop-up", a), t.style.position = "fixed", t.style.top = a ? `${Math.max(4, n.top - r - 4)}px` : `${n.bottom + 4}px`;
+		let o = t.offsetWidth, s = Math.min(n.left, window.innerWidth - o - 4);
+		t.style.left = `${Math.max(4, s)}px`;
+	}
 	_wire() {
 		let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop");
 		if (!e || !t) return;
@@ -306,7 +312,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 				let e = /* @__PURE__ */ new Date();
 				this._viewY = e.getFullYear(), this._viewM = e.getMonth();
 			}
-			this._renderMonth(), t.hidden = !1, e.setAttribute("aria-expanded", "true");
+			this._renderMonth(), t.hidden = !1, this._position(e, t), e.setAttribute("aria-expanded", "true");
 		}, i = () => {
 			t.hidden = !0, e.setAttribute("aria-expanded", "false");
 		};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "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",