@popovandrii/ui-elements 0.0.25 → 0.0.27

package/README.md

@@ -13,7 +13,7 @@ Connection with `standard styles` from the package by element name.
 new SpinBox(); 
 new Switch();
 new Select();
-new ButtonGroup();
+new ButtonGroup({}, true); // debug mode
 ```
 Connection with `custom styles` from a package by element name.
 ```js
@@ -171,26 +171,6 @@ select?.addEventListener('ui-select-change', (e) => {
 <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/select-UI.png" alt="Switch Preview" width="700">
 </p>
 
-#### Button-Group UI
-```html
-  <div class="UIbg warning sm vertical border" role="group" aria-label="">
-    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck21">
-    <label class="UIbg-btn" for="btncheck21">radio 1</label>
-
-    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck22" disabled>
-    <label class="UIbg-btn" for="btncheck22">radio 2</label>
-
-    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck23">
-    <label class="UIbg-btn" for="btncheck23">radio 3</label>
-
-    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck24">
-    <label class="UIbg-btn" for="btncheck24">radio 4</label>
-  </div>
-```
-<p align="center">
-<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/button-group-UI.png" alt="Button-Group Preview" width="700">
-</p>
-
 # Information for Developers
 ```sh
 git clone git@gitlab.com:AndreyPopov/ui-elements.git && cd ui-elements

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var B=Object.defineProperty;var q=f=>{throw TypeError(f)};var F=(f,t,e)=>t in f?B(f,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):f[t]=e;var b=(f,t,e)=>F(f,typeof t!="symbol"?t+"":t,e),K=(f,t,e)=>t.has(f)||q("Cannot "+e);var k=(f,t,e)=>t.has(f)?q("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(f):t.set(f,e);var x=(f,t,e)=>(K(f,t,"access private method"),e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class P{constructor(t={},e=!1){b(this,"selectors");b(this,"spinBoxes");b(this,"abortController",new AbortController);b(this,"dbug");b(this,"state",(t,e,s,a=0,c=0)=>{t==a||t<a?(e.classList.add(this.selectors.disabledBtn),e.disabled=!0):(e.classList.remove(this.selectors.disabledBtn),e.disabled=!1),c!==0&&(t==c||t>c?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))});b(this,"getValidDataNumber",(t,e)=>{const s=t.getAttribute(`data-${e}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)});this.dbug=e;const s={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...s,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}event(){var e;this.abortController=new AbortController;const t=this.abortController.signal;(e=this.spinBoxes)==null||e.forEach(s=>{let a;const c=s.querySelectorAll(`.${this.selectors.btn}`),o=c[0],i=c[1],r=s.querySelector(`.${this.selectors.input}`),n=this.getValidDataNumber(s,"step"),h=this.getValidDataNumber(s,"min"),l=this.getValidDataNumber(s,"max"),m=u=>{s.setAttribute("aria-valuenow",String(u)),s.setAttribute("aria-valuetext",`${u} items`)};Number(r.value)<=h&&(r.value=h.toFixed(n)),l!==0?(Number(r.value)>=l&&(r.value=l.toFixed(n)),l&&s.setAttribute("aria-valuemax",l.toFixed(n))):r.value=Number(r.value).toFixed(n),h&&s.setAttribute("aria-valuemin",h.toFixed(n)),this.state(Number(r.value),o,i,h,l),m(r.value);let v=null;const A=(u=1)=>{r.value=String(Math.abs(Number(r.value)));let d=parseFloat(r.value)||0;return d=d+1*u/Math.pow(10,n),d>l&&l!==0&&(d=l),r.value=d.toFixed(n),this.state(Number(r.value),o,i,h,l),m(r.value),r.value},y=(u=1)=>{r.value=String(Math.abs(Number(r.value)));let d=parseFloat(r.value)||0;return d=d-1*u/Math.pow(10,n),d<h&&(d=h),r.value=d.toFixed(n),this.state(Number(r.value),o,i,h,l),m(r.value),r.value},g=(u,d=150)=>{v===null&&(v=window.setInterval(u,d))},E=()=>{v!==null&&(clearInterval(v),v=null)};i.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;g(()=>A(d))},{signal:t}),i.addEventListener("touchstart",()=>g(A),{signal:t}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{i.addEventListener(u,E,{signal:t})}),i.addEventListener("click",u=>{const d=u.shiftKey?3:1;v===null&&(a=A(d),this.costomEvent(i,a))},{signal:t}),o.addEventListener("click",u=>{const d=u.shiftKey?3:1;v===null&&(a=y(d),this.costomEvent(o,a))},{signal:t}),o.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;g(()=>y(d),100)},{signal:t}),o.addEventListener("touchstart",()=>g(y,100),{signal:t}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{o.addEventListener(u,E,{signal:t})}),r.addEventListener("keydown",u=>{const d=u.key,S=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?A(S):y(S);return}const $=d===","?".":d,L=/^[0-9]$/.test($),I=$===".",N=r.value.includes(".");(n===0&&!L||n>0&&!(L||I)||I&&N)&&u.preventDefault()},{signal:t}),r.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(r,r.value)},{signal:t}),r.addEventListener("change",()=>{Number(r.value)<h&&(r.value=h.toFixed(n)),Number(r.value)>l&&l!==0?r.value=l.toFixed(n):r.value=Number(r.value).toFixed(n),this.state(Number(r.value),o,i,h,l),this.costomEvent(r,r.value)},{signal:t})})}costomEvent(t,e){this.dbug&&console.log(`CostomEvent: { detail: ${e}, bubbles: true }`),t.dispatchEvent(new CustomEvent("ui-spinbox-change",{detail:{val:e},bubbles:!0}))}}class V{constructor(t={},e=!1){b(this,"selectors");b(this,"main",null);b(this,"abortController",new AbortController);b(this,"dbug");this.dbug=e;const s={main:"UIsw",label:"UIsw-label"};this.selectors={...s,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){var e;this.abortController=new AbortController;const t=this.abortController.signal;(e=this.main)==null||e.forEach(s=>{const a=s.querySelector(`.${this.selectors.label}`),c=s.querySelector("input");a&&a.id&&s.setAttribute("aria-labelledby",a.id),c&&(c.checked?s.setAttribute("aria-checked","true"):s.setAttribute("aria-checked","false"),s.addEventListener("click",()=>{c.checked=!c.checked;const o=s.querySelector("input");this.costomEvent(s,String(o==null?void 0:o.checked)),s.setAttribute("aria-checked",String(c.checked))},{signal:t}),s.addEventListener("keydown",o=>{o.key==="ArrowRight"?(c.checked=!0,s.setAttribute("aria-checked",String(c.checked)),o.preventDefault(),this.costomEvent(s,String(!0))):o.key==="ArrowLeft"&&(c.checked=!1,s.setAttribute("aria-checked",String(c.checked)),o.preventDefault(),this.costomEvent(s,String(!1)))},{signal:t}))})}costomEvent(t,e){this.dbug&&console.log(`CostomEvent: { detail: ${e}, bubbles: true }`),t.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:e},bubbles:!0}))}}class w{constructor(t={},e=!1){b(this,"selectors");b(this,"main",null);b(this,"itemArrowInitialized",new WeakSet);b(this,"abortController",new AbortController);b(this,"dbug");this.dbug=e;const s={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...s,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(t,e){return Array.from(t).filter(s=>!e.some(a=>typeof a=="string"?s.classList.contains(a)||s.id===a:s===a))}filterSearch(t,e){const s=e.trim().toLowerCase();return t.filter(a=>{var i,r;const c=((i=a.dataset.value)==null?void 0:i.toLowerCase())||"",o=((r=a.textContent)==null?void 0:r.toLowerCase())||"";return c.includes(s)||o.includes(s)})}destroy(){w.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var e;this.abortController=new AbortController;const t=this.abortController.signal;(e=this.main)==null||e.forEach(s=>{const a=s.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!a)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(v){return console.warn("Not found:",v.message)}const c=s.querySelector(`.${this.selectors.selected}`),o=s.querySelector(`.${this.selectors.arrow}`),i=s.querySelector(`.${this.selectors.optionsList}`),r=s.querySelector(`.${this.selectors.search} input`);o&&o.addEventListener("click",()=>{this.toggle(s,i)},{signal:t}),c.addEventListener("click",()=>{this.toggle(s,i)},{signal:t}),s.addEventListener("click",()=>{this.itemsPosition(i)},{signal:t});const n=i.querySelectorAll(`.${this.selectors.items} ul li`),h=this.filterExcluded(n,this.selectors.excludedItems),l=s.querySelector("[aria-selected='true']");l&&this.defaultSelect(s,l,c,a);var m=[];r&&r.addEventListener("input",v=>{const y=v.target.value.trim();c&&(m=this.filterSearch(h,y),y?(n.forEach(g=>g.remove()),m.forEach(g=>{var E;(E=i.querySelector(`.${this.selectors.optionsList} ul`))==null||E.appendChild(g)})):n.forEach(g=>{var E;(E=i.querySelector(`.${this.selectors.optionsList} ul`))==null||E.appendChild(g)}),this.itemArrow(s,i,c,a,t))},{signal:t}),this.itemArrow(s,i,c,a,t),this.items(s,i,h,c,a,t)},{signal:t})}itemArrow(t,e,s,a,c){if(this.itemArrowInitialized.has(t))return;this.itemArrowInitialized.add(t);let o=-1;const i=s.textContent?s.textContent:"",r=t.querySelector(`.${this.selectors.search} input`);t.addEventListener("keydown",n=>{r&&r.focus();const h=Array.from(e.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(h,this.selectors.excludedItems),m=l.length;if(m!==0)if(n.key==="ArrowDown"){n.preventDefault(),t.getAttribute("aria-expanded")==="false"&&this.toggle(t,e),o=(o+1)%m,s.textContent=l[o].textContent,l.forEach(A=>A.removeAttribute("aria-selected")),l[o].setAttribute("aria-selected","true");const v=l[o].id||`${this.selectors.idPrefix}${o}`;t.setAttribute("aria-activedescendant",v),l[o].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),o=(o-1+m)%m,s.textContent=l[o].textContent,l.forEach(A=>A.removeAttribute("aria-selected")),l[o].setAttribute("aria-selected","true");const v=l[o].id||`${this.selectors.idPrefix}${o}`;t.setAttribute("aria-activedescendant",v),l[o].scrollIntoView({block:"nearest"})}else if(n.key==="Enter")if(n.preventDefault(),o>=0){s.textContent=l[o].textContent,l.forEach(A=>A.removeAttribute("aria-selected")),l[o].setAttribute("aria-selected","true");const v=l[o].id||`${this.selectors.idPrefix}${o}`;t.setAttribute("aria-activedescendant",v),a.value=String(l[o].dataset.value),this.costomEvent(t,a.value),this.close(t,e)}else this.toggle(t,e);else n.key==="Escape"&&(t.getAttribute("aria-activedescendant")||(s.textContent=i),this.close(t,e))},{signal:c})}itemsPosition(t){const e=t.querySelector('[aria-selected="true"]');e&&e.scrollIntoView({block:"nearest"})}items(t,e,s,a,c,o){s.forEach((i,r)=>{i.addEventListener("click",()=>{const n=s[r];if(n){a.textContent=n.textContent,s.forEach(l=>l.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const h=n.id||`${this.selectors.idPrefix}${r}`;t.setAttribute("aria-expanded","false"),t.setAttribute("aria-activedescendant",h),c.value=String(s[r].dataset.value),this.costomEvent(t,c.value),this.close(t,e)}},{signal:o})})}defaultSelect(t,e,s,a){e&&(a.setAttribute("value",e.dataset.value??""),s.textContent=e.textContent??"",t.setAttribute("aria-activedescendant",e.id||""))}costomEvent(t,e){this.dbug&&console.log(`CostomEvent: { detail: ${e}, bubbles: true }`),t.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:e},bubbles:!0}))}toggle(t,e){w.closeAll(this.selectors),e.hidden?(e.hidden=!1,t.setAttribute("aria-expanded","true")):this.close(t,e)}close(t,e){e.hidden=!0,t.setAttribute("aria-expanded","false")}static closeAll(t){document.querySelectorAll(`.${t.main}`).forEach(e=>{const s=e.querySelector(`.${t.optionsList}`);s.hidden=!0,e.setAttribute("aria-expanded","false")})}initGlobalListener(t){document.addEventListener("click",e=>{const s=e.target;[...document.querySelectorAll(`.${t.main}`)].some(c=>c.contains(s))||w.closeAll(t)},{signal:this.abortController.signal})}}var C,D;class M{constructor(t={},e=!1){k(this,C);b(this,"selectors");b(this,"main",null);b(this,"abortController",new AbortController);b(this,"dbug");this.dbug=e;const s={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...s,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),x(this,C,D).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.main=null}costomEvent(t){const e={detail:{id:t.id,value:t.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",e),t.dispatchEvent(new CustomEvent("ui-button-group-change",e))}}C=new WeakSet,D=function(){var e;this.abortController=new AbortController;const t=this.abortController.signal;(e=this.main)==null||e.forEach(s=>{const a=s.querySelectorAll(`.${this.selectors.btn}`);a.forEach(i=>{i.addEventListener("click",()=>{a.forEach(r=>{r.setAttribute("aria-checked","false"),r.setAttribute("tabindex","-1")}),i.setAttribute("aria-checked","true"),i.setAttribute("tabindex","0"),i.focus()},{signal:t}),i.addEventListener("keydown",r=>{let n=Array.from(a).indexOf(i);if(r.key==="ArrowRight"&&n++,r.key==="ArrowLeft"&&n--,n<0&&(n=a.length-1),n>=a.length&&(n=0),r.key==="Enter"){const l=c[n];l&&!l.disabled&&(c.forEach(m=>{m.checked=!1,m.removeAttribute("checked")}),l.checked=!0,l.setAttribute("checked",""),this.costomEvent(l)),r.preventDefault();return}const h=a[n];h&&(a.forEach(l=>l.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:t})});const c=s.querySelectorAll(`.${this.selectors.input}`);c.forEach((i,r)=>{this.dbug&&(i.id||console.error(`Input #${r} in group has no ID!`),(!i.value||i.value==="on")&&console.warn(`Input #${i.id} does not have a value specified (currently "${i.value}")`));const n=a[r];n&&(i.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(i.checked)),n.setAttribute("tabindex",i.checked?"0":"-1"),i.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),i.addEventListener("click",()=>{c.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),c[r].checked=!0,c[r].setAttribute("checked",""),this.costomEvent(i)},{signal:t}))});const o=Array.from(c).find(i=>i.checked&&!i.disabled)||Array.from(c).find(i=>!i.disabled);if(o){const i=s.querySelector(`label[for="${o.id}"]`);i&&i.setAttribute("tabindex","0")}})};var p,U;class T{constructor(t={},e=!1){k(this,p);b(this,"selectors");b(this,"buttons",null);b(this,"abortController",new AbortController);b(this,"dbug");this.dbug=e;const s={main:"UIb"};this.selectors={...s,...t},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),x(this,p,U).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}costomEvent(t,e){if(!e||e==="undefined"||e.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${e}, bubbles: true }`),t.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:e},bubbles:!0}))}}p=new WeakSet,U=function(){var e;this.abortController=new AbortController;const t=this.abortController.signal;(e=this.buttons)==null||e.forEach(s=>{s.addEventListener("click",()=>{this.costomEvent(s,String(s.dataset.value))},{signal:t})})};exports.Button=T;exports.ButtonGroup=M;exports.Select=w;exports.SpinBox=P;exports.Switch=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class x{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,r,i=0,s=0)=>{e==i||e<i?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),s!==0&&(e==s||e>s?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let r;const i=t.querySelectorAll(`.${this.selectors.btn}`),s=t.querySelector(`.${this.selectors.input}`);this.dbug&&(i||console.log(`Buttons (${this.selectors.btn}) not found in container`),s||console.log(`Input (${this.selectors.input}) not found in container`));const o=i[0],l=i[1],a=this.getValidDataNumber(t,"step"),n=this.getValidDataNumber(t,"min"),h=this.getValidDataNumber(t,"max"),c=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=n&&(s.value=n.toFixed(a)),h!==0?(Number(s.value)>=h&&(s.value=h.toFixed(a)),h&&t.setAttribute("aria-valuemax",h.toFixed(a))):s.value=Number(s.value).toFixed(a),n&&t.setAttribute("aria-valuemin",n.toFixed(a)),this.state(Number(s.value),o,l,n,h),c(s.value);let b=null;const v=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d+1*u/Math.pow(10,a),d>h&&h!==0&&(d=h),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},f=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d-1*u/Math.pow(10,a),d<n&&(d=n),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},m=(u,d=150)=>{b===null&&(b=window.setInterval(u,d))},E=()=>{b!==null&&(clearInterval(b),b=null)};l.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>v(d))},{signal:e}),l.addEventListener("touchstart",()=>m(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{l.addEventListener(u,E,{signal:e})}),l.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=v(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=f(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>f(d),100)},{signal:e}),o.addEventListener("touchstart",()=>m(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{o.addEventListener(u,E,{signal:e})}),s.addEventListener("keydown",u=>{const d=u.key,y=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?v(y):f(y);return}const p=d===","?".":d,w=/^[0-9]$/.test(p),C=p===".",k=s.value.includes(".");(a===0&&!w||a>0&&!(w||C)||C&&k)&&u.preventDefault()},{signal:e}),s.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(s,s.value)},{signal:e}),s.addEventListener("change",()=>{Number(s.value)<n&&(s.value=n.toFixed(a)),Number(s.value)>h&&h!==0?s.value=h.toFixed(a):s.value=Number(s.value).toFixed(a),this.state(Number(s.value),o,l,n,h),this.costomEvent(s,s.value)},{signal:e})})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",r.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",r))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.label}`),i=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),i&&(i.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{i.checked=!i.checked;const s=t.querySelector("input");this.costomEvent(t,String(s?.checked)),t.setAttribute("aria-checked",String(i.checked))},{signal:e}),t.addEventListener("keydown",s=>{s.key==="ArrowRight"?(i.checked=!0,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!0))):s.key==="ArrowLeft"&&(i.checked=!1,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!1)))},{signal:e}))})}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:t},bubbles:!0}))}}class A{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(r=>!t.some(i=>typeof i=="string"?r.classList.contains(i)||r.id===i:r===i))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(i=>{const s=i.dataset.value?.toLowerCase()||"",o=i.textContent?.toLowerCase()||"";return s.includes(r)||o.includes(r)})}destroy(){A.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!r)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const i=t.querySelector(`.${this.selectors.selected}`),s=t.querySelector(`.${this.selectors.arrow}`),o=t.querySelector(`.${this.selectors.optionsList}`),l=t.querySelector(`.${this.selectors.search} input`);s&&s.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),i.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const a=o.querySelectorAll(`.${this.selectors.items} ul li`),n=this.filterExcluded(a,this.selectors.excludedItems),h=t.querySelector("[aria-selected='true']");h&&this.defaultSelect(t,h,i,r);var c=[];l&&l.addEventListener("input",b=>{const f=b.target.value.trim();i&&(c=this.filterSearch(n,f),f?(a.forEach(m=>m.remove()),c.forEach(m=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)})):a.forEach(m=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)}),this.itemArrow(t,o,i,r,e))},{signal:e}),this.itemArrow(t,o,i,r,e),this.items(t,o,n,i,r,e)},{signal:e})}itemArrow(e,t,r,i,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let o=-1;const l=r.textContent?r.textContent:"",a=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",n=>{a&&a.focus();const h=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),b=c.length;if(b!==0)if(n.key==="ArrowDown"){n.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),o=(o+1)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),o=(o-1+b)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="Enter")if(n.preventDefault(),o>=0){r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),i.value=String(c[o].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}else this.toggle(e,t);else n.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=l),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,i,s,o){r.forEach((l,a)=>{l.addEventListener("click",()=>{const n=r[a];if(n){i.textContent=n.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const h=n.id||`${this.selectors.idPrefix}${a}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),s.value=String(r[a].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:o})})}defaultSelect(e,t,r,i){t&&(i.setAttribute("value",t.dataset.value??""),r.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){A.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const r=t.querySelector(`.${e.optionsList}`);r.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const r=t.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(r))||A.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!0){this.dbug=t;const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.costomEvent(r);const i=t.querySelectorAll(`.${this.selectors.btn}`);i.forEach(l=>{l.addEventListener("click",()=>{i.forEach(a=>{a.setAttribute("aria-checked","false"),a.setAttribute("tabindex","-1")}),l.setAttribute("aria-checked","true"),l.setAttribute("tabindex","0"),l.focus()},{signal:e}),l.addEventListener("keydown",a=>{let n=Array.from(i).indexOf(l);if(a.key==="ArrowRight"&&n++,a.key==="ArrowLeft"&&n--,n<0&&(n=i.length-1),n>=i.length&&(n=0),a.key==="Enter"){const c=s[n];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),a.preventDefault();return}const h=i[n];h&&(i.forEach(c=>c.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:e})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((l,a)=>{this.dbug&&(l.id||console.error(`Input #${a} in group has no ID!`),(!l.value||l.value==="on")&&console.warn(`Input #${l.id} does not have a value specified (currently "${l.value}")`));const n=i[a];n&&(l.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(l.checked)),n.setAttribute("tabindex",l.checked?"0":"-1"),l.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),l.addEventListener("click",()=>{s.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),s[a].checked=!0,s[a].setAttribute("checked",""),this.costomEvent(l)},{signal:e}))});const o=Array.from(s).find(l=>l.checked&&!l.disabled)||Array.from(s).find(l=>!l.disabled);if(o){const l=t.querySelector(`label[for="${o.id}"]`);l&&l.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t.detail),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class I{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}exports.Button=I;exports.ButtonGroup=$;exports.Select=A;exports.SpinBox=x;exports.Switch=S;

package/dist/index.es.js

@@ -1,110 +1,103 @@
-var B = Object.defineProperty;
-var q = (f) => {
-  throw TypeError(f);
-};
-var F = (f, t, e) => t in f ? B(f, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : f[t] = e;
-var b = (f, t, e) => F(f, typeof t != "symbol" ? t + "" : t, e), K = (f, t, e) => t.has(f) || q("Cannot " + e);
-var k = (f, t, e) => t.has(f) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(f) : t.set(f, e);
-var x = (f, t, e) => (K(f, t, "access private method"), e);
-class _ {
-  constructor(t = {}, e = !1) {
-    b(this, "selectors");
-    b(this, "spinBoxes");
-    b(this, "abortController", new AbortController());
-    b(this, "dbug");
-    b(this, "state", (t, e, s, a = 0, c = 0) => {
-      t == a || t < a ? (e.classList.add(this.selectors.disabledBtn), e.disabled = !0) : (e.classList.remove(this.selectors.disabledBtn), e.disabled = !1), c !== 0 && (t == c || t > c ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1));
-    });
-    b(this, "getValidDataNumber", (t, e) => {
-      const s = t.getAttribute(`data-${e}`);
-      return s === null || s.trim() === "" || isNaN(Number(s)) ? 0 : Number(s);
-    });
-    this.dbug = e;
-    const s = {
+class S {
+  selectors;
+  spinBoxes;
+  abortController = new AbortController();
+  dbug;
+  constructor(e = {}, t = !1) {
+    this.dbug = t;
+    const r = {
       main: "UIsp",
       btn: "UIsp__btn",
       input: "UIsp__input",
       disabledBtn: "disabled"
     };
-    this.selectors = { ...s, ...t }, this.spinBoxes = document.querySelectorAll(
+    this.selectors = { ...r, ...e }, this.spinBoxes = document.querySelectorAll(
       `.${this.selectors.main}`
     ), this.event();
   }
+  state = (e, t, r, i = 0, s = 0) => {
+    e == i || e < i ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), s !== 0 && (e == s || e > s ? (r.classList.add(this.selectors.disabledBtn), r.disabled = !0) : (r.classList.remove(this.selectors.disabledBtn), r.disabled = !1));
+  };
   destroy() {
     this.abortController && this.abortController.abort(), this.spinBoxes = null;
   }
+  getValidDataNumber = (e, t) => {
+    const r = e.getAttribute(`data-${t}`);
+    return r === null || r.trim() === "" || isNaN(Number(r)) ? 0 : Number(r);
+  };
   event() {
-    var e;
     this.abortController = new AbortController();
-    const t = this.abortController.signal;
-    (e = this.spinBoxes) == null || e.forEach((s) => {
-      let a;
-      const c = s.querySelectorAll(
+    const e = this.abortController.signal;
+    this.spinBoxes?.forEach((t) => {
+      let r;
+      const i = t.querySelectorAll(
         `.${this.selectors.btn}`
-      ), o = c[0], i = c[1], r = s.querySelector(
+      ), s = t.querySelector(
         `.${this.selectors.input}`
-      ), n = this.getValidDataNumber(s, "step"), h = this.getValidDataNumber(s, "min"), l = this.getValidDataNumber(s, "max"), m = (u) => {
-        s.setAttribute("aria-valuenow", String(u)), s.setAttribute("aria-valuetext", `${u} items`);
+      );
+      this.dbug && (i || console.log(`Buttons (${this.selectors.btn}) not found in container`), s || console.log(`Input (${this.selectors.input}) not found in container`));
+      const o = i[0], l = i[1], a = this.getValidDataNumber(t, "step"), n = this.getValidDataNumber(t, "min"), h = this.getValidDataNumber(t, "max"), c = (u) => {
+        t.setAttribute("aria-valuenow", String(u)), t.setAttribute("aria-valuetext", `${u} items`);
       };
-      Number(r.value) <= h && (r.value = h.toFixed(n)), l !== 0 ? (Number(r.value) >= l && (r.value = l.toFixed(n)), l && s.setAttribute("aria-valuemax", l.toFixed(n))) : r.value = Number(r.value).toFixed(n), h && s.setAttribute("aria-valuemin", h.toFixed(n)), this.state(Number(r.value), o, i, h, l), m(r.value);
-      let v = null;
-      const A = (u = 1) => {
-        r.value = String(Math.abs(Number(r.value)));
-        let d = parseFloat(r.value) || 0;
-        return d = d + 1 * u / Math.pow(10, n), d > l && l !== 0 && (d = l), r.value = d.toFixed(n), this.state(Number(r.value), o, i, h, l), m(r.value), r.value;
-      }, y = (u = 1) => {
-        r.value = String(Math.abs(Number(r.value)));
-        let d = parseFloat(r.value) || 0;
-        return d = d - 1 * u / Math.pow(10, n), d < h && (d = h), r.value = d.toFixed(n), this.state(Number(r.value), o, i, h, l), m(r.value), r.value;
-      }, E = (u, d = 150) => {
-        v === null && (v = window.setInterval(u, d));
-      }, g = () => {
-        v !== null && (clearInterval(v), v = null);
+      Number(s.value) <= n && (s.value = n.toFixed(a)), h !== 0 ? (Number(s.value) >= h && (s.value = h.toFixed(a)), h && t.setAttribute("aria-valuemax", h.toFixed(a))) : s.value = Number(s.value).toFixed(a), n && t.setAttribute("aria-valuemin", n.toFixed(a)), this.state(Number(s.value), o, l, n, h), c(s.value);
+      let b = null;
+      const v = (u = 1) => {
+        s.value = String(Math.abs(Number(s.value)));
+        let d = parseFloat(s.value) || 0;
+        return d = d + 1 * u / Math.pow(10, a), d > h && h !== 0 && (d = h), s.value = d.toFixed(a), this.state(Number(s.value), o, l, n, h), c(s.value), s.value;
+      }, f = (u = 1) => {
+        s.value = String(Math.abs(Number(s.value)));
+        let d = parseFloat(s.value) || 0;
+        return d = d - 1 * u / Math.pow(10, a), d < n && (d = n), s.value = d.toFixed(a), this.state(Number(s.value), o, l, n, h), c(s.value), s.value;
+      }, m = (u, d = 150) => {
+        b === null && (b = window.setInterval(u, d));
+      }, E = () => {
+        b !== null && (clearInterval(b), b = null);
       };
-      i.addEventListener(
+      l.addEventListener(
         "mousedown",
         (u) => {
           const d = u.shiftKey ? 3 : 1;
-          E(() => A(d));
+          m(() => v(d));
         },
-        { signal: t }
-      ), i.addEventListener("touchstart", () => E(A), {
-        signal: t
+        { signal: e }
+      ), l.addEventListener("touchstart", () => m(v), {
+        signal: e
       }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
         (u) => {
-          i.addEventListener(u, g, { signal: t });
+          l.addEventListener(u, E, { signal: e });
         }
-      ), i.addEventListener(
+      ), l.addEventListener(
         "click",
         (u) => {
           const d = u.shiftKey ? 3 : 1;
-          v === null && (a = A(d), this.costomEvent(i, a));
+          b === null && (r = v(d), this.costomEvent(s, r));
         },
-        { signal: t }
+        { signal: e }
       ), o.addEventListener(
         "click",
         (u) => {
           const d = u.shiftKey ? 3 : 1;
-          v === null && (a = y(d), this.costomEvent(o, a));
+          b === null && (r = f(d), this.costomEvent(s, r));
         },
-        { signal: t }
+        { signal: e }
       ), o.addEventListener(
         "mousedown",
         (u) => {
           const d = u.shiftKey ? 3 : 1;
-          E(() => y(d), 100);
+          m(() => f(d), 100);
         },
-        { signal: t }
-      ), o.addEventListener("touchstart", () => E(y, 100), {
-        signal: t
+        { signal: e }
+      ), o.addEventListener("touchstart", () => m(f, 100), {
+        signal: e
       }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
         (u) => {
-          o.addEventListener(u, g, { signal: t });
+          o.addEventListener(u, E, { signal: e });
         }
-      ), r.addEventListener(
+      ), s.addEventListener(
         "keydown",
         (u) => {
-          const d = u.key, S = u.shiftKey ? 5 : 1;
+          const d = u.key, y = u.shiftKey ? 5 : 1;
           if ([
             "Backspace",
             "Delete",
@@ -121,49 +114,48 @@ class _ {
             return;
           }
           if (d === "ArrowUp" || d === "ArrowDown") {
-            u.preventDefault(), d === "ArrowUp" ? A(S) : y(S);
+            u.preventDefault(), d === "ArrowUp" ? v(y) : f(y);
             return;
           }
-          const $ = d === "," ? "." : d, L = /^[0-9]$/.test($), I = $ === ".", N = r.value.includes(".");
-          (n === 0 && !L || n > 0 && !(L || I) || I && N) && u.preventDefault();
+          const w = d === "," ? "." : d, p = /^[0-9]$/.test(w), C = w === ".", k = s.value.includes(".");
+          (a === 0 && !p || a > 0 && !(p || C) || C && k) && u.preventDefault();
         },
-        { signal: t }
-      ), r.addEventListener(
+        { signal: e }
+      ), s.addEventListener(
         "keyup",
         (u) => {
-          (u.key === "ArrowUp" || u.key === "ArrowDown") && this.costomEvent(r, r.value);
+          (u.key === "ArrowUp" || u.key === "ArrowDown") && this.costomEvent(s, s.value);
         },
-        { signal: t }
-      ), r.addEventListener(
+        { signal: e }
+      ), s.addEventListener(
         "change",
         () => {
-          Number(r.value) < h && (r.value = h.toFixed(n)), Number(r.value) > l && l !== 0 ? r.value = l.toFixed(n) : r.value = Number(r.value).toFixed(n), this.state(Number(r.value), o, i, h, l), this.costomEvent(r, r.value);
+          Number(s.value) < n && (s.value = n.toFixed(a)), Number(s.value) > h && h !== 0 ? s.value = h.toFixed(a) : s.value = Number(s.value).toFixed(a), this.state(Number(s.value), o, l, n, h), this.costomEvent(s, s.value);
         },
-        { signal: t }
+        { signal: e }
       );
     });
   }
-  costomEvent(t, e) {
-    this.dbug && console.log(`CostomEvent: { detail: ${e}, bubbles: true }`), t.dispatchEvent(
-      new CustomEvent("ui-spinbox-change", {
-        detail: { val: e },
-        bubbles: !0
-      })
-    );
+  costomEvent(e, t) {
+    const r = {
+      detail: { id: e.id, value: t },
+      bubbles: !0
+    };
+    this.dbug && console.log("CostomEvent: data.detail ", r.detail), e.dispatchEvent(new CustomEvent("ui-spinbox-change", r));
   }
 }
-class z {
-  constructor(t = {}, e = !1) {
-    b(this, "selectors");
-    b(this, "main", null);
-    b(this, "abortController", new AbortController());
-    b(this, "dbug");
-    this.dbug = e;
-    const s = {
+class $ {
+  selectors;
+  main = null;
+  abortController = new AbortController();
+  dbug;
+  constructor(e = {}, t = !1) {
+    this.dbug = t;
+    const r = {
       main: "UIsw",
       label: "UIsw-label"
     };
-    this.selectors = { ...s, ...t }, this.main = document.querySelectorAll(
+    this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
       `.${this.selectors.main}`
     ), this.event();
   }
@@ -171,46 +163,45 @@ class z {
     this.abortController && this.abortController.abort(), this.main = null;
   }
   event() {
-    var e;
     this.abortController = new AbortController();
-    const t = this.abortController.signal;
-    (e = this.main) == null || e.forEach((s) => {
-      const a = s.querySelector(`.${this.selectors.label}`), c = s.querySelector("input");
-      a && a.id && s.setAttribute("aria-labelledby", a.id), c && (c.checked ? s.setAttribute("aria-checked", "true") : s.setAttribute("aria-checked", "false"), s.addEventListener(
+    const e = this.abortController.signal;
+    this.main?.forEach((t) => {
+      const r = t.querySelector(`.${this.selectors.label}`), i = t.querySelector("input");
+      r && r.id && t.setAttribute("aria-labelledby", r.id), i && (i.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener(
         "click",
         () => {
-          c.checked = !c.checked;
-          const o = s.querySelector("input");
-          this.costomEvent(s, String(o == null ? void 0 : o.checked)), s.setAttribute("aria-checked", String(c.checked));
+          i.checked = !i.checked;
+          const s = t.querySelector("input");
+          this.costomEvent(t, String(s?.checked)), t.setAttribute("aria-checked", String(i.checked));
         },
-        { signal: t }
-      ), s.addEventListener(
+        { signal: e }
+      ), t.addEventListener(
         "keydown",
-        (o) => {
-          o.key === "ArrowRight" ? (c.checked = !0, s.setAttribute("aria-checked", String(c.checked)), o.preventDefault(), this.costomEvent(s, String(!0))) : o.key === "ArrowLeft" && (c.checked = !1, s.setAttribute("aria-checked", String(c.checked)), o.preventDefault(), this.costomEvent(s, String(!1)));
+        (s) => {
+          s.key === "ArrowRight" ? (i.checked = !0, t.setAttribute("aria-checked", String(i.checked)), s.preventDefault(), this.costomEvent(t, String(!0))) : s.key === "ArrowLeft" && (i.checked = !1, t.setAttribute("aria-checked", String(i.checked)), s.preventDefault(), this.costomEvent(t, String(!1)));
         },
-        { signal: t }
+        { signal: e }
       ));
     });
   }
-  costomEvent(t, e) {
-    this.dbug && console.log(`CostomEvent: { detail: ${e}, bubbles: true }`), t.dispatchEvent(
+  costomEvent(e, t) {
+    this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
       new CustomEvent("ui-switch-change", {
-        detail: { val: e },
+        detail: { val: t },
         bubbles: !0
       })
     );
   }
 }
-class w {
-  constructor(t = {}, e = !1) {
-    b(this, "selectors");
-    b(this, "main", null);
-    b(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
-    b(this, "abortController", new AbortController());
-    b(this, "dbug");
-    this.dbug = e;
-    const s = {
+class A {
+  selectors;
+  main = null;
+  itemArrowInitialized = /* @__PURE__ */ new WeakSet();
+  abortController = new AbortController();
+  dbug;
+  constructor(e = {}, t = !1) {
+    this.dbug = t;
+    const r = {
       idPrefix: "UI-option-",
       main: "UIselect",
       selected: "UIselect-selected",
@@ -221,331 +212,325 @@ class w {
       excludedItems: ["divider", "test"]
       // class=""
     };
-    this.selectors = { ...s, ...t }, this.main = document.querySelectorAll(
+    this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
       `.${this.selectors.main}`
     ), this.event(), this.initGlobalListener(this.selectors);
   }
-  filterExcluded(t, e) {
-    return Array.from(t).filter((s) => !e.some((a) => typeof a == "string" ? s.classList.contains(a) || s.id === a : s === a));
+  filterExcluded(e, t) {
+    return Array.from(e).filter((r) => !t.some((i) => typeof i == "string" ? r.classList.contains(i) || r.id === i : r === i));
   }
-  filterSearch(t, e) {
-    const s = e.trim().toLowerCase();
-    return t.filter((a) => {
-      var i, r;
-      const c = ((i = a.dataset.value) == null ? void 0 : i.toLowerCase()) || "", o = ((r = a.textContent) == null ? void 0 : r.toLowerCase()) || "";
-      return c.includes(s) || o.includes(s);
+  filterSearch(e, t) {
+    const r = t.trim().toLowerCase();
+    return e.filter((i) => {
+      const s = i.dataset.value?.toLowerCase() || "", o = i.textContent?.toLowerCase() || "";
+      return s.includes(r) || o.includes(r);
     });
   }
   destroy() {
-    w.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
+    A.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
   }
   event() {
-    var e;
     this.abortController = new AbortController();
-    const t = this.abortController.signal;
-    (e = this.main) == null || e.forEach(
-      (s) => {
-        const a = s.querySelector(
+    const e = this.abortController.signal;
+    this.main?.forEach(
+      (t) => {
+        const r = t.querySelector(
           `.${this.selectors.main} input[type='hidden']`
         );
         try {
-          if (!a)
+          if (!r)
             throw new Error('<input type="hidden" name="YouUniqueId">');
-        } catch (v) {
-          return console.warn("Not found:", v.message);
+        } catch (b) {
+          return console.warn("Not found:", b.message);
         }
-        const c = s.querySelector(
+        const i = t.querySelector(
           `.${this.selectors.selected}`
-        ), o = s.querySelector(
+        ), s = t.querySelector(
           `.${this.selectors.arrow}`
-        ), i = s.querySelector(
+        ), o = t.querySelector(
           `.${this.selectors.optionsList}`
-        ), r = s.querySelector(
+        ), l = t.querySelector(
           `.${this.selectors.search} input`
         );
-        o && o.addEventListener(
+        s && s.addEventListener(
           "click",
           () => {
-            this.toggle(s, i);
+            this.toggle(t, o);
           },
-          { signal: t }
-        ), c.addEventListener(
+          { signal: e }
+        ), i.addEventListener(
           "click",
           () => {
-            this.toggle(s, i);
+            this.toggle(t, o);
           },
-          { signal: t }
-        ), s.addEventListener(
+          { signal: e }
+        ), t.addEventListener(
           "click",
           () => {
-            this.itemsPosition(i);
+            this.itemsPosition(o);
           },
-          { signal: t }
+          { signal: e }
         );
-        const n = i.querySelectorAll(
+        const a = o.querySelectorAll(
           `.${this.selectors.items} ul li`
-        ), h = this.filterExcluded(
-          n,
+        ), n = this.filterExcluded(
+          a,
           this.selectors.excludedItems
-        ), l = s.querySelector(
+        ), h = t.querySelector(
           "[aria-selected='true']"
         );
-        l && this.defaultSelect(s, l, c, a);
-        var m = [];
-        r && r.addEventListener(
+        h && this.defaultSelect(t, h, i, r);
+        var c = [];
+        l && l.addEventListener(
           "input",
-          (v) => {
-            const y = v.target.value.trim();
-            c && (m = this.filterSearch(h, y), y ? (n.forEach((E) => E.remove()), m.forEach((E) => {
-              var g;
-              (g = i.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(E);
-            })) : n.forEach((E) => {
-              var g;
-              (g = i.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(E);
-            }), this.itemArrow(s, i, c, a, t));
+          (b) => {
+            const f = b.target.value.trim();
+            i && (c = this.filterSearch(n, f), f ? (a.forEach((m) => m.remove()), c.forEach((m) => {
+              o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
+            })) : a.forEach((m) => {
+              o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
+            }), this.itemArrow(t, o, i, r, e));
           },
-          { signal: t }
-        ), this.itemArrow(s, i, c, a, t), this.items(s, i, h, c, a, t);
+          { signal: e }
+        ), this.itemArrow(t, o, i, r, e), this.items(t, o, n, i, r, e);
       },
-      { signal: t }
+      { signal: e }
     );
   }
-  itemArrow(t, e, s, a, c) {
-    if (this.itemArrowInitialized.has(t)) return;
-    this.itemArrowInitialized.add(t);
+  itemArrow(e, t, r, i, s) {
+    if (this.itemArrowInitialized.has(e)) return;
+    this.itemArrowInitialized.add(e);
     let o = -1;
-    const i = s.textContent ? s.textContent : "", r = t.querySelector(
+    const l = r.textContent ? r.textContent : "", a = e.querySelector(
       `.${this.selectors.search} input`
     );
-    t.addEventListener(
+    e.addEventListener(
       "keydown",
       (n) => {
-        r && r.focus();
+        a && a.focus();
         const h = Array.from(
-          e.querySelectorAll(`.${this.selectors.optionsList} ul li`)
-        ), l = this.filterExcluded(
+          t.querySelectorAll(`.${this.selectors.optionsList} ul li`)
+        ), c = this.filterExcluded(
           h,
           this.selectors.excludedItems
-        ), m = l.length;
-        if (m !== 0)
+        ), b = c.length;
+        if (b !== 0)
           if (n.key === "ArrowDown") {
-            n.preventDefault(), t.getAttribute("aria-expanded") === "false" && this.toggle(t, e), o = (o + 1) % m, s.textContent = l[o].textContent, l.forEach((A) => A.removeAttribute("aria-selected")), l[o].setAttribute("aria-selected", "true");
-            const v = l[o].id || `${this.selectors.idPrefix}${o}`;
-            t.setAttribute("aria-activedescendant", v), l[o].scrollIntoView({ block: "nearest" });
+            n.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), o = (o + 1) % b, r.textContent = c[o].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[o].setAttribute("aria-selected", "true");
+            const v = c[o].id || `${this.selectors.idPrefix}${o}`;
+            e.setAttribute("aria-activedescendant", v), c[o].scrollIntoView({ block: "nearest" });
           } else if (n.key === "ArrowUp") {
-            n.preventDefault(), o = (o - 1 + m) % m, s.textContent = l[o].textContent, l.forEach((A) => A.removeAttribute("aria-selected")), l[o].setAttribute("aria-selected", "true");
-            const v = l[o].id || `${this.selectors.idPrefix}${o}`;
-            t.setAttribute("aria-activedescendant", v), l[o].scrollIntoView({ block: "nearest" });
+            n.preventDefault(), o = (o - 1 + b) % b, r.textContent = c[o].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[o].setAttribute("aria-selected", "true");
+            const v = c[o].id || `${this.selectors.idPrefix}${o}`;
+            e.setAttribute("aria-activedescendant", v), c[o].scrollIntoView({ block: "nearest" });
           } else if (n.key === "Enter")
             if (n.preventDefault(), o >= 0) {
-              s.textContent = l[o].textContent, l.forEach((A) => A.removeAttribute("aria-selected")), l[o].setAttribute("aria-selected", "true");
-              const v = l[o].id || `${this.selectors.idPrefix}${o}`;
-              t.setAttribute("aria-activedescendant", v), a.value = String(l[o].dataset.value), this.costomEvent(t, a.value), this.close(t, e);
+              r.textContent = c[o].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[o].setAttribute("aria-selected", "true");
+              const v = c[o].id || `${this.selectors.idPrefix}${o}`;
+              e.setAttribute("aria-activedescendant", v), i.value = String(c[o].dataset.value), this.costomEvent(e, i.value), this.close(e, t);
             } else
-              this.toggle(t, e);
-          else n.key === "Escape" && (t.getAttribute("aria-activedescendant") || (s.textContent = i), this.close(t, e));
+              this.toggle(e, t);
+          else n.key === "Escape" && (e.getAttribute("aria-activedescendant") || (r.textContent = l), this.close(e, t));
       },
-      { signal: c }
+      { signal: s }
     );
   }
-  itemsPosition(t) {
-    const e = t.querySelector(
+  itemsPosition(e) {
+    const t = e.querySelector(
       '[aria-selected="true"]'
     );
-    e && e.scrollIntoView({ block: "nearest" });
+    t && t.scrollIntoView({ block: "nearest" });
   }
-  items(t, e, s, a, c, o) {
-    s.forEach((i, r) => {
-      i.addEventListener(
+  items(e, t, r, i, s, o) {
+    r.forEach((l, a) => {
+      l.addEventListener(
         "click",
         () => {
-          const n = s[r];
+          const n = r[a];
           if (n) {
-            a.textContent = n.textContent, s.forEach((l) => l.removeAttribute("aria-selected")), n.setAttribute("aria-selected", "true");
-            const h = n.id || `${this.selectors.idPrefix}${r}`;
-            t.setAttribute("aria-expanded", "false"), t.setAttribute("aria-activedescendant", h), c.value = String(s[r].dataset.value), this.costomEvent(t, c.value), this.close(t, e);
+            i.textContent = n.textContent, r.forEach((c) => c.removeAttribute("aria-selected")), n.setAttribute("aria-selected", "true");
+            const h = n.id || `${this.selectors.idPrefix}${a}`;
+            e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), s.value = String(r[a].dataset.value), this.costomEvent(e, s.value), this.close(e, t);
           }
         },
         { signal: o }
       );
     });
   }
-  defaultSelect(t, e, s, a) {
-    e && (a.setAttribute("value", e.dataset.value ?? ""), s.textContent = e.textContent ?? "", t.setAttribute("aria-activedescendant", e.id || ""));
+  defaultSelect(e, t, r, i) {
+    t && (i.setAttribute("value", t.dataset.value ?? ""), r.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
   }
-  costomEvent(t, e) {
-    this.dbug && console.log(`CostomEvent: { detail: ${e}, bubbles: true }`), t.dispatchEvent(
+  costomEvent(e, t) {
+    this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
       new CustomEvent("ui-select-change", {
-        detail: { val: e },
+        detail: { val: t },
         bubbles: !0
       })
     );
   }
-  toggle(t, e) {
-    w.closeAll(this.selectors), e.hidden ? (e.hidden = !1, t.setAttribute("aria-expanded", "true")) : this.close(t, e);
+  toggle(e, t) {
+    A.closeAll(this.selectors), t.hidden ? (t.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, t);
   }
-  close(t, e) {
-    e.hidden = !0, t.setAttribute("aria-expanded", "false");
+  close(e, t) {
+    t.hidden = !0, e.setAttribute("aria-expanded", "false");
   }
-  static closeAll(t) {
-    document.querySelectorAll(`.${t.main}`).forEach((e) => {
-      const s = e.querySelector(`.${t.optionsList}`);
-      s.hidden = !0, e.setAttribute("aria-expanded", "false");
+  static closeAll(e) {
+    document.querySelectorAll(`.${e.main}`).forEach((t) => {
+      const r = t.querySelector(`.${e.optionsList}`);
+      r.hidden = !0, t.setAttribute("aria-expanded", "false");
     });
   }
-  initGlobalListener(t) {
+  initGlobalListener(e) {
     document.addEventListener(
       "click",
-      (e) => {
-        const s = e.target;
-        [...document.querySelectorAll(`.${t.main}`)].some(
-          (c) => c.contains(s)
-        ) || w.closeAll(t);
+      (t) => {
+        const r = t.target;
+        [...document.querySelectorAll(`.${e.main}`)].some(
+          (s) => s.contains(r)
+        ) || A.closeAll(e);
       },
       { signal: this.abortController.signal }
     );
   }
 }
-var C, D;
-class M {
-  constructor(t = {}, e = !1) {
-    k(this, C);
-    b(this, "selectors");
-    b(this, "main", null);
-    b(this, "abortController", new AbortController());
-    b(this, "dbug");
-    this.dbug = e;
-    const s = {
+class I {
+  selectors;
+  main = null;
+  abortController = new AbortController();
+  dbug;
+  constructor(e = {}, t = !0) {
+    this.dbug = t;
+    const r = {
       main: "UIbg",
       btn: "UIbg-btn",
       input: "UIbg-input"
     };
-    this.selectors = { ...s, ...t }, this.main = document.querySelectorAll(
+    this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), x(this, C, D).call(this);
+    ), this.#t();
   }
   destroy() {
     this.abortController && this.abortController.abort(), this.main = null;
   }
-  costomEvent(t) {
-    const e = {
-      detail: { id: t.id, value: t.value },
+  #t() {
+    this.abortController = new AbortController();
+    const e = this.abortController.signal;
+    this.main?.forEach((t) => {
+      const r = t.querySelector(
+        `.${this.selectors.input}:checked`
+      );
+      r && this.costomEvent(r);
+      const i = t.querySelectorAll(
+        `.${this.selectors.btn}`
+      );
+      i.forEach((l) => {
+        l.addEventListener(
+          "click",
+          () => {
+            i.forEach((a) => {
+              a.setAttribute("aria-checked", "false"), a.setAttribute("tabindex", "-1");
+            }), l.setAttribute("aria-checked", "true"), l.setAttribute("tabindex", "0"), l.focus();
+          },
+          { signal: e }
+        ), l.addEventListener(
+          "keydown",
+          (a) => {
+            let n = Array.from(i).indexOf(l);
+            if (a.key === "ArrowRight" && n++, a.key === "ArrowLeft" && n--, n < 0 && (n = i.length - 1), n >= i.length && (n = 0), a.key === "Enter") {
+              const c = s[n];
+              c && !c.disabled && (s.forEach((b) => {
+                b.checked = !1, b.removeAttribute("checked");
+              }), c.checked = !0, c.setAttribute("checked", ""), this.costomEvent(c)), a.preventDefault();
+              return;
+            }
+            const h = i[n];
+            h && (i.forEach((c) => c.setAttribute("tabindex", "-1")), h.setAttribute("tabindex", "0"), h.focus());
+          },
+          { signal: e }
+        );
+      });
+      const s = t.querySelectorAll(
+        `.${this.selectors.input}`
+      );
+      s.forEach((l, a) => {
+        this.dbug && (l.id || console.error(`Input #${a} in group has no ID!`), (!l.value || l.value === "on") && console.warn(
+          `Input #${l.id} does not have a value specified (currently "${l.value}")`
+        ));
+        const n = i[a];
+        n && (l.tabIndex = -1, n.setAttribute("role", "radio"), n.setAttribute("aria-checked", String(l.checked)), n.setAttribute("tabindex", l.checked ? "0" : "-1"), l.disabled ? n.setAttribute("aria-disabled", "true") : n.removeAttribute("aria-disabled"), l.addEventListener(
+          "click",
+          () => {
+            s.forEach((h) => {
+              h.checked = !1, h.removeAttribute("checked");
+            }), s[a].checked = !0, s[a].setAttribute("checked", ""), this.costomEvent(l);
+          },
+          { signal: e }
+        ));
+      });
+      const o = Array.from(s).find((l) => l.checked && !l.disabled) || Array.from(s).find((l) => !l.disabled);
+      if (o) {
+        const l = t.querySelector(
+          `label[for="${o.id}"]`
+        );
+        l && l.setAttribute("tabindex", "0");
+      }
+    });
+  }
+  costomEvent(e) {
+    const t = {
+      detail: { id: e.id, value: e.value },
       bubbles: !0
     };
-    this.dbug && console.log("CostomEvent:", e), t.dispatchEvent(new CustomEvent("ui-button-group-change", e));
+    this.dbug && console.log("CostomEvent:", t.detail), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
   }
 }
-C = new WeakSet(), D = function() {
-  var e;
-  this.abortController = new AbortController();
-  const t = this.abortController.signal;
-  (e = this.main) == null || e.forEach((s) => {
-    const a = s.querySelectorAll(
-      `.${this.selectors.btn}`
-    );
-    a.forEach((i) => {
-      i.addEventListener(
-        "click",
-        () => {
-          a.forEach((r) => {
-            r.setAttribute("aria-checked", "false"), r.setAttribute("tabindex", "-1");
-          }), i.setAttribute("aria-checked", "true"), i.setAttribute("tabindex", "0"), i.focus();
-        },
-        { signal: t }
-      ), i.addEventListener(
-        "keydown",
-        (r) => {
-          let n = Array.from(a).indexOf(i);
-          if (r.key === "ArrowRight" && n++, r.key === "ArrowLeft" && n--, n < 0 && (n = a.length - 1), n >= a.length && (n = 0), r.key === "Enter") {
-            const l = c[n];
-            l && !l.disabled && (c.forEach((m) => {
-              m.checked = !1, m.removeAttribute("checked");
-            }), l.checked = !0, l.setAttribute("checked", ""), this.costomEvent(l)), r.preventDefault();
-            return;
-          }
-          const h = a[n];
-          h && (a.forEach((l) => l.setAttribute("tabindex", "-1")), h.setAttribute("tabindex", "0"), h.focus());
-        },
-        { signal: t }
-      );
-    });
-    const c = s.querySelectorAll(
-      `.${this.selectors.input}`
-    );
-    c.forEach((i, r) => {
-      this.dbug && (i.id || console.error(`Input #${r} in group has no ID!`), (!i.value || i.value === "on") && console.warn(
-        `Input #${i.id} does not have a value specified (currently "${i.value}")`
-      ));
-      const n = a[r];
-      n && (i.tabIndex = -1, n.setAttribute("role", "radio"), n.setAttribute("aria-checked", String(i.checked)), n.setAttribute("tabindex", i.checked ? "0" : "-1"), i.disabled ? n.setAttribute("aria-disabled", "true") : n.removeAttribute("aria-disabled"), i.addEventListener(
-        "click",
-        () => {
-          c.forEach((h) => {
-            h.checked = !1, h.removeAttribute("checked");
-          }), c[r].checked = !0, c[r].setAttribute("checked", ""), this.costomEvent(i);
-        },
-        { signal: t }
-      ));
-    });
-    const o = Array.from(c).find((i) => i.checked && !i.disabled) || Array.from(c).find((i) => !i.disabled);
-    if (o) {
-      const i = s.querySelector(
-        `label[for="${o.id}"]`
-      );
-      i && i.setAttribute("tabindex", "0");
-    }
-  });
-};
-var p, U;
-class T {
-  constructor(t = {}, e = !1) {
-    k(this, p);
-    b(this, "selectors");
-    b(this, "buttons", null);
-    b(this, "abortController", new AbortController());
-    b(this, "dbug");
-    this.dbug = e;
-    const s = {
+class L {
+  selectors;
+  buttons = null;
+  abortController = new AbortController();
+  dbug;
+  constructor(e = {}, t = !1) {
+    this.dbug = t;
+    const r = {
       main: "UIb"
     };
-    this.selectors = { ...s, ...t }, this.buttons = document.querySelectorAll(
+    this.selectors = { ...r, ...e }, this.buttons = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), x(this, p, U).call(this);
+    ), this.#t();
   }
   destroy() {
     this.abortController && this.abortController.abort(), this.buttons = null;
   }
-  costomEvent(t, e) {
-    if (!e || e === "undefined" || e.trim() === "") {
+  #t() {
+    this.abortController = new AbortController();
+    const e = this.abortController.signal;
+    this.buttons?.forEach((t) => {
+      t.addEventListener(
+        "click",
+        () => {
+          this.costomEvent(t, String(t.dataset.value));
+        },
+        { signal: e }
+      );
+    });
+  }
+  costomEvent(e, t) {
+    if (!t || t === "undefined" || t.trim() === "") {
       console.log('Button data-value="" Not set!');
       return;
     }
-    this.dbug && console.log(`CostomEvent: { detail: ${e}, bubbles: true }`), t.dispatchEvent(
+    this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
       new CustomEvent("ui-button-change", {
-        detail: { val: e },
+        detail: { val: t },
         bubbles: !0
       })
     );
   }
 }
-p = new WeakSet(), U = function() {
-  var e;
-  this.abortController = new AbortController();
-  const t = this.abortController.signal;
-  (e = this.buttons) == null || e.forEach((s) => {
-    s.addEventListener(
-      "click",
-      () => {
-        this.costomEvent(s, String(s.dataset.value));
-      },
-      { signal: t }
-    );
-  });
-};
 export {
-  T as Button,
-  M as ButtonGroup,
-  w as Select,
-  _ as SpinBox,
-  z as Switch
+  L as Button,
+  I as ButtonGroup,
+  A as Select,
+  S as SpinBox,
+  $ as Switch
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(h,v){typeof exports=="object"&&typeof module<"u"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(h=typeof globalThis<"u"?globalThis:h||self,v(h.UiElements={}))})(this,function(h){"use strict";var T=Object.defineProperty;var N=h=>{throw TypeError(h)};var M=(h,v,g)=>v in h?T(h,v,{enumerable:!0,configurable:!0,writable:!0,value:g}):h[v]=g;var f=(h,v,g)=>M(h,typeof v!="symbol"?v+"":v,g),_=(h,v,g)=>v.has(h)||N("Cannot "+g);var $=(h,v,g)=>v.has(h)?N("Cannot add the same private member more than once"):v instanceof WeakSet?v.add(h):v.set(h,g);var L=(h,v,g)=>(_(h,v,"access private method"),g);var k,B,x,F;class v{constructor(t={},s=!1){f(this,"selectors");f(this,"spinBoxes");f(this,"abortController",new AbortController);f(this,"dbug");f(this,"state",(t,s,e,a=0,c=0)=>{t==a||t<a?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1),c!==0&&(t==c||t>c?(e.classList.add(this.selectors.disabledBtn),e.disabled=!0):(e.classList.remove(this.selectors.disabledBtn),e.disabled=!1))});f(this,"getValidDataNumber",(t,s)=>{const e=t.getAttribute(`data-${s}`);return e===null||e.trim()===""||isNaN(Number(e))?0:Number(e)});this.dbug=s;const e={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...e,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}event(){var s;this.abortController=new AbortController;const t=this.abortController.signal;(s=this.spinBoxes)==null||s.forEach(e=>{let a;const c=e.querySelectorAll(`.${this.selectors.btn}`),o=c[0],i=c[1],r=e.querySelector(`.${this.selectors.input}`),n=this.getValidDataNumber(e,"step"),b=this.getValidDataNumber(e,"min"),l=this.getValidDataNumber(e,"max"),A=u=>{e.setAttribute("aria-valuenow",String(u)),e.setAttribute("aria-valuetext",`${u} items`)};Number(r.value)<=b&&(r.value=b.toFixed(n)),l!==0?(Number(r.value)>=l&&(r.value=l.toFixed(n)),l&&e.setAttribute("aria-valuemax",l.toFixed(n))):r.value=Number(r.value).toFixed(n),b&&e.setAttribute("aria-valuemin",b.toFixed(n)),this.state(Number(r.value),o,i,b,l),A(r.value);let m=null;const E=(u=1)=>{r.value=String(Math.abs(Number(r.value)));let d=parseFloat(r.value)||0;return d=d+1*u/Math.pow(10,n),d>l&&l!==0&&(d=l),r.value=d.toFixed(n),this.state(Number(r.value),o,i,b,l),A(r.value),r.value},p=(u=1)=>{r.value=String(Math.abs(Number(r.value)));let d=parseFloat(r.value)||0;return d=d-1*u/Math.pow(10,n),d<b&&(d=b),r.value=d.toFixed(n),this.state(Number(r.value),o,i,b,l),A(r.value),r.value},y=(u,d=150)=>{m===null&&(m=window.setInterval(u,d))},w=()=>{m!==null&&(clearInterval(m),m=null)};i.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;y(()=>E(d))},{signal:t}),i.addEventListener("touchstart",()=>y(E),{signal:t}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{i.addEventListener(u,w,{signal:t})}),i.addEventListener("click",u=>{const d=u.shiftKey?3:1;m===null&&(a=E(d),this.costomEvent(i,a))},{signal:t}),o.addEventListener("click",u=>{const d=u.shiftKey?3:1;m===null&&(a=p(d),this.costomEvent(o,a))},{signal:t}),o.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;y(()=>p(d),100)},{signal:t}),o.addEventListener("touchstart",()=>y(p,100),{signal:t}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{o.addEventListener(u,w,{signal:t})}),r.addEventListener("keydown",u=>{const d=u.key,I=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?E(I):p(I);return}const q=d===","?".":d,U=/^[0-9]$/.test(q),D=q===".",V=r.value.includes(".");(n===0&&!U||n>0&&!(U||D)||D&&V)&&u.preventDefault()},{signal:t}),r.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(r,r.value)},{signal:t}),r.addEventListener("change",()=>{Number(r.value)<b&&(r.value=b.toFixed(n)),Number(r.value)>l&&l!==0?r.value=l.toFixed(n):r.value=Number(r.value).toFixed(n),this.state(Number(r.value),o,i,b,l),this.costomEvent(r,r.value)},{signal:t})})}costomEvent(t,s){this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),t.dispatchEvent(new CustomEvent("ui-spinbox-change",{detail:{val:s},bubbles:!0}))}}class g{constructor(t={},s=!1){f(this,"selectors");f(this,"main",null);f(this,"abortController",new AbortController);f(this,"dbug");this.dbug=s;const e={main:"UIsw",label:"UIsw-label"};this.selectors={...e,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){var s;this.abortController=new AbortController;const t=this.abortController.signal;(s=this.main)==null||s.forEach(e=>{const a=e.querySelector(`.${this.selectors.label}`),c=e.querySelector("input");a&&a.id&&e.setAttribute("aria-labelledby",a.id),c&&(c.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{c.checked=!c.checked;const o=e.querySelector("input");this.costomEvent(e,String(o==null?void 0:o.checked)),e.setAttribute("aria-checked",String(c.checked))},{signal:t}),e.addEventListener("keydown",o=>{o.key==="ArrowRight"?(c.checked=!0,e.setAttribute("aria-checked",String(c.checked)),o.preventDefault(),this.costomEvent(e,String(!0))):o.key==="ArrowLeft"&&(c.checked=!1,e.setAttribute("aria-checked",String(c.checked)),o.preventDefault(),this.costomEvent(e,String(!1)))},{signal:t}))})}costomEvent(t,s){this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),t.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:s},bubbles:!0}))}}class C{constructor(t={},s=!1){f(this,"selectors");f(this,"main",null);f(this,"itemArrowInitialized",new WeakSet);f(this,"abortController",new AbortController);f(this,"dbug");this.dbug=s;const e={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...e,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(t,s){return Array.from(t).filter(e=>!s.some(a=>typeof a=="string"?e.classList.contains(a)||e.id===a:e===a))}filterSearch(t,s){const e=s.trim().toLowerCase();return t.filter(a=>{var i,r;const c=((i=a.dataset.value)==null?void 0:i.toLowerCase())||"",o=((r=a.textContent)==null?void 0:r.toLowerCase())||"";return c.includes(e)||o.includes(e)})}destroy(){C.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var s;this.abortController=new AbortController;const t=this.abortController.signal;(s=this.main)==null||s.forEach(e=>{const a=e.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!a)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(m){return console.warn("Not found:",m.message)}const c=e.querySelector(`.${this.selectors.selected}`),o=e.querySelector(`.${this.selectors.arrow}`),i=e.querySelector(`.${this.selectors.optionsList}`),r=e.querySelector(`.${this.selectors.search} input`);o&&o.addEventListener("click",()=>{this.toggle(e,i)},{signal:t}),c.addEventListener("click",()=>{this.toggle(e,i)},{signal:t}),e.addEventListener("click",()=>{this.itemsPosition(i)},{signal:t});const n=i.querySelectorAll(`.${this.selectors.items} ul li`),b=this.filterExcluded(n,this.selectors.excludedItems),l=e.querySelector("[aria-selected='true']");l&&this.defaultSelect(e,l,c,a);var A=[];r&&r.addEventListener("input",m=>{const p=m.target.value.trim();c&&(A=this.filterSearch(b,p),p?(n.forEach(y=>y.remove()),A.forEach(y=>{var w;(w=i.querySelector(`.${this.selectors.optionsList} ul`))==null||w.appendChild(y)})):n.forEach(y=>{var w;(w=i.querySelector(`.${this.selectors.optionsList} ul`))==null||w.appendChild(y)}),this.itemArrow(e,i,c,a,t))},{signal:t}),this.itemArrow(e,i,c,a,t),this.items(e,i,b,c,a,t)},{signal:t})}itemArrow(t,s,e,a,c){if(this.itemArrowInitialized.has(t))return;this.itemArrowInitialized.add(t);let o=-1;const i=e.textContent?e.textContent:"",r=t.querySelector(`.${this.selectors.search} input`);t.addEventListener("keydown",n=>{r&&r.focus();const b=Array.from(s.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(b,this.selectors.excludedItems),A=l.length;if(A!==0)if(n.key==="ArrowDown"){n.preventDefault(),t.getAttribute("aria-expanded")==="false"&&this.toggle(t,s),o=(o+1)%A,e.textContent=l[o].textContent,l.forEach(E=>E.removeAttribute("aria-selected")),l[o].setAttribute("aria-selected","true");const m=l[o].id||`${this.selectors.idPrefix}${o}`;t.setAttribute("aria-activedescendant",m),l[o].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),o=(o-1+A)%A,e.textContent=l[o].textContent,l.forEach(E=>E.removeAttribute("aria-selected")),l[o].setAttribute("aria-selected","true");const m=l[o].id||`${this.selectors.idPrefix}${o}`;t.setAttribute("aria-activedescendant",m),l[o].scrollIntoView({block:"nearest"})}else if(n.key==="Enter")if(n.preventDefault(),o>=0){e.textContent=l[o].textContent,l.forEach(E=>E.removeAttribute("aria-selected")),l[o].setAttribute("aria-selected","true");const m=l[o].id||`${this.selectors.idPrefix}${o}`;t.setAttribute("aria-activedescendant",m),a.value=String(l[o].dataset.value),this.costomEvent(t,a.value),this.close(t,s)}else this.toggle(t,s);else n.key==="Escape"&&(t.getAttribute("aria-activedescendant")||(e.textContent=i),this.close(t,s))},{signal:c})}itemsPosition(t){const s=t.querySelector('[aria-selected="true"]');s&&s.scrollIntoView({block:"nearest"})}items(t,s,e,a,c,o){e.forEach((i,r)=>{i.addEventListener("click",()=>{const n=e[r];if(n){a.textContent=n.textContent,e.forEach(l=>l.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const b=n.id||`${this.selectors.idPrefix}${r}`;t.setAttribute("aria-expanded","false"),t.setAttribute("aria-activedescendant",b),c.value=String(e[r].dataset.value),this.costomEvent(t,c.value),this.close(t,s)}},{signal:o})})}defaultSelect(t,s,e,a){s&&(a.setAttribute("value",s.dataset.value??""),e.textContent=s.textContent??"",t.setAttribute("aria-activedescendant",s.id||""))}costomEvent(t,s){this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),t.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:s},bubbles:!0}))}toggle(t,s){C.closeAll(this.selectors),s.hidden?(s.hidden=!1,t.setAttribute("aria-expanded","true")):this.close(t,s)}close(t,s){s.hidden=!0,t.setAttribute("aria-expanded","false")}static closeAll(t){document.querySelectorAll(`.${t.main}`).forEach(s=>{const e=s.querySelector(`.${t.optionsList}`);e.hidden=!0,s.setAttribute("aria-expanded","false")})}initGlobalListener(t){document.addEventListener("click",s=>{const e=s.target;[...document.querySelectorAll(`.${t.main}`)].some(c=>c.contains(e))||C.closeAll(t)},{signal:this.abortController.signal})}}class K{constructor(t={},s=!1){$(this,k);f(this,"selectors");f(this,"main",null);f(this,"abortController",new AbortController);f(this,"dbug");this.dbug=s;const e={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...e,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),L(this,k,B).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.main=null}costomEvent(t){const s={detail:{id:t.id,value:t.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",s),t.dispatchEvent(new CustomEvent("ui-button-group-change",s))}}k=new WeakSet,B=function(){var s;this.abortController=new AbortController;const t=this.abortController.signal;(s=this.main)==null||s.forEach(e=>{const a=e.querySelectorAll(`.${this.selectors.btn}`);a.forEach(i=>{i.addEventListener("click",()=>{a.forEach(r=>{r.setAttribute("aria-checked","false"),r.setAttribute("tabindex","-1")}),i.setAttribute("aria-checked","true"),i.setAttribute("tabindex","0"),i.focus()},{signal:t}),i.addEventListener("keydown",r=>{let n=Array.from(a).indexOf(i);if(r.key==="ArrowRight"&&n++,r.key==="ArrowLeft"&&n--,n<0&&(n=a.length-1),n>=a.length&&(n=0),r.key==="Enter"){const l=c[n];l&&!l.disabled&&(c.forEach(A=>{A.checked=!1,A.removeAttribute("checked")}),l.checked=!0,l.setAttribute("checked",""),this.costomEvent(l)),r.preventDefault();return}const b=a[n];b&&(a.forEach(l=>l.setAttribute("tabindex","-1")),b.setAttribute("tabindex","0"),b.focus())},{signal:t})});const c=e.querySelectorAll(`.${this.selectors.input}`);c.forEach((i,r)=>{this.dbug&&(i.id||console.error(`Input #${r} in group has no ID!`),(!i.value||i.value==="on")&&console.warn(`Input #${i.id} does not have a value specified (currently "${i.value}")`));const n=a[r];n&&(i.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(i.checked)),n.setAttribute("tabindex",i.checked?"0":"-1"),i.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),i.addEventListener("click",()=>{c.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c[r].checked=!0,c[r].setAttribute("checked",""),this.costomEvent(i)},{signal:t}))});const o=Array.from(c).find(i=>i.checked&&!i.disabled)||Array.from(c).find(i=>!i.disabled);if(o){const i=e.querySelector(`label[for="${o.id}"]`);i&&i.setAttribute("tabindex","0")}})};class P{constructor(t={},s=!1){$(this,x);f(this,"selectors");f(this,"buttons",null);f(this,"abortController",new AbortController);f(this,"dbug");this.dbug=s;const e={main:"UIb"};this.selectors={...e,...t},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),L(this,x,F).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}costomEvent(t,s){if(!s||s==="undefined"||s.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),t.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:s},bubbles:!0}))}}x=new WeakSet,F=function(){var s;this.abortController=new AbortController;const t=this.abortController.signal;(s=this.buttons)==null||s.forEach(e=>{e.addEventListener("click",()=>{this.costomEvent(e,String(e.dataset.value))},{signal:t})})},h.Button=P,h.ButtonGroup=K,h.Select=C,h.SpinBox=v,h.Switch=g,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
+(function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.UiElements={}))})(this,(function(m){"use strict";class g{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,r,i=0,s=0)=>{e==i||e<i?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),s!==0&&(e==s||e>s?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let r;const i=t.querySelectorAll(`.${this.selectors.btn}`),s=t.querySelector(`.${this.selectors.input}`);this.dbug&&(i||console.log(`Buttons (${this.selectors.btn}) not found in container`),s||console.log(`Input (${this.selectors.input}) not found in container`));const o=i[0],l=i[1],a=this.getValidDataNumber(t,"step"),n=this.getValidDataNumber(t,"min"),h=this.getValidDataNumber(t,"max"),c=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=n&&(s.value=n.toFixed(a)),h!==0?(Number(s.value)>=h&&(s.value=h.toFixed(a)),h&&t.setAttribute("aria-valuemax",h.toFixed(a))):s.value=Number(s.value).toFixed(a),n&&t.setAttribute("aria-valuemin",n.toFixed(a)),this.state(Number(s.value),o,l,n,h),c(s.value);let b=null;const v=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d+1*u/Math.pow(10,a),d>h&&h!==0&&(d=h),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},f=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d-1*u/Math.pow(10,a),d<n&&(d=n),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},A=(u,d=150)=>{b===null&&(b=window.setInterval(u,d))},p=()=>{b!==null&&(clearInterval(b),b=null)};l.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;A(()=>v(d))},{signal:e}),l.addEventListener("touchstart",()=>A(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{l.addEventListener(u,p,{signal:e})}),l.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=v(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=f(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;A(()=>f(d),100)},{signal:e}),o.addEventListener("touchstart",()=>A(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{o.addEventListener(u,p,{signal:e})}),s.addEventListener("keydown",u=>{const d=u.key,w=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?v(w):f(w);return}const C=d===","?".":d,k=/^[0-9]$/.test(C),x=C===".",L=s.value.includes(".");(a===0&&!k||a>0&&!(k||x)||x&&L)&&u.preventDefault()},{signal:e}),s.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(s,s.value)},{signal:e}),s.addEventListener("change",()=>{Number(s.value)<n&&(s.value=n.toFixed(a)),Number(s.value)>h&&h!==0?s.value=h.toFixed(a):s.value=Number(s.value).toFixed(a),this.state(Number(s.value),o,l,n,h),this.costomEvent(s,s.value)},{signal:e})})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",r.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",r))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.label}`),i=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),i&&(i.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{i.checked=!i.checked;const s=t.querySelector("input");this.costomEvent(t,String(s?.checked)),t.setAttribute("aria-checked",String(i.checked))},{signal:e}),t.addEventListener("keydown",s=>{s.key==="ArrowRight"?(i.checked=!0,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!0))):s.key==="ArrowLeft"&&(i.checked=!1,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!1)))},{signal:e}))})}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:t},bubbles:!0}))}}class E{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(r=>!t.some(i=>typeof i=="string"?r.classList.contains(i)||r.id===i:r===i))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(i=>{const s=i.dataset.value?.toLowerCase()||"",o=i.textContent?.toLowerCase()||"";return s.includes(r)||o.includes(r)})}destroy(){E.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!r)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const i=t.querySelector(`.${this.selectors.selected}`),s=t.querySelector(`.${this.selectors.arrow}`),o=t.querySelector(`.${this.selectors.optionsList}`),l=t.querySelector(`.${this.selectors.search} input`);s&&s.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),i.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const a=o.querySelectorAll(`.${this.selectors.items} ul li`),n=this.filterExcluded(a,this.selectors.excludedItems),h=t.querySelector("[aria-selected='true']");h&&this.defaultSelect(t,h,i,r);var c=[];l&&l.addEventListener("input",b=>{const f=b.target.value.trim();i&&(c=this.filterSearch(n,f),f?(a.forEach(A=>A.remove()),c.forEach(A=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)})):a.forEach(A=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)}),this.itemArrow(t,o,i,r,e))},{signal:e}),this.itemArrow(t,o,i,r,e),this.items(t,o,n,i,r,e)},{signal:e})}itemArrow(e,t,r,i,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let o=-1;const l=r.textContent?r.textContent:"",a=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",n=>{a&&a.focus();const h=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),b=c.length;if(b!==0)if(n.key==="ArrowDown"){n.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),o=(o+1)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),o=(o-1+b)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="Enter")if(n.preventDefault(),o>=0){r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),i.value=String(c[o].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}else this.toggle(e,t);else n.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=l),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,i,s,o){r.forEach((l,a)=>{l.addEventListener("click",()=>{const n=r[a];if(n){i.textContent=n.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const h=n.id||`${this.selectors.idPrefix}${a}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),s.value=String(r[a].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:o})})}defaultSelect(e,t,r,i){t&&(i.setAttribute("value",t.dataset.value??""),r.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){E.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const r=t.querySelector(`.${e.optionsList}`);r.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const r=t.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(r))||E.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!0){this.dbug=t;const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.costomEvent(r);const i=t.querySelectorAll(`.${this.selectors.btn}`);i.forEach(l=>{l.addEventListener("click",()=>{i.forEach(a=>{a.setAttribute("aria-checked","false"),a.setAttribute("tabindex","-1")}),l.setAttribute("aria-checked","true"),l.setAttribute("tabindex","0"),l.focus()},{signal:e}),l.addEventListener("keydown",a=>{let n=Array.from(i).indexOf(l);if(a.key==="ArrowRight"&&n++,a.key==="ArrowLeft"&&n--,n<0&&(n=i.length-1),n>=i.length&&(n=0),a.key==="Enter"){const c=s[n];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),a.preventDefault();return}const h=i[n];h&&(i.forEach(c=>c.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:e})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((l,a)=>{this.dbug&&(l.id||console.error(`Input #${a} in group has no ID!`),(!l.value||l.value==="on")&&console.warn(`Input #${l.id} does not have a value specified (currently "${l.value}")`));const n=i[a];n&&(l.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(l.checked)),n.setAttribute("tabindex",l.checked?"0":"-1"),l.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),l.addEventListener("click",()=>{s.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),s[a].checked=!0,s[a].setAttribute("checked",""),this.costomEvent(l)},{signal:e}))});const o=Array.from(s).find(l=>l.checked&&!l.disabled)||Array.from(s).find(l=>!l.disabled);if(o){const l=t.querySelector(`label[for="${o.id}"]`);l&&l.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t.detail),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class I{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}m.Button=I,m.ButtonGroup=$,m.Select=E,m.SpinBox=g,m.Switch=S,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -2,7 +2,7 @@
   "author": "Andrii Popov",
   "name": "@popovandrii/ui-elements",
   "description": "UI elements. Color scheme. Elements with complex logic Java Script. SpinBox, Select+search, Switch, Button Group (radio), Button",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "license": "MIT",
   "keywords": [
     "spinbox",
@@ -43,17 +43,17 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.8.0",
-    "@typescript-eslint/parser": "^8.8.0",
-    "eslint": "^9.27.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.4.0",
-    "jsdom": "^26.1.0",
-    "prettier": "^3.5.3",
-    "sass": "^1.89.2",
-    "typescript": "~5.8.3",
-    "vite": "^6.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "eslint": "^10.0.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "jsdom": "^28.1.0",
+    "prettier": "^3.8.1",
+    "sass": "^1.97.3",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.18"
   }
 }