@webority/ui-elements 0.17.4 → 0.18.1

package/dist/ui-elements.global.js

@@ -406,10 +406,9 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     `,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`)&&g(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},Ju=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),Yu=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):[],g(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`:``;g(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="${Zu(this._accessibleName())}" placeholder="${Zu(this.getAttribute(`placeholder`)||`Add…`)}" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``}/>
-          <div class="ms-chips" data-chips></div>
+          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input aria-label="${Zu(this._accessibleName())}" placeholder="${Zu(this.getAttribute(`placeholder`)||`Add…`)}" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``}/></div>
         </div>
-      </div>`,this._rendered=!0,g(this,this._values.join(`,`)),this._renderControl(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(e){if(!this._values.length){e.innerHTML=``;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${Xu(e)}</span><button type="button" class="chip-remove" data-remove="${Zu(e)}" aria-label="Remove ${Zu(e)}">${v(`x`)}</button></span>`).join(``)}}_wire(){this._teardown();let e=this.querySelector(`.search-select-control`),t=this.querySelector(`[data-input]`);if(!e||!t)return;let n=()=>this.hasAttribute(`disabled`),r=(this.getAttribute(`separators`)||`enter,comma`).split(`,`).map(e=>e.trim()),i=this.getAttribute(`max-tags`),a=this.hasAttribute(`allow-duplicates`),o=new Set(r.map(Re).filter(Boolean)),s=()=>{g(this,this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},c=e=>{let t=e.trim();if(!t||i&&this._values.length>=parseInt(i,10))return;let n=a?t:t.toLowerCase();(!this._values.some(e=>a?e===t:e.toLowerCase()===n)||a)&&(this._values.push(t),this._renderControl(),s())},l=e=>{this._values=this._values.filter(t=>t!==e),this._renderControl(),s()},u=e=>{if(e.key===`Enter`&&o.has(`Enter`)){e.preventDefault(),c(t.value),t.value=``;return}if(e.key===`,`&&o.has(`,`)){e.preventDefault(),c(t.value.replace(/,+$/,``)),t.value=``;return}if(e.key===` `&&o.has(` `)){let n=t.value.trim();n&&(e.preventDefault(),c(n),t.value=``);return}if(e.key===`Tab`&&o.has(`Tab`)){e.preventDefault(),c(t.value),t.value=``;return}e.key===`Backspace`&&!t.value&&this._values.length&&(e.preventDefault(),l(this._values[this._values.length-1])),e.key===`Escape`&&(t.value=``)},d=e=>{e.preventDefault();let n=e.clipboardData.getData(`text/plain`),a=[];for(let e of r){let t=ze(e)??e;if(Ve(n,[t])){a.push(...Be(n,[t]));break}}a.length||a.push(n.trim());for(let e of a)if(c(e),i&&this._values.length>=parseInt(i,10))break;t.value=``};this._onControlClick=e=>{if(n())return;let r=e.target.closest(`[data-remove]`);if(r){e.stopPropagation(),l(r.dataset.remove),t.focus();return}t.focus()},this._onInputKey=u,this._onInputPaste=d,e.addEventListener(`click`,this._onControlClick),t.addEventListener(`keydown`,this._onInputKey),t.addEventListener(`paste`,this._onInputPaste),this._onDocClick=e=>{this.contains(e.target)||t.blur()},document.addEventListener(`click`,this._onDocClick)}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null);let e=this.querySelector(`.search-select-control`),t=this.querySelector(`[data-input]`);e&&this._onControlClick&&e.removeEventListener(`click`,this._onControlClick),t&&this._onInputKey&&(t.removeEventListener(`keydown`,this._onInputKey),t.removeEventListener(`paste`,this._onInputPaste))}disconnectedCallback(){this._teardown()}},Xu=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),Zu=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),Qu=e=>String(e).padStart(2,`0`),$u=(e,t)=>`${Qu(e)}:${Qu(t)}`,ed=e=>{let t=/^(\d{2}):(\d{2})$/.exec(e||``);return t?{h:+t[1],m:+t[2]}:null},td=(e,t=`24`)=>{if(!e)return``;if(t===`24`)return $u(e.h,e.m);let n=e.h%12||12,r=e.h>=12?`PM`:`AM`;return`${n}:${Qu(e.m)} ${r}`},nd=class extends i{static formAssociated=!0;static get observedAttributes(){return[`value`,`min`,`max`,`step`,`format`,`placeholder`,`disabled`,`required`,`size`,`aria-label`,`aria-describedby`,`aria-invalid`]}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._value=``,this._focus=null,this._typeahead=``,this._typeaheadTimer=null}connectedCallback(){if(!this._rendered){this.render();return}this._bindGlobal?.()}attributeChangedCallback(e,t,n){if(e===`aria-invalid`){this._syncInvalid();return}this._rendered&&(e===`value`?(this._value=n||``,this._syncFormValue(),this._syncTrigger()):this.render())}_syncInvalid(){let e=this.querySelector(`.timepicker-trigger`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}formResetCallback(){this.value=this._defaultValue||``}get value(){return this._value}set value(e){this._value=e||``,g(this,this._value),this._syncTrigger()}render(){this._defaultValue===void 0&&(this._defaultValue=this.getAttribute(`value`)||``,this._value=this._defaultValue||this._value);let e=this.getAttribute(`placeholder`)||`Select time`,t=ed(this._value),n=this.getAttribute(`format`)||`24`,r=this.getAttribute(`size`),i=r===`sm`?` input-sm`:r===`lg`?` input-lg`:``,a=this.getAttribute(`aria-label`),o=this.getAttribute(`aria-describedby`);this.innerHTML=`
+      </div>`,this._rendered=!0,g(this,this._values.join(`,`)),this._renderControl(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(e){for(let t of e.querySelectorAll(`:scope > .chip`))t.remove();this._values.length&&e.querySelector(`[data-input]`).insertAdjacentHTML(`beforebegin`,this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${Xu(e)}</span><button type="button" class="chip-remove" data-remove="${Zu(e)}" aria-label="Remove ${Zu(e)}">${v(`x`)}</button></span>`).join(``))}}_wire(){this._teardown();let e=this.querySelector(`.search-select-control`),t=this.querySelector(`[data-input]`);if(!e||!t)return;let n=()=>this.hasAttribute(`disabled`),r=(this.getAttribute(`separators`)||`enter,comma`).split(`,`).map(e=>e.trim()),i=this.getAttribute(`max-tags`),a=this.hasAttribute(`allow-duplicates`),o=new Set(r.map(Re).filter(Boolean)),s=()=>{g(this,this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},c=e=>{let t=e.trim();if(!t||i&&this._values.length>=parseInt(i,10))return;let n=a?t:t.toLowerCase();(!this._values.some(e=>a?e===t:e.toLowerCase()===n)||a)&&(this._values.push(t),this._renderControl(),s())},l=e=>{this._values=this._values.filter(t=>t!==e),this._renderControl(),s()},u=e=>{if(e.key===`Enter`&&o.has(`Enter`)){e.preventDefault(),c(t.value),t.value=``;return}if(e.key===`,`&&o.has(`,`)){e.preventDefault(),c(t.value.replace(/,+$/,``)),t.value=``;return}if(e.key===` `&&o.has(` `)){let n=t.value.trim();n&&(e.preventDefault(),c(n),t.value=``);return}if(e.key===`Tab`&&o.has(`Tab`)){e.preventDefault(),c(t.value),t.value=``;return}e.key===`Backspace`&&!t.value&&this._values.length&&(e.preventDefault(),l(this._values[this._values.length-1])),e.key===`Escape`&&(t.value=``)},d=e=>{e.preventDefault();let n=e.clipboardData.getData(`text/plain`),a=[];for(let e of r){let t=ze(e)??e;if(Ve(n,[t])){a.push(...Be(n,[t]));break}}a.length||a.push(n.trim());for(let e of a)if(c(e),i&&this._values.length>=parseInt(i,10))break;t.value=``};this._onControlClick=e=>{if(n())return;let r=e.target.closest(`[data-remove]`);if(r){e.stopPropagation(),l(r.dataset.remove),t.focus();return}t.focus()},this._onInputKey=u,this._onInputPaste=d,e.addEventListener(`click`,this._onControlClick),t.addEventListener(`keydown`,this._onInputKey),t.addEventListener(`paste`,this._onInputPaste),this._onDocClick=e=>{this.contains(e.target)||t.blur()},document.addEventListener(`click`,this._onDocClick)}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null);let e=this.querySelector(`.search-select-control`),t=this.querySelector(`[data-input]`);e&&this._onControlClick&&e.removeEventListener(`click`,this._onControlClick),t&&this._onInputKey&&(t.removeEventListener(`keydown`,this._onInputKey),t.removeEventListener(`paste`,this._onInputPaste))}disconnectedCallback(){this._teardown()}},Xu=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),Zu=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),Qu=e=>String(e).padStart(2,`0`),$u=(e,t)=>`${Qu(e)}:${Qu(t)}`,ed=e=>{let t=/^(\d{2}):(\d{2})$/.exec(e||``);return t?{h:+t[1],m:+t[2]}:null},td=(e,t=`24`)=>{if(!e)return``;if(t===`24`)return $u(e.h,e.m);let n=e.h%12||12,r=e.h>=12?`PM`:`AM`;return`${n}:${Qu(e.m)} ${r}`},nd=class extends i{static formAssociated=!0;static get observedAttributes(){return[`value`,`min`,`max`,`step`,`format`,`placeholder`,`disabled`,`required`,`size`,`aria-label`,`aria-describedby`,`aria-invalid`]}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._value=``,this._focus=null,this._typeahead=``,this._typeaheadTimer=null}connectedCallback(){if(!this._rendered){this.render();return}this._bindGlobal?.()}attributeChangedCallback(e,t,n){if(e===`aria-invalid`){this._syncInvalid();return}this._rendered&&(e===`value`?(this._value=n||``,this._syncFormValue(),this._syncTrigger()):this.render())}_syncInvalid(){let e=this.querySelector(`.timepicker-trigger`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}formResetCallback(){this.value=this._defaultValue||``}get value(){return this._value}set value(e){this._value=e||``,g(this,this._value),this._syncTrigger()}render(){this._defaultValue===void 0&&(this._defaultValue=this.getAttribute(`value`)||``,this._value=this._defaultValue||this._value);let e=this.getAttribute(`placeholder`)||`Select time`,t=ed(this._value),n=this.getAttribute(`format`)||`24`,r=this.getAttribute(`size`),i=r===`sm`?` input-sm`:r===`lg`?` input-lg`:``,a=this.getAttribute(`aria-label`),o=this.getAttribute(`aria-describedby`);this.innerHTML=`
       <div class="timepicker">
         <button type="button" class="input timepicker-trigger${i}${t?` has-value`:``}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` disabled`:``}${a?` aria-label="${b(a)}"`:``}${o?` aria-describedby="${b(o)}"`:``}>
           <span data-trigger-label class="${t?``:`timepicker-placeholder`}">${t?td(t,n):b(e)}</span>

package/dist/ui-elements.js

@@ -4749,19 +4749,15 @@ var Xe = class extends e {
 		f(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="${X(this._accessibleName())}" placeholder="${X(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
-          <div class="ms-chips" data-chips></div>
+          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input aria-label="${X(this._accessibleName())}" placeholder="${X(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/></div>
         </div>
       </div>`, this._rendered = !0, f(this, this._values.join(",")), this._renderControl(), this._wire();
 	}
 	_renderControl() {
 		let e = this.querySelector("[data-chips]");
 		if (e) {
-			if (!this._values.length) {
-				e.innerHTML = "";
-				return;
-			}
-			e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${et(e)}</span><button type="button" class="chip-remove" data-remove="${X(e)}" aria-label="Remove ${X(e)}">${m("x")}</button></span>`).join("");
+			for (let t of e.querySelectorAll(":scope > .chip")) t.remove();
+			this._values.length && e.querySelector("[data-input]").insertAdjacentHTML("beforebegin", this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${et(e)}</span><button type="button" class="chip-remove" data-remove="${X(e)}" aria-label="Remove ${X(e)}">${m("x")}</button></span>`).join(""));
 		}
 	}
 	_wire() {

package/package.json

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