@webority/ui-elements 0.13.3 → 0.13.4

package/dist/ui-elements.global.js

@@ -439,7 +439,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
         `}
         ${this.hasAttribute(`show-value`)?n?`<span class="slider-value">${this._formatValue(this._start)} – ${this._formatValue(this._end)}</span>`:`<span class="slider-value">${this._formatValue(this._value)}</span>`:``}
       </div>
-    `,this._rendered=!0,this._placeParts(),this._syncMirrors(),this._wire()}_formatValue(e){return`${e}${this.getAttribute(`unit`)||``}`}_placeParts(){let e=this._min(),t=this._max(),n=n=>t===e?0:(n-e)/(t-e),r=this._isRange(),i=r?n(this._start):0,a=n(r?this._end:this._value),o=this.querySelector(`.slider-fill`);o&&(o.style.left=`${i*100}%`,o.style.right=`${100-a*100}%`,r&&o.style.setProperty(`--wui-fill-start`,String(i)),o.style.setProperty(`--wui-fill-end`,String(a)));let s=(e,t)=>{e&&(e.style.left=`${t*100}%`,e.style.setProperty(`--wui-t`,String(t)))};r?(s(this.querySelector(`[data-thumb="start"]`),i),s(this.querySelector(`[data-thumb="end"]`),a)):s(this.querySelector(`.slider-thumb`),a)}_syncValue(){if(this._rendered)if(this._placeParts(),this._isRange()){let e=this.querySelector(`[data-thumb="start"]`),t=this.querySelector(`[data-thumb="end"]`);e&&(e.setAttribute(`aria-valuenow`,String(this._start)),e.setAttribute(`aria-valuetext`,this._formatValue(this._start))),t&&(t.setAttribute(`aria-valuenow`,String(this._end)),t.setAttribute(`aria-valuetext`,this._formatValue(this._end)));let n=this.querySelector(`.slider-value`);n&&(n.textContent=`${this._formatValue(this._start)} – ${this._formatValue(this._end)}`)}else{let e=this.querySelector(`.slider-thumb`);e&&(e.setAttribute(`aria-valuenow`,String(this._value)),e.setAttribute(`aria-valuetext`,this._formatValue(this._value)));let t=this.querySelector(`.slider-value`);t&&(t.textContent=this._formatValue(this._value))}}_syncMirrors(){this._isRange()?this._syncRangeMirrors():this._syncSingleMirror()}_syncSingleMirror(){this.getAttribute(`name`)&&h(this,String(this._value))}_syncRangeMirrors(){let e=this.getAttribute(`start-name`)||this.getAttribute(`name`),t=this.getAttribute(`end-name`);this._mirrorRange(`start`,e,this._start),this._mirrorRange(`end`,t,this._end)}_mirrorRange(e,t,n){if(!t)return;let r=this.querySelector(`input[type="hidden"][data-slider-mirror="${e}"]`);r||(r=document.createElement(`input`),r.type=`hidden`,r.setAttribute(`data-slider-mirror`,e),this.appendChild(r)),r.name=t,r.value=String(n),r.disabled=this.hasAttribute(`disabled`)}_valueAtPosition(e){let t=this.querySelector(`.slider-track`);if(!t)return this._min();let n=t.getBoundingClientRect(),r=this.querySelector(`.slider-thumb`),i=r?r.offsetWidth/2:0,a=n.width-i*2,o=a>0?Math.max(0,Math.min(1,(e-n.left-i)/a)):0,s=this._min()+o*(this._max()-this._min());return this._snapToStep(s)}_nearestThumb(e){return Math.abs(e-this._start)<=Math.abs(e-this._end)?`start`:`end`}_wire(){if(this._teardown(),this.hasAttribute(`disabled`))return;let e=this.querySelectorAll(`.slider-thumb`),t=this.querySelector(`.slider-track`),n=this._isRange();this._pointerDownListener=e=>{if(this.hasAttribute(`disabled`))return;let t=e.target.closest(`.slider-thumb`);t&&(e.preventDefault(),this._isDragging=!0,this._dragThumb=t.getAttribute(`data-thumb`),document.addEventListener(`pointermove`,this._pointerMoveListener),document.addEventListener(`pointerup`,this._pointerUpListener))},this._pointerMoveListener=e=>{if(!this._isDragging)return;e.preventDefault();let t=this._valueAtPosition(e.clientX);if(this._dragThumb===`single`)this._value=this._clamp(t),this._syncValue(),this.dispatchEvent(new CustomEvent(`slide`,{detail:{value:this._value}}));else if(this._dragThumb===`start`){let e=Math.min(t,this._end);this._start=this._clamp(e),this._syncValue(),this.dispatchEvent(new CustomEvent(`slide`,{detail:{start:this._start,end:this._end}}))}else if(this._dragThumb===`end`){let e=Math.max(t,this._start);this._end=this._clamp(e),this._syncValue(),this.dispatchEvent(new CustomEvent(`slide`,{detail:{start:this._start,end:this._end}}))}},this._pointerUpListener=()=>{this._isDragging&&(this._isDragging=!1,this._dragThumb=null,document.removeEventListener(`pointermove`,this._pointerMoveListener),document.removeEventListener(`pointerup`,this._pointerUpListener),this._syncMirrors(),this.dispatchEvent(new Event(`change`,{bubbles:!0})))},this._thumbKeyListener=e=>{let t=e.currentTarget;if(this.hasAttribute(`disabled`))return;let n=this._step(),r=n*10,i=null,a=t.getAttribute(`data-thumb`),o=a===`end`?this._end:a===`start`?this._start:this._value;e.key===`ArrowLeft`||e.key===`ArrowDown`?(e.preventDefault(),i=o-n):e.key===`ArrowRight`||e.key===`ArrowUp`?(e.preventDefault(),i=o+n):e.key===`PageDown`?(e.preventDefault(),i=o-r):e.key===`PageUp`?(e.preventDefault(),i=o+r):e.key===`Home`?(e.preventDefault(),i=this._min()):e.key===`End`&&(e.preventDefault(),i=this._max()),i!=null&&(i=this._clamp(i),a===`single`?this._value=i:a===`start`?this._start=Math.min(i,this._end):a===`end`&&(this._end=Math.max(i,this._start)),this._syncValue(),this._syncMirrors(),this.dispatchEvent(new Event(`change`,{bubbles:!0})))},this._trackClickListener=e=>{if(this.hasAttribute(`disabled`))return;let t=this._valueAtPosition(e.clientX);n?this._nearestThumb(t)===`start`?this._start=Math.min(this._clamp(t),this._end):this._end=Math.max(this._clamp(t),this._start):this._value=this._clamp(t),this._syncValue(),this._syncMirrors(),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},e.forEach(e=>{e.addEventListener(`pointerdown`,this._pointerDownListener),e.addEventListener(`keydown`,this._thumbKeyListener)}),t?.addEventListener(`click`,this._trackClickListener)}_teardown(){for(let e of this.querySelectorAll(`.slider-thumb`))e.removeEventListener(`pointerdown`,this._pointerDownListener),e.removeEventListener(`keydown`,this._thumbKeyListener);document.removeEventListener(`pointermove`,this._pointerMoveListener),document.removeEventListener(`pointerup`,this._pointerUpListener),this._isDragging=!1,this._dragThumb=null,this.querySelector(`.slider-track`)?.removeEventListener(`click`,this._trackClickListener)}disconnectedCallback(){this._teardown()}},Z=(e,t)=>{let n=Number.parseFloat(e);return Number.isFinite(n)?n:t},Ru=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),zu=class extends i{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Add tags`}static get observedAttributes(){return[`placeholder`,`disabled`,`size`,`max-tags`,`aria-label`,`separators`,`allow-duplicates`,`aria-invalid`]}constructor(){super(),this._values=[],this._draftText=``;try{this._internals=this.attachInternals()}catch{this._internals=null}}connectedCallback(){if(!this._rendered){if(!this._valuesInit&&!this._values.length){let e=this.getAttribute(`value`);if(e!=null&&e!==``)this._values=e.split(`,`).map(e=>e.trim()).filter(Boolean);else{let e=[...this.querySelectorAll(`:scope > wui-tag`)].map(e=>e.textContent.trim());e.length&&(this._values=e.map(String))}}this._valuesInit=!0,this._defaultCaptured||=(this._defaultValues=this._values.slice(),!0),this.render();return}this._wire()}formResetCallback(){this.values=(this._defaultValues||[]).slice(),this._draftText=``;let e=this.querySelector(`[data-input]`);e&&(e.value=``)}attributeChangedCallback(e){if(e===`aria-invalid`){this._syncInvalid();return}if(this._rendered){if(e===`separators`||e===`allow-duplicates`){this._wire();return}this.render()}}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],h(this,this._values.join(`,`)),this._rendered&&this._renderControl()}render(){let e=this.getAttribute(`size`),t=e===`sm`?` search-select-sm`:e===`lg`?` search-select-lg`:``;h(this,this._values.join(`,`)),this.innerHTML=`
+    `,this._rendered=!0,this._placeParts(),this._syncMirrors(),this._wire()}_formatValue(e){return`${e}${this.getAttribute(`unit`)||``}`}_placeParts(){let e=this._min(),t=this._max(),n=n=>t===e?0:(n-e)/(t-e),r=this._isRange(),i=r?n(this._start):0,a=n(r?this._end:this._value),o=this.querySelector(`.slider-fill`);o&&(o.style.left=`${i*100}%`,o.style.right=`${100-a*100}%`,r&&o.style.setProperty(`--wui-fill-start`,String(i)),o.style.setProperty(`--wui-fill-end`,String(a)));let s=(e,t)=>{e&&(e.style.left=`${t*100}%`,e.style.setProperty(`--wui-t`,String(t)))};r?(s(this.querySelector(`[data-thumb="start"]`),i),s(this.querySelector(`[data-thumb="end"]`),a)):s(this.querySelector(`.slider-thumb`),a)}_syncValue(){if(this._rendered)if(this._placeParts(),this._isRange()){let e=this.querySelector(`[data-thumb="start"]`),t=this.querySelector(`[data-thumb="end"]`);e&&(e.setAttribute(`aria-valuenow`,String(this._start)),e.setAttribute(`aria-valuetext`,this._formatValue(this._start))),t&&(t.setAttribute(`aria-valuenow`,String(this._end)),t.setAttribute(`aria-valuetext`,this._formatValue(this._end)));let n=this.querySelector(`.slider-value`);n&&(n.textContent=`${this._formatValue(this._start)} – ${this._formatValue(this._end)}`)}else{let e=this.querySelector(`.slider-thumb`);e&&(e.setAttribute(`aria-valuenow`,String(this._value)),e.setAttribute(`aria-valuetext`,this._formatValue(this._value)));let t=this.querySelector(`.slider-value`);t&&(t.textContent=this._formatValue(this._value))}}_syncMirrors(){this._isRange()?this._syncRangeMirrors():this._syncSingleMirror()}_syncSingleMirror(){this.getAttribute(`name`)&&h(this,String(this._value))}_syncRangeMirrors(){let e=this.getAttribute(`start-name`)||this.getAttribute(`name`),t=this.getAttribute(`end-name`);this._mirrorRange(`start`,e,this._start),this._mirrorRange(`end`,t,this._end)}_mirrorRange(e,t,n){if(!t)return;let r=this.querySelector(`input[type="hidden"][data-slider-mirror="${e}"]`);r||(r=document.createElement(`input`),r.type=`hidden`,r.setAttribute(`data-slider-mirror`,e),this.appendChild(r)),r.name=t,r.value=String(n),r.disabled=this.hasAttribute(`disabled`)}_valueAtPosition(e){let t=this.querySelector(`.slider-track`);if(!t)return this._min();let n=t.getBoundingClientRect(),r=this.querySelector(`.slider-thumb`),i=r?r.offsetWidth/2:0,a=n.width-i*2,o=a>0?Math.max(0,Math.min(1,(e-n.left-i)/a)):0,s=this._min()+o*(this._max()-this._min());return this._snapToStep(s)}_nearestThumb(e){return Math.abs(e-this._start)<=Math.abs(e-this._end)?`start`:`end`}_wire(){if(this._teardown(),this.hasAttribute(`disabled`))return;let e=this.querySelectorAll(`.slider-thumb`),t=this.querySelector(`.slider-track`),n=this._isRange();this._pointerDownListener=e=>{if(this.hasAttribute(`disabled`))return;let t=e.target.closest(`.slider-thumb`);t&&(e.preventDefault(),this._isDragging=!0,this._dragThumb=t.getAttribute(`data-thumb`),document.addEventListener(`pointermove`,this._pointerMoveListener),document.addEventListener(`pointerup`,this._pointerUpListener),document.addEventListener(`pointercancel`,this._pointerUpListener))},this._pointerMoveListener=e=>{if(!this._isDragging)return;e.preventDefault();let t=this._valueAtPosition(e.clientX);if(this._dragThumb===`single`)this._value=this._clamp(t),this._syncValue(),this.dispatchEvent(new CustomEvent(`slide`,{detail:{value:this._value}}));else if(this._dragThumb===`start`){let e=Math.min(t,this._end);this._start=this._clamp(e),this._syncValue(),this.dispatchEvent(new CustomEvent(`slide`,{detail:{start:this._start,end:this._end}}))}else if(this._dragThumb===`end`){let e=Math.max(t,this._start);this._end=this._clamp(e),this._syncValue(),this.dispatchEvent(new CustomEvent(`slide`,{detail:{start:this._start,end:this._end}}))}},this._pointerUpListener=()=>{this._isDragging&&(this._isDragging=!1,this._dragThumb=null,document.removeEventListener(`pointermove`,this._pointerMoveListener),document.removeEventListener(`pointerup`,this._pointerUpListener),document.removeEventListener(`pointercancel`,this._pointerUpListener),this._syncMirrors(),this.dispatchEvent(new Event(`change`,{bubbles:!0})))},this._thumbKeyListener=e=>{let t=e.currentTarget;if(this.hasAttribute(`disabled`))return;let n=this._step(),r=n*10,i=null,a=t.getAttribute(`data-thumb`),o=a===`end`?this._end:a===`start`?this._start:this._value;e.key===`ArrowLeft`||e.key===`ArrowDown`?(e.preventDefault(),i=o-n):e.key===`ArrowRight`||e.key===`ArrowUp`?(e.preventDefault(),i=o+n):e.key===`PageDown`?(e.preventDefault(),i=o-r):e.key===`PageUp`?(e.preventDefault(),i=o+r):e.key===`Home`?(e.preventDefault(),i=this._min()):e.key===`End`&&(e.preventDefault(),i=this._max()),i!=null&&(i=this._clamp(i),a===`single`?this._value=i:a===`start`?this._start=Math.min(i,this._end):a===`end`&&(this._end=Math.max(i,this._start)),this._syncValue(),this._syncMirrors(),this.dispatchEvent(new Event(`change`,{bubbles:!0})))},this._trackClickListener=e=>{if(this.hasAttribute(`disabled`))return;let t=this._valueAtPosition(e.clientX);n?this._nearestThumb(t)===`start`?this._start=Math.min(this._clamp(t),this._end):this._end=Math.max(this._clamp(t),this._start):this._value=this._clamp(t),this._syncValue(),this._syncMirrors(),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},e.forEach(e=>{e.addEventListener(`pointerdown`,this._pointerDownListener),e.addEventListener(`keydown`,this._thumbKeyListener)}),t?.addEventListener(`click`,this._trackClickListener)}_teardown(){for(let e of this.querySelectorAll(`.slider-thumb`))e.removeEventListener(`pointerdown`,this._pointerDownListener),e.removeEventListener(`keydown`,this._thumbKeyListener);document.removeEventListener(`pointermove`,this._pointerMoveListener),document.removeEventListener(`pointerup`,this._pointerUpListener),document.removeEventListener(`pointercancel`,this._pointerUpListener),this._isDragging=!1,this._dragThumb=null,this.querySelector(`.slider-track`)?.removeEventListener(`click`,this._trackClickListener)}disconnectedCallback(){this._teardown()}},Z=(e,t)=>{let n=Number.parseFloat(e);return Number.isFinite(n)?n:t},Ru=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),zu=class extends i{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Add tags`}static get observedAttributes(){return[`placeholder`,`disabled`,`size`,`max-tags`,`aria-label`,`separators`,`allow-duplicates`,`aria-invalid`]}constructor(){super(),this._values=[],this._draftText=``;try{this._internals=this.attachInternals()}catch{this._internals=null}}connectedCallback(){if(!this._rendered){if(!this._valuesInit&&!this._values.length){let e=this.getAttribute(`value`);if(e!=null&&e!==``)this._values=e.split(`,`).map(e=>e.trim()).filter(Boolean);else{let e=[...this.querySelectorAll(`:scope > wui-tag`)].map(e=>e.textContent.trim());e.length&&(this._values=e.map(String))}}this._valuesInit=!0,this._defaultCaptured||=(this._defaultValues=this._values.slice(),!0),this.render();return}this._wire()}formResetCallback(){this.values=(this._defaultValues||[]).slice(),this._draftText=``;let e=this.querySelector(`[data-input]`);e&&(e.value=``)}attributeChangedCallback(e){if(e===`aria-invalid`){this._syncInvalid();return}if(this._rendered){if(e===`separators`||e===`allow-duplicates`){this._wire();return}this.render()}}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],h(this,this._values.join(`,`)),this._rendered&&this._renderControl()}render(){let e=this.getAttribute(`size`),t=e===`sm`?` search-select-sm`:e===`lg`?` search-select-lg`:``;h(this,this._values.join(`,`)),this.innerHTML=`
       <div class="search-select${t}">
         <div class="input search-select-control search-select-multi"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
           <input type="text" class="ms-input" data-input aria-label="${Vu(this._accessibleName())}" placeholder="${Vu(this.getAttribute(`placeholder`)||`Add…`)}" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``}/>

package/dist/ui-elements.js

@@ -4447,7 +4447,7 @@ var ze = class extends e {
 		this._pointerDownListener = (e) => {
 			if (this.hasAttribute("disabled")) return;
 			let t = e.target.closest(".slider-thumb");
-			t && (e.preventDefault(), this._isDragging = !0, this._dragThumb = t.getAttribute("data-thumb"), document.addEventListener("pointermove", this._pointerMoveListener), document.addEventListener("pointerup", this._pointerUpListener));
+			t && (e.preventDefault(), this._isDragging = !0, this._dragThumb = t.getAttribute("data-thumb"), document.addEventListener("pointermove", this._pointerMoveListener), document.addEventListener("pointerup", this._pointerUpListener), document.addEventListener("pointercancel", this._pointerUpListener));
 		}, this._pointerMoveListener = (e) => {
 			if (!this._isDragging) return;
 			e.preventDefault();
@@ -4467,7 +4467,7 @@ var ze = class extends e {
 				} }));
 			}
 		}, this._pointerUpListener = () => {
-			this._isDragging && (this._isDragging = !1, this._dragThumb = null, document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
+			this._isDragging && (this._isDragging = !1, this._dragThumb = null, document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), document.removeEventListener("pointercancel", this._pointerUpListener), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
 		}, this._thumbKeyListener = (e) => {
 			let t = e.currentTarget;
 			if (this.hasAttribute("disabled")) return;
@@ -4483,7 +4483,7 @@ var ze = class extends e {
 	}
 	_teardown() {
 		for (let e of this.querySelectorAll(".slider-thumb")) e.removeEventListener("pointerdown", this._pointerDownListener), e.removeEventListener("keydown", this._thumbKeyListener);
-		document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), this._isDragging = !1, this._dragThumb = null, this.querySelector(".slider-track")?.removeEventListener("click", this._trackClickListener);
+		document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), document.removeEventListener("pointercancel", this._pointerUpListener), this._isDragging = !1, this._dragThumb = null, this.querySelector(".slider-track")?.removeEventListener("click", this._trackClickListener);
 	}
 	disconnectedCallback() {
 		this._teardown();

package/package.json

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