@webority/ui-elements 0.13.0 → 0.13.1
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 +4 -1
- package/dist/ui-elements.js +23 -18
- package/package.json +1 -1
|
@@ -430,6 +430,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
430
430
|
role="slider"
|
|
431
431
|
class="slider-thumb"
|
|
432
432
|
data-thumb="start"
|
|
433
|
+
style="left: ${s}%;"
|
|
433
434
|
aria-label="Minimum"
|
|
434
435
|
aria-valuemin="${e}"
|
|
435
436
|
aria-valuemax="${t}"
|
|
@@ -442,6 +443,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
442
443
|
role="slider"
|
|
443
444
|
class="slider-thumb"
|
|
444
445
|
data-thumb="end"
|
|
446
|
+
style="left: ${c}%;"
|
|
445
447
|
aria-label="Maximum"
|
|
446
448
|
aria-valuemin="${e}"
|
|
447
449
|
aria-valuemax="${t}"
|
|
@@ -455,6 +457,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
455
457
|
role="slider"
|
|
456
458
|
class="slider-thumb"
|
|
457
459
|
data-thumb="single"
|
|
460
|
+
style="left: ${c}%;"
|
|
458
461
|
aria-valuemin="${e}"
|
|
459
462
|
aria-valuemax="${t}"
|
|
460
463
|
aria-valuenow="${this._value}"
|
|
@@ -465,7 +468,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
465
468
|
`}
|
|
466
469
|
${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>`:``}
|
|
467
470
|
</div>
|
|
468
|
-
`,this._rendered=!0,this._syncMirrors(),this._wire()}_formatValue(e){return`${e}${this.getAttribute(`unit`)||``}`}
|
|
471
|
+
`,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},Gu=e=>String(e??``).replace(/&/g,`&`).replace(/"/g,`"`).replace(/</g,`<`),Ku=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=`
|
|
469
472
|
<div class="search-select${t}">
|
|
470
473
|
<div class="input search-select-control search-select-multi"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
|
|
471
474
|
<input type="text" class="ms-input" data-input aria-label="${Ju(this._accessibleName())}" placeholder="${Ju(this.getAttribute(`placeholder`)||`Add…`)}" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``}/>
|
package/dist/ui-elements.js
CHANGED
|
@@ -4539,6 +4539,7 @@ var Ke = class extends e {
|
|
|
4539
4539
|
role="slider"
|
|
4540
4540
|
class="slider-thumb"
|
|
4541
4541
|
data-thumb="start"
|
|
4542
|
+
style="left: ${s}%;"
|
|
4542
4543
|
aria-label="Minimum"
|
|
4543
4544
|
aria-valuemin="${e}"
|
|
4544
4545
|
aria-valuemax="${t}"
|
|
@@ -4551,6 +4552,7 @@ var Ke = class extends e {
|
|
|
4551
4552
|
role="slider"
|
|
4552
4553
|
class="slider-thumb"
|
|
4553
4554
|
data-thumb="end"
|
|
4555
|
+
style="left: ${c}%;"
|
|
4554
4556
|
aria-label="Maximum"
|
|
4555
4557
|
aria-valuemin="${e}"
|
|
4556
4558
|
aria-valuemax="${t}"
|
|
@@ -4564,6 +4566,7 @@ var Ke = class extends e {
|
|
|
4564
4566
|
role="slider"
|
|
4565
4567
|
class="slider-thumb"
|
|
4566
4568
|
data-thumb="single"
|
|
4569
|
+
style="left: ${c}%;"
|
|
4567
4570
|
aria-valuemin="${e}"
|
|
4568
4571
|
aria-valuemax="${t}"
|
|
4569
4572
|
aria-valuenow="${this._value}"
|
|
@@ -4574,28 +4577,30 @@ var Ke = class extends e {
|
|
|
4574
4577
|
`}
|
|
4575
4578
|
${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>` : ""}
|
|
4576
4579
|
</div>
|
|
4577
|
-
`, this._rendered = !0, this._syncMirrors(), this._wire();
|
|
4580
|
+
`, this._rendered = !0, this._placeParts(), this._syncMirrors(), this._wire();
|
|
4578
4581
|
}
|
|
4579
4582
|
_formatValue(e) {
|
|
4580
4583
|
return `${e}${this.getAttribute("unit") || ""}`;
|
|
4581
4584
|
}
|
|
4585
|
+
_placeParts() {
|
|
4586
|
+
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");
|
|
4587
|
+
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)));
|
|
4588
|
+
let s = (e, t) => {
|
|
4589
|
+
e && (e.style.left = `${t * 100}%`, e.style.setProperty("--wui-t", String(t)));
|
|
4590
|
+
};
|
|
4591
|
+
r ? (s(this.querySelector("[data-thumb=\"start\"]"), i), s(this.querySelector("[data-thumb=\"end\"]"), a)) : s(this.querySelector(".slider-thumb"), a);
|
|
4592
|
+
}
|
|
4582
4593
|
_syncValue() {
|
|
4583
|
-
if (
|
|
4584
|
-
|
|
4585
|
-
|
|
4586
|
-
let
|
|
4587
|
-
|
|
4588
|
-
let i = this.querySelector("[data-thumb=\"start\"]"), a = this.querySelector("[data-thumb=\"end\"]");
|
|
4589
|
-
i && (i.style.left = `${e}%`, i.setAttribute("aria-valuenow", String(this._start)), i.setAttribute("aria-valuetext", this._formatValue(this._start))), a && (a.style.left = `${t}%`, a.setAttribute("aria-valuenow", String(this._end)), a.setAttribute("aria-valuetext", this._formatValue(this._end)));
|
|
4590
|
-
let o = this.querySelector(".slider-value");
|
|
4591
|
-
o && (o.textContent = `${this._formatValue(this._start)} – ${this._formatValue(this._end)}`);
|
|
4594
|
+
if (this._rendered) if (this._placeParts(), this._isRange()) {
|
|
4595
|
+
let e = this.querySelector("[data-thumb=\"start\"]"), t = this.querySelector("[data-thumb=\"end\"]");
|
|
4596
|
+
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)));
|
|
4597
|
+
let n = this.querySelector(".slider-value");
|
|
4598
|
+
n && (n.textContent = `${this._formatValue(this._start)} – ${this._formatValue(this._end)}`);
|
|
4592
4599
|
} else {
|
|
4593
|
-
let e =
|
|
4594
|
-
|
|
4595
|
-
let t = this.querySelector(".slider-
|
|
4596
|
-
t && (t.
|
|
4597
|
-
let i = this.querySelector(".slider-value");
|
|
4598
|
-
i && (i.textContent = this._formatValue(this._value));
|
|
4600
|
+
let e = this.querySelector(".slider-thumb");
|
|
4601
|
+
e && (e.setAttribute("aria-valuenow", String(this._value)), e.setAttribute("aria-valuetext", this._formatValue(this._value)));
|
|
4602
|
+
let t = this.querySelector(".slider-value");
|
|
4603
|
+
t && (t.textContent = this._formatValue(this._value));
|
|
4599
4604
|
}
|
|
4600
4605
|
}
|
|
4601
4606
|
_syncMirrors() {
|
|
@@ -4616,8 +4621,8 @@ var Ke = class extends e {
|
|
|
4616
4621
|
_valueAtPosition(e) {
|
|
4617
4622
|
let t = this.querySelector(".slider-track");
|
|
4618
4623
|
if (!t) return this._min();
|
|
4619
|
-
let n = t.getBoundingClientRect(), r = Math.max(0, Math.min(1, (e - n.left) /
|
|
4620
|
-
return this._snapToStep(
|
|
4624
|
+
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());
|
|
4625
|
+
return this._snapToStep(s);
|
|
4621
4626
|
}
|
|
4622
4627
|
_nearestThumb(e) {
|
|
4623
4628
|
return Math.abs(e - this._start) <= Math.abs(e - this._end) ? "start" : "end";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/ui-elements",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.1",
|
|
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",
|