@popovandrii/ui-elements 0.0.21 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/Button.d.ts CHANGED
@@ -6,7 +6,8 @@ export declare class Button {
6
6
  private selectors;
7
7
  private buttons;
8
8
  private abortController;
9
- constructor(selectors?: Partial<SelectorMap>);
9
+ private dbug;
10
+ constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
10
11
  destroy(): void;
11
12
  private costomEvent;
12
13
  }
package/dist/Select.d.ts CHANGED
@@ -13,7 +13,8 @@ export declare class Select {
13
13
  private main;
14
14
  private itemArrowInitialized;
15
15
  private abortController;
16
- constructor(selectors?: Partial<SelectorMap>);
16
+ private dbug;
17
+ constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
17
18
  private filterExcluded;
18
19
  private filterSearch;
19
20
  destroy(): void;
package/dist/index.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";var M=Object.defineProperty;var U=d=>{throw TypeError(d)};var z=(d,t,s)=>t in d?M(d,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):d[t]=s;var v=(d,t,s)=>z(d,typeof t!="symbol"?t+"":t,s),F=(d,t,s)=>t.has(d)||U("Cannot "+s);var p=(d,t,s)=>(F(d,t,"read from private field"),s?s.call(d):t.get(d)),x=(d,t,s)=>t.has(d)?U("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(d):t.set(d,s);var g=(d,t,s)=>(F(d,t,"access private method"),s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var A,w,B;class T{constructor(t={}){x(this,w);v(this,"selectors");v(this,"spinBoxes");x(this,A,(t,s,r,l=0,e=0)=>{t==l||t<l?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1),e!==0&&(t==e||t>e?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))});v(this,"getValidDataNumber",(t,s)=>{const r=t.getAttribute(`data-${s}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)});const s={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...s,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),g(this,w,B).call(this)}}A=new WeakMap,w=new WeakSet,B=function(){this.spinBoxes.forEach(t=>{const s=t.querySelectorAll(`.${this.selectors.btn}`),r=s[0],l=s[1],e=t.querySelector(`.${this.selectors.input}`),o=this.getValidDataNumber(t,"step"),i=this.getValidDataNumber(t,"min"),a=this.getValidDataNumber(t,"max"),h=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(e.value)<=i&&(e.value=i.toFixed(o)),a!==0?(Number(e.value)>=a&&(e.value=a.toFixed(o)),a&&t.setAttribute("aria-valuemax",a.toFixed(o))):e.value=Number(e.value).toFixed(o),i&&t.setAttribute("aria-valuemin",i.toFixed(o)),p(this,A).call(this,Number(e.value),r,l,i,a),h(e.value);let c=null;const m=(u=1)=>{e.value=String(Math.abs(Number(e.value)));let n=parseFloat(e.value)||0;n=n+1*u/Math.pow(10,o),n>a&&a!==0&&(n=a),e.value=n.toFixed(o),p(this,A).call(this,Number(e.value),r,l,i,a),h(e.value)},b=(u=1)=>{e.value=String(Math.abs(Number(e.value)));let n=parseFloat(e.value)||0;n=n-1*u/Math.pow(10,o),n<i&&(n=i),e.value=n.toFixed(o),p(this,A).call(this,Number(e.value),r,l,i,a),h(e.value)},f=(u,n=150)=>{c===null&&(c=window.setInterval(u,n))},L=()=>{c!==null&&(clearInterval(c),c=null)};l.addEventListener("mousedown",u=>{const n=u.shiftKey?3:1;f(()=>m(n))}),l.addEventListener("touchstart",()=>f(m)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{l.addEventListener(u,L)}),l.addEventListener("click",u=>{const n=u.shiftKey?3:1;c===null&&m(n)}),r.addEventListener("click",u=>{const n=u.shiftKey?3:1;c===null&&b(n)}),r.addEventListener("mousedown",u=>{const n=u.shiftKey?3:1;f(()=>b(n),100)}),r.addEventListener("touchstart",()=>f(b,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{r.addEventListener(u,L)}),e.addEventListener("keydown",u=>{const n=u.key,y=u.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(n)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(n.toLowerCase()))return;if(["e","+","-"].includes(n)){u.preventDefault();return}if(n==="ArrowUp"||n==="ArrowDown"){u.preventDefault();const N=parseFloat(e.value)||0,D=1*y/Math.pow(10,o);let $=n==="ArrowUp"?N+D:N-D;$<i&&($=i),e.value=$.toFixed(o),Number(e.value)<i&&(e.value=i.toFixed(o)),Number(e.value)>a&&a!==0&&(e.value=a.toFixed(o)),p(this,A).call(this,Number(e.value),r,l,i,a),h(e.value);return}const I=n===","?".":n,C=/^[0-9]$/.test(I),q=I===".",P=e.value.includes(".");(o===0&&!C||o>0&&!(C||q)||q&&P)&&u.preventDefault()}),e.addEventListener("change",()=>{Number(e.value)<i&&(e.value=i.toFixed(o)),Number(e.value)>a&&a!==0?e.value=a.toFixed(o):e.value=Number(e.value).toFixed(o),p(this,A).call(this,Number(e.value),r,l,i,a)})})};var k,K;class _{constructor(t={}){x(this,k);v(this,"selectors");v(this,"main");const s={main:"UIsw",label:"UIsw-label"};this.selectors={...s,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),g(this,k,K).call(this)}}k=new WeakSet,K=function(){this.main.forEach(t=>{const s=t.querySelector(`.${this.selectors.label}`),r=t.querySelector("input");s&&s.id&&t.setAttribute("aria-labelledby",s.id),r&&(r.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{r.checked=!r.checked,t.setAttribute("aria-checked",String(r.checked))}),t.addEventListener("keydown",e=>{e.key==="ArrowRight"?(r.checked=!0,l(String(r.checked)),e.preventDefault()):e.key==="ArrowLeft"&&(r.checked=!1,l(String(r.checked)),e.preventDefault())}));const l=e=>{t.setAttribute("aria-checked",String(e))}})};class E{constructor(t={}){v(this,"selectors");v(this,"main",null);v(this,"itemArrowInitialized",new WeakSet);v(this,"abortController",new AbortController);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,s){return Array.from(t).filter(r=>!s.some(l=>typeof l=="string"?r.classList.contains(l)||r.id===l:r===l))}filterSearch(t,s){const r=s.trim().toLowerCase();return t.filter(l=>{var i,a;const e=((i=l.dataset.value)==null?void 0:i.toLowerCase())||"",o=((a=l.textContent)==null?void 0:a.toLowerCase())||"";return e.includes(r)||o.includes(r)})}destroy(){E.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(r=>{const l=r.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!l)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(f){return console.warn("Not found:",f.message)}const e=r.querySelector(`.${this.selectors.selected}`),o=r.querySelector(`.${this.selectors.arrow}`),i=r.querySelector(`.${this.selectors.optionsList}`),a=r.querySelector(`.${this.selectors.search} input`);o&&o.addEventListener("click",()=>{this.toggle(r,i)},{signal:t}),e.addEventListener("click",()=>{this.toggle(r,i)},{signal:t}),r.addEventListener("click",()=>{this.itemsPosition(i)},{signal:t});const h=i.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(h,this.selectors.excludedItems),m=r.querySelector("[aria-selected='true']");m&&this.defaultSelect(r,m,e,l);var b=[];a&&a.addEventListener("input",f=>{const u=f.target.value.trim();e&&(b=this.filterSearch(c,u),u?(h.forEach(n=>n.remove()),b.forEach(n=>{var y;(y=i.querySelector(`.${this.selectors.optionsList} ul`))==null||y.appendChild(n)})):h.forEach(n=>{var y;(y=i.querySelector(`.${this.selectors.optionsList} ul`))==null||y.appendChild(n)}),this.itemArrow(r,i,e,l))}),this.itemArrow(r,i,e,l),this.items(r,i,c,e,l)},{signal:t})}itemArrow(t,s,r,l){if(this.itemArrowInitialized.has(t))return;this.itemArrowInitialized.add(t);let e=-1;const o=r.textContent?r.textContent:"",i=t.querySelector(`.${this.selectors.search} input`);t.addEventListener("keydown",a=>{i&&i.focus();const h=Array.from(s.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),m=c.length;if(m!==0)if(a.key==="ArrowDown"){a.preventDefault(),t.getAttribute("aria-expanded")==="false"&&this.toggle(t,s),e=(e+1)%m,r.textContent=c[e].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[e].setAttribute("aria-selected","true");const b=c[e].id||`${this.selectors.idPrefix}${e}`;t.setAttribute("aria-activedescendant",b),c[e].scrollIntoView({block:"nearest"})}else if(a.key==="ArrowUp"){a.preventDefault(),e=(e-1+m)%m,r.textContent=c[e].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[e].setAttribute("aria-selected","true");const b=c[e].id||`${this.selectors.idPrefix}${e}`;t.setAttribute("aria-activedescendant",b),c[e].scrollIntoView({block:"nearest"})}else if(a.key==="Enter")if(a.preventDefault(),e>=0){r.textContent=c[e].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[e].setAttribute("aria-selected","true");const b=c[e].id||`${this.selectors.idPrefix}${e}`;t.setAttribute("aria-activedescendant",b),l.value=String(c[e].dataset.value),this.costomEvent(t,l.value),this.close(t,s)}else this.toggle(t,s);else a.key==="Escape"&&(t.getAttribute("aria-activedescendant")||(r.textContent=o),this.close(t,s))})}itemsPosition(t){const s=t.querySelector('[aria-selected="true"]');s&&s.scrollIntoView({block:"nearest"})}items(t,s,r,l,e){r.forEach((o,i)=>{o.addEventListener("click",()=>{const a=r[i];if(a){l.textContent=a.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),a.setAttribute("aria-selected","true");const h=a.id||`${this.selectors.idPrefix}${i}`;t.setAttribute("aria-expanded","false"),t.setAttribute("aria-activedescendant",h),e.value=String(r[i].dataset.value),this.costomEvent(t,e.value),this.close(t,s)}})})}defaultSelect(t,s,r,l){s&&(l.setAttribute("value",s.dataset.value??""),r.textContent=s.textContent??"",t.setAttribute("aria-activedescendant",s.id||""))}costomEvent(t,s){t.dispatchEvent(new CustomEvent("change",{detail:{val:s},bubbles:!0}))}toggle(t,s){E.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 r=s.querySelector(`.${t.optionsList}`);r.hidden=!0,s.setAttribute("aria-expanded","false")})}initGlobalListener(t){document.addEventListener("click",s=>{const r=s.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||E.closeAll(t)},{signal:this.abortController.signal})}}var S,V;class G{constructor(t={}){x(this,S);v(this,"selectors");v(this,"groups");const s={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...s,...t},this.groups=document.querySelectorAll(`.${this.selectors.main}`),g(this,S,V).call(this)}}S=new WeakSet,V=function(){this.groups.forEach(t=>{const s=t.querySelectorAll(`.${this.selectors.btn}`);s.forEach(e=>{e.addEventListener("click",()=>{s.forEach(o=>{o.setAttribute("aria-checked","false"),o.setAttribute("tabindex","-1")}),e.setAttribute("aria-checked","true"),e.setAttribute("tabindex","0"),e.focus()}),e.addEventListener("keydown",o=>{let i=Array.from(s).indexOf(e);if(o.key==="ArrowRight"&&i++,o.key==="ArrowLeft"&&i--,i<0&&(i=s.length-1),i>=s.length&&(i=0),o.key==="Enter"){const h=r[i];h&&!h.disabled&&(r.forEach(c=>{c.checked=!1,c.removeAttribute("checked")}),h.checked=!0,h.setAttribute("checked",""),h.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:h.id,value:h.value},bubbles:!0}))),o.preventDefault();return}const a=s[i];a&&(s.forEach(h=>h.setAttribute("tabindex","-1")),a.setAttribute("tabindex","0"),a.focus())})});const r=t.querySelectorAll(`.${this.selectors.input}`);r.forEach((e,o)=>{const i=s[o];i&&(e.tabIndex=-1,i.setAttribute("role","radio"),i.setAttribute("aria-checked",String(e.checked)),i.setAttribute("tabindex",e.checked?"0":"-1"),e.disabled?i.setAttribute("aria-disabled","true"):i.removeAttribute("aria-disabled"),e.addEventListener("click",()=>{r.forEach(a=>{a.checked=!1,a.removeAttribute("checked")}),r[o].checked=!0,r[o].setAttribute("checked",""),e.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:e.id,value:e.value},bubbles:!0}))}),e.addEventListener("ui-button-group-change",a=>{console.log("detail:",a.detail)}))});const l=Array.from(r).find(e=>!e.checked&&!e.disabled);if(l){const e=t.querySelector(`label[for="${l.id}"]`);e&&e.setAttribute("tabindex","0")}})};exports.ButtonGroup=G;exports.Select=E;exports.SpinBox=T;exports.Switch=_;
1
+ "use strict";var T=Object.defineProperty;var B=h=>{throw TypeError(h)};var _=(h,e,t)=>e in h?T(h,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):h[e]=t;var f=(h,e,t)=>_(h,typeof e!="symbol"?e+"":e,t),F=(h,e,t)=>e.has(h)||B("Cannot "+t);var y=(h,e,t)=>(F(h,e,"read from private field"),t?t.call(h):e.get(h)),p=(h,e,t)=>e.has(h)?B("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(h):e.set(h,t);var x=(h,e,t)=>(F(h,e,"access private method"),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var g,k,K;class G{constructor(e={}){p(this,k);f(this,"selectors");f(this,"spinBoxes");p(this,g,(e,t,r,a=0,s=0)=>{e==a||e<a?(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))});f(this,"getValidDataNumber",(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)});const t={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...t,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),x(this,k,K).call(this)}}g=new WeakMap,k=new WeakSet,K=function(){this.spinBoxes.forEach(e=>{const t=e.querySelectorAll(`.${this.selectors.btn}`),r=t[0],a=t[1],s=e.querySelector(`.${this.selectors.input}`),i=this.getValidDataNumber(e,"step"),o=this.getValidDataNumber(e,"min"),l=this.getValidDataNumber(e,"max"),c=u=>{e.setAttribute("aria-valuenow",String(u)),e.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=o&&(s.value=o.toFixed(i)),l!==0?(Number(s.value)>=l&&(s.value=l.toFixed(i)),l&&e.setAttribute("aria-valuemax",l.toFixed(i))):s.value=Number(s.value).toFixed(i),o&&e.setAttribute("aria-valuemin",o.toFixed(i)),y(this,g).call(this,Number(s.value),r,a,o,l),c(s.value);let b=null;const d=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let n=parseFloat(s.value)||0;n=n+1*u/Math.pow(10,i),n>l&&l!==0&&(n=l),s.value=n.toFixed(i),y(this,g).call(this,Number(s.value),r,a,o,l),c(s.value)},m=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let n=parseFloat(s.value)||0;n=n-1*u/Math.pow(10,i),n<o&&(n=o),s.value=n.toFixed(i),y(this,g).call(this,Number(s.value),r,a,o,l),c(s.value)},v=(u,n=150)=>{b===null&&(b=window.setInterval(u,n))},A=()=>{b!==null&&(clearInterval(b),b=null)};a.addEventListener("mousedown",u=>{const n=u.shiftKey?3:1;v(()=>d(n))}),a.addEventListener("touchstart",()=>v(d)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{a.addEventListener(u,A)}),a.addEventListener("click",u=>{const n=u.shiftKey?3:1;b===null&&d(n)}),r.addEventListener("click",u=>{const n=u.shiftKey?3:1;b===null&&m(n)}),r.addEventListener("mousedown",u=>{const n=u.shiftKey?3:1;v(()=>m(n),100)}),r.addEventListener("touchstart",()=>v(m,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{r.addEventListener(u,A)}),s.addEventListener("keydown",u=>{const n=u.key,E=u.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(n)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(n.toLowerCase()))return;if(["e","+","-"].includes(n)){u.preventDefault();return}if(n==="ArrowUp"||n==="ArrowDown"){u.preventDefault();const U=parseFloat(s.value)||0,D=1*E/Math.pow(10,i);let $=n==="ArrowUp"?U+D:U-D;$<o&&($=o),s.value=$.toFixed(i),Number(s.value)<o&&(s.value=o.toFixed(i)),Number(s.value)>l&&l!==0&&(s.value=l.toFixed(i)),y(this,g).call(this,Number(s.value),r,a,o,l),c(s.value);return}const I=n===","?".":n,q=/^[0-9]$/.test(I),N=I===".",z=s.value.includes(".");(i===0&&!q||i>0&&!(q||N)||N&&z)&&u.preventDefault()}),s.addEventListener("change",()=>{Number(s.value)<o&&(s.value=o.toFixed(i)),Number(s.value)>l&&l!==0?s.value=l.toFixed(i):s.value=Number(s.value).toFixed(i),y(this,g).call(this,Number(s.value),r,a,o,l)})})};var S,V;class R{constructor(e={}){p(this,S);f(this,"selectors");f(this,"main");const t={main:"UIsw",label:"UIsw-label"};this.selectors={...t,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),x(this,S,V).call(this)}}S=new WeakSet,V=function(){this.main.forEach(e=>{const t=e.querySelector(`.${this.selectors.label}`),r=e.querySelector("input");t&&t.id&&e.setAttribute("aria-labelledby",t.id),r&&(r.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{r.checked=!r.checked,e.setAttribute("aria-checked",String(r.checked))}),e.addEventListener("keydown",s=>{s.key==="ArrowRight"?(r.checked=!0,a(String(r.checked)),s.preventDefault()):s.key==="ArrowLeft"&&(r.checked=!1,a(String(r.checked)),s.preventDefault())}));const a=s=>{e.setAttribute("aria-checked",String(s))}})};class w{constructor(e={},t=!1){f(this,"selectors");f(this,"main",null);f(this,"itemArrowInitialized",new WeakSet);f(this,"abortController",new AbortController);f(this,"dbug");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(a=>typeof a=="string"?r.classList.contains(a)||r.id===a:r===a))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(a=>{var o,l;const s=((o=a.dataset.value)==null?void 0:o.toLowerCase())||"",i=((l=a.textContent)==null?void 0:l.toLowerCase())||"";return s.includes(r)||i.includes(r)})}destroy(){w.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var t;this.abortController=new AbortController;const e=this.abortController.signal;(t=this.main)==null||t.forEach(r=>{const a=r.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 s=r.querySelector(`.${this.selectors.selected}`),i=r.querySelector(`.${this.selectors.arrow}`),o=r.querySelector(`.${this.selectors.optionsList}`),l=r.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(r,o)},{signal:e}),s.addEventListener("click",()=>{this.toggle(r,o)},{signal:e}),r.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const c=o.querySelectorAll(`.${this.selectors.items} ul li`),b=this.filterExcluded(c,this.selectors.excludedItems),d=r.querySelector("[aria-selected='true']");d&&this.defaultSelect(r,d,s,a);var m=[];l&&l.addEventListener("input",v=>{const u=v.target.value.trim();s&&(m=this.filterSearch(b,u),u?(c.forEach(n=>n.remove()),m.forEach(n=>{var E;(E=o.querySelector(`.${this.selectors.optionsList} ul`))==null||E.appendChild(n)})):c.forEach(n=>{var E;(E=o.querySelector(`.${this.selectors.optionsList} ul`))==null||E.appendChild(n)}),this.itemArrow(r,o,s,a,e))},{signal:e}),this.itemArrow(r,o,s,a,e),this.items(r,o,b,s,a,e)},{signal:e})}itemArrow(e,t,r,a,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const o=r.textContent?r.textContent:"",l=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",c=>{l&&l.focus();const b=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),d=this.filterExcluded(b,this.selectors.excludedItems),m=d.length;if(m!==0)if(c.key==="ArrowDown"){c.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),i=(i+1)%m,r.textContent=d[i].textContent,d.forEach(A=>A.removeAttribute("aria-selected")),d[i].setAttribute("aria-selected","true");const v=d[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),d[i].scrollIntoView({block:"nearest"})}else if(c.key==="ArrowUp"){c.preventDefault(),i=(i-1+m)%m,r.textContent=d[i].textContent,d.forEach(A=>A.removeAttribute("aria-selected")),d[i].setAttribute("aria-selected","true");const v=d[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),d[i].scrollIntoView({block:"nearest"})}else if(c.key==="Enter")if(c.preventDefault(),i>=0){r.textContent=d[i].textContent,d.forEach(A=>A.removeAttribute("aria-selected")),d[i].setAttribute("aria-selected","true");const v=d[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),a.value=String(d[i].dataset.value),this.costomEvent(e,a.value),this.close(e,t)}else this.toggle(e,t);else c.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=o),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,a,s,i){r.forEach((o,l)=>{o.addEventListener("click",()=>{const c=r[l];if(c){a.textContent=c.textContent,r.forEach(d=>d.removeAttribute("aria-selected")),c.setAttribute("aria-selected","true");const b=c.id||`${this.selectors.idPrefix}${l}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",b),s.value=String(r[l].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:i})})}defaultSelect(e,t,r,a){t&&(a.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){w.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))||w.closeAll(e)},{signal:this.abortController.signal})}}var C,P;class H{constructor(e={}){p(this,C);f(this,"selectors");f(this,"groups");const t={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...t,...e},this.groups=document.querySelectorAll(`.${this.selectors.main}`),x(this,C,P).call(this)}}C=new WeakSet,P=function(){this.groups.forEach(e=>{const t=e.querySelectorAll(`.${this.selectors.btn}`);t.forEach(s=>{s.addEventListener("click",()=>{t.forEach(i=>{i.setAttribute("aria-checked","false"),i.setAttribute("tabindex","-1")}),s.setAttribute("aria-checked","true"),s.setAttribute("tabindex","0"),s.focus()}),s.addEventListener("keydown",i=>{let o=Array.from(t).indexOf(s);if(i.key==="ArrowRight"&&o++,i.key==="ArrowLeft"&&o--,o<0&&(o=t.length-1),o>=t.length&&(o=0),i.key==="Enter"){const c=r[o];c&&!c.disabled&&(r.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),c.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:c.id,value:c.value},bubbles:!0}))),i.preventDefault();return}const l=t[o];l&&(t.forEach(c=>c.setAttribute("tabindex","-1")),l.setAttribute("tabindex","0"),l.focus())})});const r=e.querySelectorAll(`.${this.selectors.input}`);r.forEach((s,i)=>{const o=t[i];o&&(s.tabIndex=-1,o.setAttribute("role","radio"),o.setAttribute("aria-checked",String(s.checked)),o.setAttribute("tabindex",s.checked?"0":"-1"),s.disabled?o.setAttribute("aria-disabled","true"):o.removeAttribute("aria-disabled"),s.addEventListener("click",()=>{r.forEach(l=>{l.checked=!1,l.removeAttribute("checked")}),r[i].checked=!0,r[i].setAttribute("checked",""),s.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:s.id,value:s.value},bubbles:!0}))}),s.addEventListener("ui-button-group-change",l=>{console.log("detail:",l.detail)}))});const a=Array.from(r).find(s=>!s.checked&&!s.disabled);if(a){const s=e.querySelector(`label[for="${a.id}"]`);s&&s.setAttribute("tabindex","0")}})};var L,M;class O{constructor(e={},t=!1){p(this,L);f(this,"selectors");f(this,"buttons",null);f(this,"abortController",new AbortController);f(this,"dbug");this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),x(this,L,M).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}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}))}}L=new WeakSet,M=function(){var t;this.abortController=new AbortController;const e=this.abortController.signal;(t=this.buttons)==null||t.forEach(r=>{r.addEventListener("click",()=>{this.costomEvent(r,String(r.dataset.value))},{signal:e})})};exports.Button=O;exports.ButtonGroup=H;exports.Select=w;exports.SpinBox=G;exports.Switch=R;
package/dist/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export { SpinBox } from './SpinBox';
2
2
  export { Switch } from './Switch';
3
3
  export { Select } from './Select';
4
4
  export { ButtonGroup } from './ButtonGroup';
5
+ export { Button } from './Button';
package/dist/index.es.js CHANGED
@@ -1,81 +1,81 @@
1
- var z = Object.defineProperty;
2
- var U = (u) => {
3
- throw TypeError(u);
1
+ var _ = Object.defineProperty;
2
+ var F = (h) => {
3
+ throw TypeError(h);
4
4
  };
5
- var M = (u, t, s) => t in u ? z(u, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : u[t] = s;
6
- var v = (u, t, s) => M(u, typeof t != "symbol" ? t + "" : t, s), F = (u, t, s) => t.has(u) || U("Cannot " + s);
7
- var p = (u, t, s) => (F(u, t, "read from private field"), s ? s.call(u) : t.get(u)), x = (u, t, s) => t.has(u) ? U("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(u) : t.set(u, s);
8
- var E = (u, t, s) => (F(u, t, "access private method"), s);
9
- var A, k, B;
10
- class G {
11
- constructor(t = {}) {
12
- x(this, k);
13
- v(this, "selectors");
14
- v(this, "spinBoxes");
15
- x(this, A, (t, s, r, l = 0, e = 0) => {
16
- t == l || t < l ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1), e !== 0 && (t == e || t > e ? (r.classList.add(this.selectors.disabledBtn), r.disabled = !0) : (r.classList.remove(this.selectors.disabledBtn), r.disabled = !1));
5
+ var T = (h, e, t) => e in h ? _(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
6
+ var f = (h, e, t) => T(h, typeof e != "symbol" ? e + "" : e, t), B = (h, e, t) => e.has(h) || F("Cannot " + t);
7
+ var y = (h, e, t) => (B(h, e, "read from private field"), t ? t.call(h) : e.get(h)), p = (h, e, t) => e.has(h) ? F("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(h) : e.set(h, t);
8
+ var x = (h, e, t) => (B(h, e, "access private method"), t);
9
+ var E, k, K;
10
+ class H {
11
+ constructor(e = {}) {
12
+ p(this, k);
13
+ f(this, "selectors");
14
+ f(this, "spinBoxes");
15
+ p(this, E, (e, t, r, a = 0, s = 0) => {
16
+ e == a || e < a ? (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));
17
17
  });
18
- v(this, "getValidDataNumber", (t, s) => {
19
- const r = t.getAttribute(`data-${s}`);
18
+ f(this, "getValidDataNumber", (e, t) => {
19
+ const r = e.getAttribute(`data-${t}`);
20
20
  return r === null || r.trim() === "" || isNaN(Number(r)) ? 0 : Number(r);
21
21
  });
22
- const s = {
22
+ const t = {
23
23
  main: "UIsp",
24
24
  btn: "UIsp__btn",
25
25
  input: "UIsp__input",
26
26
  disabledBtn: "disabled"
27
27
  };
28
- this.selectors = { ...s, ...t }, this.spinBoxes = document.querySelectorAll(
28
+ this.selectors = { ...t, ...e }, this.spinBoxes = document.querySelectorAll(
29
29
  `.${this.selectors.main}`
30
- ), E(this, k, B).call(this);
30
+ ), x(this, k, K).call(this);
31
31
  }
32
32
  }
33
- A = new WeakMap(), k = new WeakSet(), B = function() {
34
- this.spinBoxes.forEach((t) => {
35
- const s = t.querySelectorAll(
33
+ E = new WeakMap(), k = new WeakSet(), K = function() {
34
+ this.spinBoxes.forEach((e) => {
35
+ const t = e.querySelectorAll(
36
36
  `.${this.selectors.btn}`
37
- ), r = s[0], l = s[1], e = t.querySelector(
37
+ ), r = t[0], a = t[1], s = e.querySelector(
38
38
  `.${this.selectors.input}`
39
- ), o = this.getValidDataNumber(t, "step"), i = this.getValidDataNumber(t, "min"), a = this.getValidDataNumber(t, "max"), h = (d) => {
40
- t.setAttribute("aria-valuenow", String(d)), t.setAttribute("aria-valuetext", `${d} items`);
39
+ ), i = this.getValidDataNumber(e, "step"), o = this.getValidDataNumber(e, "min"), l = this.getValidDataNumber(e, "max"), c = (u) => {
40
+ e.setAttribute("aria-valuenow", String(u)), e.setAttribute("aria-valuetext", `${u} items`);
41
41
  };
42
- Number(e.value) <= i && (e.value = i.toFixed(o)), a !== 0 ? (Number(e.value) >= a && (e.value = a.toFixed(o)), a && t.setAttribute("aria-valuemax", a.toFixed(o))) : e.value = Number(e.value).toFixed(o), i && t.setAttribute("aria-valuemin", i.toFixed(o)), p(this, A).call(this, Number(e.value), r, l, i, a), h(e.value);
43
- let c = null;
44
- const m = (d = 1) => {
45
- e.value = String(Math.abs(Number(e.value)));
46
- let n = parseFloat(e.value) || 0;
47
- n = n + 1 * d / Math.pow(10, o), n > a && a !== 0 && (n = a), e.value = n.toFixed(o), p(this, A).call(this, Number(e.value), r, l, i, a), h(e.value);
48
- }, b = (d = 1) => {
49
- e.value = String(Math.abs(Number(e.value)));
50
- let n = parseFloat(e.value) || 0;
51
- n = n - 1 * d / Math.pow(10, o), n < i && (n = i), e.value = n.toFixed(o), p(this, A).call(this, Number(e.value), r, l, i, a), h(e.value);
52
- }, f = (d, n = 150) => {
53
- c === null && (c = window.setInterval(d, n));
54
- }, L = () => {
55
- c !== null && (clearInterval(c), c = null);
42
+ Number(s.value) <= o && (s.value = o.toFixed(i)), l !== 0 ? (Number(s.value) >= l && (s.value = l.toFixed(i)), l && e.setAttribute("aria-valuemax", l.toFixed(i))) : s.value = Number(s.value).toFixed(i), o && e.setAttribute("aria-valuemin", o.toFixed(i)), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
43
+ let b = null;
44
+ const d = (u = 1) => {
45
+ s.value = String(Math.abs(Number(s.value)));
46
+ let n = parseFloat(s.value) || 0;
47
+ n = n + 1 * u / Math.pow(10, i), n > l && l !== 0 && (n = l), s.value = n.toFixed(i), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
48
+ }, m = (u = 1) => {
49
+ s.value = String(Math.abs(Number(s.value)));
50
+ let n = parseFloat(s.value) || 0;
51
+ n = n - 1 * u / Math.pow(10, i), n < o && (n = o), s.value = n.toFixed(i), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
52
+ }, v = (u, n = 150) => {
53
+ b === null && (b = window.setInterval(u, n));
54
+ }, A = () => {
55
+ b !== null && (clearInterval(b), b = null);
56
56
  };
57
- l.addEventListener("mousedown", (d) => {
58
- const n = d.shiftKey ? 3 : 1;
59
- f(() => m(n));
60
- }), l.addEventListener("touchstart", () => f(m)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
61
- (d) => {
62
- l.addEventListener(d, L);
57
+ a.addEventListener("mousedown", (u) => {
58
+ const n = u.shiftKey ? 3 : 1;
59
+ v(() => d(n));
60
+ }), a.addEventListener("touchstart", () => v(d)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
61
+ (u) => {
62
+ a.addEventListener(u, A);
63
63
  }
64
- ), l.addEventListener("click", (d) => {
65
- const n = d.shiftKey ? 3 : 1;
66
- c === null && m(n);
67
- }), r.addEventListener("click", (d) => {
68
- const n = d.shiftKey ? 3 : 1;
69
- c === null && b(n);
70
- }), r.addEventListener("mousedown", (d) => {
71
- const n = d.shiftKey ? 3 : 1;
72
- f(() => b(n), 100);
73
- }), r.addEventListener("touchstart", () => f(b, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
74
- (d) => {
75
- r.addEventListener(d, L);
64
+ ), a.addEventListener("click", (u) => {
65
+ const n = u.shiftKey ? 3 : 1;
66
+ b === null && d(n);
67
+ }), r.addEventListener("click", (u) => {
68
+ const n = u.shiftKey ? 3 : 1;
69
+ b === null && m(n);
70
+ }), r.addEventListener("mousedown", (u) => {
71
+ const n = u.shiftKey ? 3 : 1;
72
+ v(() => m(n), 100);
73
+ }), r.addEventListener("touchstart", () => v(m, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
74
+ (u) => {
75
+ r.addEventListener(u, A);
76
76
  }
77
- ), e.addEventListener("keydown", (d) => {
78
- const n = d.key, y = d.shiftKey ? 3 : 1;
77
+ ), s.addEventListener("keydown", (u) => {
78
+ const n = u.key, g = u.shiftKey ? 3 : 1;
79
79
  if ([
80
80
  "Backspace",
81
81
  "Delete",
@@ -85,61 +85,63 @@ A = new WeakMap(), k = new WeakSet(), B = function() {
85
85
  "Enter",
86
86
  "Home",
87
87
  "End"
88
- ].includes(n) || (d.ctrlKey || d.metaKey) && ["a", "c", "v", "x"].includes(n.toLowerCase()))
88
+ ].includes(n) || (u.ctrlKey || u.metaKey) && ["a", "c", "v", "x"].includes(n.toLowerCase()))
89
89
  return;
90
90
  if (["e", "+", "-"].includes(n)) {
91
- d.preventDefault();
91
+ u.preventDefault();
92
92
  return;
93
93
  }
94
94
  if (n === "ArrowUp" || n === "ArrowDown") {
95
- d.preventDefault();
96
- const N = parseFloat(e.value) || 0, D = 1 * y / Math.pow(10, o);
97
- let $ = n === "ArrowUp" ? N + D : N - D;
98
- $ < i && ($ = i), e.value = $.toFixed(o), Number(e.value) < i && (e.value = i.toFixed(o)), Number(e.value) > a && a !== 0 && (e.value = a.toFixed(o)), p(this, A).call(this, Number(e.value), r, l, i, a), h(e.value);
95
+ u.preventDefault();
96
+ const U = parseFloat(s.value) || 0, D = 1 * g / Math.pow(10, i);
97
+ let $ = n === "ArrowUp" ? U + D : U - D;
98
+ $ < o && ($ = o), s.value = $.toFixed(i), Number(s.value) < o && (s.value = o.toFixed(i)), Number(s.value) > l && l !== 0 && (s.value = l.toFixed(i)), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
99
99
  return;
100
100
  }
101
- const I = n === "," ? "." : n, C = /^[0-9]$/.test(I), q = I === ".", P = e.value.includes(".");
102
- (o === 0 && !C || o > 0 && !(C || q) || q && P) && d.preventDefault();
103
- }), e.addEventListener("change", () => {
104
- Number(e.value) < i && (e.value = i.toFixed(o)), Number(e.value) > a && a !== 0 ? e.value = a.toFixed(o) : e.value = Number(e.value).toFixed(o), p(this, A).call(this, Number(e.value), r, l, i, a);
101
+ const I = n === "," ? "." : n, q = /^[0-9]$/.test(I), N = I === ".", M = s.value.includes(".");
102
+ (i === 0 && !q || i > 0 && !(q || N) || N && M) && u.preventDefault();
103
+ }), s.addEventListener("change", () => {
104
+ Number(s.value) < o && (s.value = o.toFixed(i)), Number(s.value) > l && l !== 0 ? s.value = l.toFixed(i) : s.value = Number(s.value).toFixed(i), y(this, E).call(this, Number(s.value), r, a, o, l);
105
105
  });
106
106
  });
107
107
  };
108
- var w, K;
109
- class R {
110
- constructor(t = {}) {
111
- x(this, w);
112
- v(this, "selectors");
113
- v(this, "main");
114
- const s = {
108
+ var S, V;
109
+ class O {
110
+ constructor(e = {}) {
111
+ p(this, S);
112
+ f(this, "selectors");
113
+ f(this, "main");
114
+ const t = {
115
115
  main: "UIsw",
116
116
  label: "UIsw-label"
117
117
  };
118
- this.selectors = { ...s, ...t }, this.main = document.querySelectorAll(
118
+ this.selectors = { ...t, ...e }, this.main = document.querySelectorAll(
119
119
  `.${this.selectors.main}`
120
- ), E(this, w, K).call(this);
120
+ ), x(this, S, V).call(this);
121
121
  }
122
122
  }
123
- w = new WeakSet(), K = function() {
124
- this.main.forEach((t) => {
125
- const s = t.querySelector(`.${this.selectors.label}`), r = t.querySelector("input");
126
- s && s.id && t.setAttribute("aria-labelledby", s.id), r && (r.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener("click", () => {
127
- r.checked = !r.checked, t.setAttribute("aria-checked", String(r.checked));
128
- }), t.addEventListener("keydown", (e) => {
129
- e.key === "ArrowRight" ? (r.checked = !0, l(String(r.checked)), e.preventDefault()) : e.key === "ArrowLeft" && (r.checked = !1, l(String(r.checked)), e.preventDefault());
123
+ S = new WeakSet(), V = function() {
124
+ this.main.forEach((e) => {
125
+ const t = e.querySelector(`.${this.selectors.label}`), r = e.querySelector("input");
126
+ t && t.id && e.setAttribute("aria-labelledby", t.id), r && (r.checked ? e.setAttribute("aria-checked", "true") : e.setAttribute("aria-checked", "false"), e.addEventListener("click", () => {
127
+ r.checked = !r.checked, e.setAttribute("aria-checked", String(r.checked));
128
+ }), e.addEventListener("keydown", (s) => {
129
+ s.key === "ArrowRight" ? (r.checked = !0, a(String(r.checked)), s.preventDefault()) : s.key === "ArrowLeft" && (r.checked = !1, a(String(r.checked)), s.preventDefault());
130
130
  }));
131
- const l = (e) => {
132
- t.setAttribute("aria-checked", String(e));
131
+ const a = (s) => {
132
+ e.setAttribute("aria-checked", String(s));
133
133
  };
134
134
  });
135
135
  };
136
- class g {
137
- constructor(t = {}) {
138
- v(this, "selectors");
139
- v(this, "main", null);
140
- v(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
141
- v(this, "abortController", new AbortController());
142
- const s = {
136
+ class w {
137
+ constructor(e = {}, t = !1) {
138
+ f(this, "selectors");
139
+ f(this, "main", null);
140
+ f(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
141
+ f(this, "abortController", new AbortController());
142
+ f(this, "dbug");
143
+ this.dbug = t;
144
+ const r = {
143
145
  idPrefix: "UI-option-",
144
146
  main: "UIselect",
145
147
  selected: "UIselect-selected",
@@ -150,255 +152,314 @@ class g {
150
152
  excludedItems: ["divider", "test"]
151
153
  // class=""
152
154
  };
153
- this.selectors = { ...s, ...t }, this.main = document.querySelectorAll(
155
+ this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
154
156
  `.${this.selectors.main}`
155
157
  ), this.event(), this.initGlobalListener(this.selectors);
156
158
  }
157
- filterExcluded(t, s) {
158
- return Array.from(t).filter((r) => !s.some((l) => typeof l == "string" ? r.classList.contains(l) || r.id === l : r === l));
159
+ filterExcluded(e, t) {
160
+ return Array.from(e).filter((r) => !t.some((a) => typeof a == "string" ? r.classList.contains(a) || r.id === a : r === a));
159
161
  }
160
- filterSearch(t, s) {
161
- const r = s.trim().toLowerCase();
162
- return t.filter((l) => {
163
- var i, a;
164
- const e = ((i = l.dataset.value) == null ? void 0 : i.toLowerCase()) || "", o = ((a = l.textContent) == null ? void 0 : a.toLowerCase()) || "";
165
- return e.includes(r) || o.includes(r);
162
+ filterSearch(e, t) {
163
+ const r = t.trim().toLowerCase();
164
+ return e.filter((a) => {
165
+ var o, l;
166
+ const s = ((o = a.dataset.value) == null ? void 0 : o.toLowerCase()) || "", i = ((l = a.textContent) == null ? void 0 : l.toLowerCase()) || "";
167
+ return s.includes(r) || i.includes(r);
166
168
  });
167
169
  }
168
170
  destroy() {
169
- g.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
171
+ w.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
170
172
  }
171
173
  event() {
172
- var s;
174
+ var t;
173
175
  this.abortController = new AbortController();
174
- const t = this.abortController.signal;
175
- (s = this.main) == null || s.forEach(
176
+ const e = this.abortController.signal;
177
+ (t = this.main) == null || t.forEach(
176
178
  (r) => {
177
- const l = r.querySelector(
179
+ const a = r.querySelector(
178
180
  `.${this.selectors.main} input[type='hidden']`
179
181
  );
180
182
  try {
181
- if (!l)
183
+ if (!a)
182
184
  throw new Error('<input type="hidden" name="YouUniqueId">');
183
- } catch (f) {
184
- return console.warn("Not found:", f.message);
185
+ } catch (v) {
186
+ return console.warn("Not found:", v.message);
185
187
  }
186
- const e = r.querySelector(
188
+ const s = r.querySelector(
187
189
  `.${this.selectors.selected}`
188
- ), o = r.querySelector(
189
- `.${this.selectors.arrow}`
190
190
  ), i = r.querySelector(
191
+ `.${this.selectors.arrow}`
192
+ ), o = r.querySelector(
191
193
  `.${this.selectors.optionsList}`
192
- ), a = r.querySelector(
194
+ ), l = r.querySelector(
193
195
  `.${this.selectors.search} input`
194
196
  );
195
- o && o.addEventListener(
197
+ i && i.addEventListener(
196
198
  "click",
197
199
  () => {
198
- this.toggle(r, i);
200
+ this.toggle(r, o);
199
201
  },
200
- { signal: t }
201
- ), e.addEventListener(
202
+ { signal: e }
203
+ ), s.addEventListener(
202
204
  "click",
203
205
  () => {
204
- this.toggle(r, i);
206
+ this.toggle(r, o);
205
207
  },
206
- { signal: t }
208
+ { signal: e }
207
209
  ), r.addEventListener(
208
210
  "click",
209
211
  () => {
210
- this.itemsPosition(i);
212
+ this.itemsPosition(o);
211
213
  },
212
- { signal: t }
214
+ { signal: e }
213
215
  );
214
- const h = i.querySelectorAll(
216
+ const c = o.querySelectorAll(
215
217
  `.${this.selectors.items} ul li`
216
- ), c = this.filterExcluded(
217
- h,
218
+ ), b = this.filterExcluded(
219
+ c,
218
220
  this.selectors.excludedItems
219
- ), m = r.querySelector(
221
+ ), d = r.querySelector(
220
222
  "[aria-selected='true']"
221
223
  );
222
- m && this.defaultSelect(r, m, e, l);
223
- var b = [];
224
- a && a.addEventListener("input", (f) => {
225
- const d = f.target.value.trim();
226
- e && (b = this.filterSearch(c, d), d ? (h.forEach((n) => n.remove()), b.forEach((n) => {
227
- var y;
228
- (y = i.querySelector(`.${this.selectors.optionsList} ul`)) == null || y.appendChild(n);
229
- })) : h.forEach((n) => {
230
- var y;
231
- (y = i.querySelector(`.${this.selectors.optionsList} ul`)) == null || y.appendChild(n);
232
- }), this.itemArrow(r, i, e, l));
233
- }), this.itemArrow(r, i, e, l), this.items(r, i, c, e, l);
224
+ d && this.defaultSelect(r, d, s, a);
225
+ var m = [];
226
+ l && l.addEventListener(
227
+ "input",
228
+ (v) => {
229
+ const u = v.target.value.trim();
230
+ s && (m = this.filterSearch(b, u), u ? (c.forEach((n) => n.remove()), m.forEach((n) => {
231
+ var g;
232
+ (g = o.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(n);
233
+ })) : c.forEach((n) => {
234
+ var g;
235
+ (g = o.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(n);
236
+ }), this.itemArrow(r, o, s, a, e));
237
+ },
238
+ { signal: e }
239
+ ), this.itemArrow(r, o, s, a, e), this.items(r, o, b, s, a, e);
234
240
  },
235
- { signal: t }
241
+ { signal: e }
236
242
  );
237
243
  }
238
- itemArrow(t, s, r, l) {
239
- if (this.itemArrowInitialized.has(t)) return;
240
- this.itemArrowInitialized.add(t);
241
- let e = -1;
242
- const o = r.textContent ? r.textContent : "", i = t.querySelector(
244
+ itemArrow(e, t, r, a, s) {
245
+ if (this.itemArrowInitialized.has(e)) return;
246
+ this.itemArrowInitialized.add(e);
247
+ let i = -1;
248
+ const o = r.textContent ? r.textContent : "", l = e.querySelector(
243
249
  `.${this.selectors.search} input`
244
250
  );
245
- t.addEventListener("keydown", (a) => {
246
- i && i.focus();
247
- const h = Array.from(
248
- s.querySelectorAll(`.${this.selectors.optionsList} ul li`)
249
- ), c = this.filterExcluded(
250
- h,
251
- this.selectors.excludedItems
252
- ), m = c.length;
253
- if (m !== 0)
254
- if (a.key === "ArrowDown") {
255
- a.preventDefault(), t.getAttribute("aria-expanded") === "false" && this.toggle(t, s), e = (e + 1) % m, r.textContent = c[e].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[e].setAttribute("aria-selected", "true");
256
- const b = c[e].id || `${this.selectors.idPrefix}${e}`;
257
- t.setAttribute("aria-activedescendant", b), c[e].scrollIntoView({ block: "nearest" });
258
- } else if (a.key === "ArrowUp") {
259
- a.preventDefault(), e = (e - 1 + m) % m, r.textContent = c[e].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[e].setAttribute("aria-selected", "true");
260
- const b = c[e].id || `${this.selectors.idPrefix}${e}`;
261
- t.setAttribute("aria-activedescendant", b), c[e].scrollIntoView({ block: "nearest" });
262
- } else if (a.key === "Enter")
263
- if (a.preventDefault(), e >= 0) {
264
- r.textContent = c[e].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[e].setAttribute("aria-selected", "true");
265
- const b = c[e].id || `${this.selectors.idPrefix}${e}`;
266
- t.setAttribute("aria-activedescendant", b), l.value = String(c[e].dataset.value), this.costomEvent(t, l.value), this.close(t, s);
267
- } else
268
- this.toggle(t, s);
269
- else a.key === "Escape" && (t.getAttribute("aria-activedescendant") || (r.textContent = o), this.close(t, s));
270
- });
251
+ e.addEventListener(
252
+ "keydown",
253
+ (c) => {
254
+ l && l.focus();
255
+ const b = Array.from(
256
+ t.querySelectorAll(`.${this.selectors.optionsList} ul li`)
257
+ ), d = this.filterExcluded(
258
+ b,
259
+ this.selectors.excludedItems
260
+ ), m = d.length;
261
+ if (m !== 0)
262
+ if (c.key === "ArrowDown") {
263
+ c.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), i = (i + 1) % m, r.textContent = d[i].textContent, d.forEach((A) => A.removeAttribute("aria-selected")), d[i].setAttribute("aria-selected", "true");
264
+ const v = d[i].id || `${this.selectors.idPrefix}${i}`;
265
+ e.setAttribute("aria-activedescendant", v), d[i].scrollIntoView({ block: "nearest" });
266
+ } else if (c.key === "ArrowUp") {
267
+ c.preventDefault(), i = (i - 1 + m) % m, r.textContent = d[i].textContent, d.forEach((A) => A.removeAttribute("aria-selected")), d[i].setAttribute("aria-selected", "true");
268
+ const v = d[i].id || `${this.selectors.idPrefix}${i}`;
269
+ e.setAttribute("aria-activedescendant", v), d[i].scrollIntoView({ block: "nearest" });
270
+ } else if (c.key === "Enter")
271
+ if (c.preventDefault(), i >= 0) {
272
+ r.textContent = d[i].textContent, d.forEach((A) => A.removeAttribute("aria-selected")), d[i].setAttribute("aria-selected", "true");
273
+ const v = d[i].id || `${this.selectors.idPrefix}${i}`;
274
+ e.setAttribute("aria-activedescendant", v), a.value = String(d[i].dataset.value), this.costomEvent(e, a.value), this.close(e, t);
275
+ } else
276
+ this.toggle(e, t);
277
+ else c.key === "Escape" && (e.getAttribute("aria-activedescendant") || (r.textContent = o), this.close(e, t));
278
+ },
279
+ { signal: s }
280
+ );
271
281
  }
272
- itemsPosition(t) {
273
- const s = t.querySelector(
282
+ itemsPosition(e) {
283
+ const t = e.querySelector(
274
284
  '[aria-selected="true"]'
275
285
  );
276
- s && s.scrollIntoView({ block: "nearest" });
286
+ t && t.scrollIntoView({ block: "nearest" });
277
287
  }
278
- items(t, s, r, l, e) {
279
- r.forEach((o, i) => {
280
- o.addEventListener("click", () => {
281
- const a = r[i];
282
- if (a) {
283
- l.textContent = a.textContent, r.forEach((c) => c.removeAttribute("aria-selected")), a.setAttribute("aria-selected", "true");
284
- const h = a.id || `${this.selectors.idPrefix}${i}`;
285
- t.setAttribute("aria-expanded", "false"), t.setAttribute("aria-activedescendant", h), e.value = String(r[i].dataset.value), this.costomEvent(t, e.value), this.close(t, s);
286
- }
287
- });
288
+ items(e, t, r, a, s, i) {
289
+ r.forEach((o, l) => {
290
+ o.addEventListener(
291
+ "click",
292
+ () => {
293
+ const c = r[l];
294
+ if (c) {
295
+ a.textContent = c.textContent, r.forEach((d) => d.removeAttribute("aria-selected")), c.setAttribute("aria-selected", "true");
296
+ const b = c.id || `${this.selectors.idPrefix}${l}`;
297
+ e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", b), s.value = String(r[l].dataset.value), this.costomEvent(e, s.value), this.close(e, t);
298
+ }
299
+ },
300
+ { signal: i }
301
+ );
288
302
  });
289
303
  }
290
- defaultSelect(t, s, r, l) {
291
- s && (l.setAttribute("value", s.dataset.value ?? ""), r.textContent = s.textContent ?? "", t.setAttribute("aria-activedescendant", s.id || ""));
304
+ defaultSelect(e, t, r, a) {
305
+ t && (a.setAttribute("value", t.dataset.value ?? ""), r.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
292
306
  }
293
- costomEvent(t, s) {
294
- t.dispatchEvent(
295
- new CustomEvent("change", {
296
- detail: { val: s },
307
+ costomEvent(e, t) {
308
+ this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
309
+ new CustomEvent("ui-select-change", {
310
+ detail: { val: t },
297
311
  bubbles: !0
298
312
  })
299
313
  );
300
314
  }
301
- toggle(t, s) {
302
- g.closeAll(this.selectors), s.hidden ? (s.hidden = !1, t.setAttribute("aria-expanded", "true")) : this.close(t, s);
315
+ toggle(e, t) {
316
+ w.closeAll(this.selectors), t.hidden ? (t.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, t);
303
317
  }
304
- close(t, s) {
305
- s.hidden = !0, t.setAttribute("aria-expanded", "false");
318
+ close(e, t) {
319
+ t.hidden = !0, e.setAttribute("aria-expanded", "false");
306
320
  }
307
- static closeAll(t) {
308
- document.querySelectorAll(`.${t.main}`).forEach((s) => {
309
- const r = s.querySelector(`.${t.optionsList}`);
310
- r.hidden = !0, s.setAttribute("aria-expanded", "false");
321
+ static closeAll(e) {
322
+ document.querySelectorAll(`.${e.main}`).forEach((t) => {
323
+ const r = t.querySelector(`.${e.optionsList}`);
324
+ r.hidden = !0, t.setAttribute("aria-expanded", "false");
311
325
  });
312
326
  }
313
- initGlobalListener(t) {
327
+ initGlobalListener(e) {
314
328
  document.addEventListener(
315
329
  "click",
316
- (s) => {
317
- const r = s.target;
318
- [...document.querySelectorAll(`.${t.main}`)].some(
319
- (e) => e.contains(r)
320
- ) || g.closeAll(t);
330
+ (t) => {
331
+ const r = t.target;
332
+ [...document.querySelectorAll(`.${e.main}`)].some(
333
+ (s) => s.contains(r)
334
+ ) || w.closeAll(e);
321
335
  },
322
336
  { signal: this.abortController.signal }
323
337
  );
324
338
  }
325
339
  }
326
- var S, V;
327
- class H {
328
- constructor(t = {}) {
329
- x(this, S);
330
- v(this, "selectors");
331
- v(this, "groups");
332
- const s = {
340
+ var C, P;
341
+ class Q {
342
+ constructor(e = {}) {
343
+ p(this, C);
344
+ f(this, "selectors");
345
+ f(this, "groups");
346
+ const t = {
333
347
  main: "UIbg",
334
348
  btn: "UIbg-btn",
335
349
  input: "UIbg-input"
336
350
  };
337
- this.selectors = { ...s, ...t }, this.groups = document.querySelectorAll(
351
+ this.selectors = { ...t, ...e }, this.groups = document.querySelectorAll(
338
352
  `.${this.selectors.main}`
339
- ), E(this, S, V).call(this);
353
+ ), x(this, C, P).call(this);
340
354
  }
341
355
  }
342
- S = new WeakSet(), V = function() {
343
- this.groups.forEach((t) => {
344
- const s = t.querySelectorAll(
356
+ C = new WeakSet(), P = function() {
357
+ this.groups.forEach((e) => {
358
+ const t = e.querySelectorAll(
345
359
  `.${this.selectors.btn}`
346
360
  );
347
- s.forEach((e) => {
348
- e.addEventListener("click", () => {
349
- s.forEach((o) => {
350
- o.setAttribute("aria-checked", "false"), o.setAttribute("tabindex", "-1");
351
- }), e.setAttribute("aria-checked", "true"), e.setAttribute("tabindex", "0"), e.focus();
352
- }), e.addEventListener("keydown", (o) => {
353
- let i = Array.from(s).indexOf(e);
354
- if (o.key === "ArrowRight" && i++, o.key === "ArrowLeft" && i--, i < 0 && (i = s.length - 1), i >= s.length && (i = 0), o.key === "Enter") {
355
- const h = r[i];
356
- h && !h.disabled && (r.forEach((c) => {
357
- c.checked = !1, c.removeAttribute("checked");
358
- }), h.checked = !0, h.setAttribute("checked", ""), h.dispatchEvent(
361
+ t.forEach((s) => {
362
+ s.addEventListener("click", () => {
363
+ t.forEach((i) => {
364
+ i.setAttribute("aria-checked", "false"), i.setAttribute("tabindex", "-1");
365
+ }), s.setAttribute("aria-checked", "true"), s.setAttribute("tabindex", "0"), s.focus();
366
+ }), s.addEventListener("keydown", (i) => {
367
+ let o = Array.from(t).indexOf(s);
368
+ if (i.key === "ArrowRight" && o++, i.key === "ArrowLeft" && o--, o < 0 && (o = t.length - 1), o >= t.length && (o = 0), i.key === "Enter") {
369
+ const c = r[o];
370
+ c && !c.disabled && (r.forEach((b) => {
371
+ b.checked = !1, b.removeAttribute("checked");
372
+ }), c.checked = !0, c.setAttribute("checked", ""), c.dispatchEvent(
359
373
  new CustomEvent("ui-button-group-change", {
360
- detail: { id: h.id, value: h.value },
374
+ detail: { id: c.id, value: c.value },
361
375
  bubbles: !0
362
376
  })
363
- )), o.preventDefault();
377
+ )), i.preventDefault();
364
378
  return;
365
379
  }
366
- const a = s[i];
367
- a && (s.forEach((h) => h.setAttribute("tabindex", "-1")), a.setAttribute("tabindex", "0"), a.focus());
380
+ const l = t[o];
381
+ l && (t.forEach((c) => c.setAttribute("tabindex", "-1")), l.setAttribute("tabindex", "0"), l.focus());
368
382
  });
369
383
  });
370
- const r = t.querySelectorAll(
384
+ const r = e.querySelectorAll(
371
385
  `.${this.selectors.input}`
372
386
  );
373
- r.forEach((e, o) => {
374
- const i = s[o];
375
- i && (e.tabIndex = -1, i.setAttribute("role", "radio"), i.setAttribute("aria-checked", String(e.checked)), i.setAttribute("tabindex", e.checked ? "0" : "-1"), e.disabled ? i.setAttribute("aria-disabled", "true") : i.removeAttribute("aria-disabled"), e.addEventListener("click", () => {
376
- r.forEach((a) => {
377
- a.checked = !1, a.removeAttribute("checked");
378
- }), r[o].checked = !0, r[o].setAttribute("checked", ""), e.dispatchEvent(
387
+ r.forEach((s, i) => {
388
+ const o = t[i];
389
+ o && (s.tabIndex = -1, o.setAttribute("role", "radio"), o.setAttribute("aria-checked", String(s.checked)), o.setAttribute("tabindex", s.checked ? "0" : "-1"), s.disabled ? o.setAttribute("aria-disabled", "true") : o.removeAttribute("aria-disabled"), s.addEventListener("click", () => {
390
+ r.forEach((l) => {
391
+ l.checked = !1, l.removeAttribute("checked");
392
+ }), r[i].checked = !0, r[i].setAttribute("checked", ""), s.dispatchEvent(
379
393
  new CustomEvent("ui-button-group-change", {
380
- detail: { id: e.id, value: e.value },
394
+ detail: { id: s.id, value: s.value },
381
395
  bubbles: !0
382
396
  })
383
397
  );
384
- }), e.addEventListener("ui-button-group-change", (a) => {
385
- console.log("detail:", a.detail);
398
+ }), s.addEventListener("ui-button-group-change", (l) => {
399
+ console.log("detail:", l.detail);
386
400
  }));
387
401
  });
388
- const l = Array.from(r).find(
389
- (e) => !e.checked && !e.disabled
402
+ const a = Array.from(r).find(
403
+ (s) => !s.checked && !s.disabled
390
404
  );
391
- if (l) {
392
- const e = t.querySelector(
393
- `label[for="${l.id}"]`
405
+ if (a) {
406
+ const s = e.querySelector(
407
+ `label[for="${a.id}"]`
394
408
  );
395
- e && e.setAttribute("tabindex", "0");
409
+ s && s.setAttribute("tabindex", "0");
410
+ }
411
+ });
412
+ };
413
+ var L, z;
414
+ class W {
415
+ constructor(e = {}, t = !1) {
416
+ p(this, L);
417
+ f(this, "selectors");
418
+ f(this, "buttons", null);
419
+ f(this, "abortController", new AbortController());
420
+ f(this, "dbug");
421
+ this.dbug = t;
422
+ const r = {
423
+ main: "UIb"
424
+ };
425
+ this.selectors = { ...r, ...e }, this.buttons = document.querySelectorAll(
426
+ `.${this.selectors.main}`
427
+ ), x(this, L, z).call(this);
428
+ }
429
+ destroy() {
430
+ this.abortController && this.abortController.abort(), this.buttons = null;
431
+ }
432
+ costomEvent(e, t) {
433
+ if (!t || t === "undefined" || t.trim() === "") {
434
+ console.log('Button data-value="" Not set!');
435
+ return;
396
436
  }
437
+ this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
438
+ new CustomEvent("ui-button-change", {
439
+ detail: { val: t },
440
+ bubbles: !0
441
+ })
442
+ );
443
+ }
444
+ }
445
+ L = new WeakSet(), z = function() {
446
+ var t;
447
+ this.abortController = new AbortController();
448
+ const e = this.abortController.signal;
449
+ (t = this.buttons) == null || t.forEach((r) => {
450
+ r.addEventListener(
451
+ "click",
452
+ () => {
453
+ this.costomEvent(r, String(r.dataset.value));
454
+ },
455
+ { signal: e }
456
+ );
397
457
  });
398
458
  };
399
459
  export {
400
- H as ButtonGroup,
401
- g as Select,
402
- G as SpinBox,
403
- R as Switch
460
+ W as Button,
461
+ Q as ButtonGroup,
462
+ w as Select,
463
+ H as SpinBox,
464
+ O as Switch
404
465
  };
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
1
- (function(u,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(u=typeof globalThis<"u"?globalThis:u||self,h(u.UiElements={}))})(this,function(u){"use strict";var G=Object.defineProperty;var K=u=>{throw TypeError(u)};var R=(u,h,b)=>h in u?G(u,h,{enumerable:!0,configurable:!0,writable:!0,value:b}):u[h]=b;var A=(u,h,b)=>R(u,typeof h!="symbol"?h+"":h,b),V=(u,h,b)=>h.has(u)||K("Cannot "+b);var x=(u,h,b)=>(V(u,h,"read from private field"),b?b.call(u):h.get(u)),w=(u,h,b)=>h.has(u)?K("Cannot add the same private member more than once"):h instanceof WeakSet?h.add(u):h.set(u,b);var $=(u,h,b)=>(V(u,h,"access private method"),b);var p,k,P,S,T,L,M;class h{constructor(t={}){w(this,k);A(this,"selectors");A(this,"spinBoxes");w(this,p,(t,i,s,l=0,e=0)=>{t==l||t<l?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1),e!==0&&(t==e||t>e?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))});A(this,"getValidDataNumber",(t,i)=>{const s=t.getAttribute(`data-${i}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)});const i={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...i,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),$(this,k,P).call(this)}}p=new WeakMap,k=new WeakSet,P=function(){this.spinBoxes.forEach(t=>{const i=t.querySelectorAll(`.${this.selectors.btn}`),s=i[0],l=i[1],e=t.querySelector(`.${this.selectors.input}`),o=this.getValidDataNumber(t,"step"),r=this.getValidDataNumber(t,"min"),a=this.getValidDataNumber(t,"max"),f=d=>{t.setAttribute("aria-valuenow",String(d)),t.setAttribute("aria-valuetext",`${d} items`)};Number(e.value)<=r&&(e.value=r.toFixed(o)),a!==0?(Number(e.value)>=a&&(e.value=a.toFixed(o)),a&&t.setAttribute("aria-valuemax",a.toFixed(o))):e.value=Number(e.value).toFixed(o),r&&t.setAttribute("aria-valuemin",r.toFixed(o)),x(this,p).call(this,Number(e.value),s,l,r,a),f(e.value);let c=null;const y=(d=1)=>{e.value=String(Math.abs(Number(e.value)));let n=parseFloat(e.value)||0;n=n+1*d/Math.pow(10,o),n>a&&a!==0&&(n=a),e.value=n.toFixed(o),x(this,p).call(this,Number(e.value),s,l,r,a),f(e.value)},m=(d=1)=>{e.value=String(Math.abs(Number(e.value)));let n=parseFloat(e.value)||0;n=n-1*d/Math.pow(10,o),n<r&&(n=r),e.value=n.toFixed(o),x(this,p).call(this,Number(e.value),s,l,r,a),f(e.value)},v=(d,n=150)=>{c===null&&(c=window.setInterval(d,n))},I=()=>{c!==null&&(clearInterval(c),c=null)};l.addEventListener("mousedown",d=>{const n=d.shiftKey?3:1;v(()=>y(n))}),l.addEventListener("touchstart",()=>v(y)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(d=>{l.addEventListener(d,I)}),l.addEventListener("click",d=>{const n=d.shiftKey?3:1;c===null&&y(n)}),s.addEventListener("click",d=>{const n=d.shiftKey?3:1;c===null&&m(n)}),s.addEventListener("mousedown",d=>{const n=d.shiftKey?3:1;v(()=>m(n),100)}),s.addEventListener("touchstart",()=>v(m,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(d=>{s.addEventListener(d,I)}),e.addEventListener("keydown",d=>{const n=d.key,E=d.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(n)||(d.ctrlKey||d.metaKey)&&["a","c","v","x"].includes(n.toLowerCase()))return;if(["e","+","-"].includes(n)){d.preventDefault();return}if(n==="ArrowUp"||n==="ArrowDown"){d.preventDefault();const F=parseFloat(e.value)||0,B=1*E/Math.pow(10,o);let C=n==="ArrowUp"?F+B:F-B;C<r&&(C=r),e.value=C.toFixed(o),Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>a&&a!==0&&(e.value=a.toFixed(o)),x(this,p).call(this,Number(e.value),s,l,r,a),f(e.value);return}const N=n===","?".":n,U=/^[0-9]$/.test(N),D=N===".",_=e.value.includes(".");(o===0&&!U||o>0&&!(U||D)||D&&_)&&d.preventDefault()}),e.addEventListener("change",()=>{Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>a&&a!==0?e.value=a.toFixed(o):e.value=Number(e.value).toFixed(o),x(this,p).call(this,Number(e.value),s,l,r,a)})})};class b{constructor(t={}){w(this,S);A(this,"selectors");A(this,"main");const i={main:"UIsw",label:"UIsw-label"};this.selectors={...i,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),$(this,S,T).call(this)}}S=new WeakSet,T=function(){this.main.forEach(t=>{const i=t.querySelector(`.${this.selectors.label}`),s=t.querySelector("input");i&&i.id&&t.setAttribute("aria-labelledby",i.id),s&&(s.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{s.checked=!s.checked,t.setAttribute("aria-checked",String(s.checked))}),t.addEventListener("keydown",e=>{e.key==="ArrowRight"?(s.checked=!0,l(String(s.checked)),e.preventDefault()):e.key==="ArrowLeft"&&(s.checked=!1,l(String(s.checked)),e.preventDefault())}));const l=e=>{t.setAttribute("aria-checked",String(e))}})};class g{constructor(t={}){A(this,"selectors");A(this,"main",null);A(this,"itemArrowInitialized",new WeakSet);A(this,"abortController",new AbortController);const i={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={...i,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(t,i){return Array.from(t).filter(s=>!i.some(l=>typeof l=="string"?s.classList.contains(l)||s.id===l:s===l))}filterSearch(t,i){const s=i.trim().toLowerCase();return t.filter(l=>{var r,a;const e=((r=l.dataset.value)==null?void 0:r.toLowerCase())||"",o=((a=l.textContent)==null?void 0:a.toLowerCase())||"";return e.includes(s)||o.includes(s)})}destroy(){g.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var i;this.abortController=new AbortController;const t=this.abortController.signal;(i=this.main)==null||i.forEach(s=>{const l=s.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!l)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(v){return console.warn("Not found:",v.message)}const e=s.querySelector(`.${this.selectors.selected}`),o=s.querySelector(`.${this.selectors.arrow}`),r=s.querySelector(`.${this.selectors.optionsList}`),a=s.querySelector(`.${this.selectors.search} input`);o&&o.addEventListener("click",()=>{this.toggle(s,r)},{signal:t}),e.addEventListener("click",()=>{this.toggle(s,r)},{signal:t}),s.addEventListener("click",()=>{this.itemsPosition(r)},{signal:t});const f=r.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(f,this.selectors.excludedItems),y=s.querySelector("[aria-selected='true']");y&&this.defaultSelect(s,y,e,l);var m=[];a&&a.addEventListener("input",v=>{const d=v.target.value.trim();e&&(m=this.filterSearch(c,d),d?(f.forEach(n=>n.remove()),m.forEach(n=>{var E;(E=r.querySelector(`.${this.selectors.optionsList} ul`))==null||E.appendChild(n)})):f.forEach(n=>{var E;(E=r.querySelector(`.${this.selectors.optionsList} ul`))==null||E.appendChild(n)}),this.itemArrow(s,r,e,l))}),this.itemArrow(s,r,e,l),this.items(s,r,c,e,l)},{signal:t})}itemArrow(t,i,s,l){if(this.itemArrowInitialized.has(t))return;this.itemArrowInitialized.add(t);let e=-1;const o=s.textContent?s.textContent:"",r=t.querySelector(`.${this.selectors.search} input`);t.addEventListener("keydown",a=>{r&&r.focus();const f=Array.from(i.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(f,this.selectors.excludedItems),y=c.length;if(y!==0)if(a.key==="ArrowDown"){a.preventDefault(),t.getAttribute("aria-expanded")==="false"&&this.toggle(t,i),e=(e+1)%y,s.textContent=c[e].textContent,c.forEach(v=>v.removeAttribute("aria-selected")),c[e].setAttribute("aria-selected","true");const m=c[e].id||`${this.selectors.idPrefix}${e}`;t.setAttribute("aria-activedescendant",m),c[e].scrollIntoView({block:"nearest"})}else if(a.key==="ArrowUp"){a.preventDefault(),e=(e-1+y)%y,s.textContent=c[e].textContent,c.forEach(v=>v.removeAttribute("aria-selected")),c[e].setAttribute("aria-selected","true");const m=c[e].id||`${this.selectors.idPrefix}${e}`;t.setAttribute("aria-activedescendant",m),c[e].scrollIntoView({block:"nearest"})}else if(a.key==="Enter")if(a.preventDefault(),e>=0){s.textContent=c[e].textContent,c.forEach(v=>v.removeAttribute("aria-selected")),c[e].setAttribute("aria-selected","true");const m=c[e].id||`${this.selectors.idPrefix}${e}`;t.setAttribute("aria-activedescendant",m),l.value=String(c[e].dataset.value),this.costomEvent(t,l.value),this.close(t,i)}else this.toggle(t,i);else a.key==="Escape"&&(t.getAttribute("aria-activedescendant")||(s.textContent=o),this.close(t,i))})}itemsPosition(t){const i=t.querySelector('[aria-selected="true"]');i&&i.scrollIntoView({block:"nearest"})}items(t,i,s,l,e){s.forEach((o,r)=>{o.addEventListener("click",()=>{const a=s[r];if(a){l.textContent=a.textContent,s.forEach(c=>c.removeAttribute("aria-selected")),a.setAttribute("aria-selected","true");const f=a.id||`${this.selectors.idPrefix}${r}`;t.setAttribute("aria-expanded","false"),t.setAttribute("aria-activedescendant",f),e.value=String(s[r].dataset.value),this.costomEvent(t,e.value),this.close(t,i)}})})}defaultSelect(t,i,s,l){i&&(l.setAttribute("value",i.dataset.value??""),s.textContent=i.textContent??"",t.setAttribute("aria-activedescendant",i.id||""))}costomEvent(t,i){t.dispatchEvent(new CustomEvent("change",{detail:{val:i},bubbles:!0}))}toggle(t,i){g.closeAll(this.selectors),i.hidden?(i.hidden=!1,t.setAttribute("aria-expanded","true")):this.close(t,i)}close(t,i){i.hidden=!0,t.setAttribute("aria-expanded","false")}static closeAll(t){document.querySelectorAll(`.${t.main}`).forEach(i=>{const s=i.querySelector(`.${t.optionsList}`);s.hidden=!0,i.setAttribute("aria-expanded","false")})}initGlobalListener(t){document.addEventListener("click",i=>{const s=i.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(s))||g.closeAll(t)},{signal:this.abortController.signal})}}class z{constructor(t={}){w(this,L);A(this,"selectors");A(this,"groups");const i={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...i,...t},this.groups=document.querySelectorAll(`.${this.selectors.main}`),$(this,L,M).call(this)}}L=new WeakSet,M=function(){this.groups.forEach(t=>{const i=t.querySelectorAll(`.${this.selectors.btn}`);i.forEach(e=>{e.addEventListener("click",()=>{i.forEach(o=>{o.setAttribute("aria-checked","false"),o.setAttribute("tabindex","-1")}),e.setAttribute("aria-checked","true"),e.setAttribute("tabindex","0"),e.focus()}),e.addEventListener("keydown",o=>{let r=Array.from(i).indexOf(e);if(o.key==="ArrowRight"&&r++,o.key==="ArrowLeft"&&r--,r<0&&(r=i.length-1),r>=i.length&&(r=0),o.key==="Enter"){const f=s[r];f&&!f.disabled&&(s.forEach(c=>{c.checked=!1,c.removeAttribute("checked")}),f.checked=!0,f.setAttribute("checked",""),f.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:f.id,value:f.value},bubbles:!0}))),o.preventDefault();return}const a=i[r];a&&(i.forEach(f=>f.setAttribute("tabindex","-1")),a.setAttribute("tabindex","0"),a.focus())})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((e,o)=>{const r=i[o];r&&(e.tabIndex=-1,r.setAttribute("role","radio"),r.setAttribute("aria-checked",String(e.checked)),r.setAttribute("tabindex",e.checked?"0":"-1"),e.disabled?r.setAttribute("aria-disabled","true"):r.removeAttribute("aria-disabled"),e.addEventListener("click",()=>{s.forEach(a=>{a.checked=!1,a.removeAttribute("checked")}),s[o].checked=!0,s[o].setAttribute("checked",""),e.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:e.id,value:e.value},bubbles:!0}))}),e.addEventListener("ui-button-group-change",a=>{console.log("detail:",a.detail)}))});const l=Array.from(s).find(e=>!e.checked&&!e.disabled);if(l){const e=t.querySelector(`label[for="${l.id}"]`);e&&e.setAttribute("tabindex","0")}})},u.ButtonGroup=z,u.Select=g,u.SpinBox=h,u.Switch=b,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
1
+ (function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.UiElements={}))})(this,function(d){"use strict";var H=Object.defineProperty;var V=d=>{throw TypeError(d)};var O=(d,h,m)=>h in d?H(d,h,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[h]=m;var v=(d,h,m)=>O(d,typeof h!="symbol"?h+"":h,m),P=(d,h,m)=>h.has(d)||V("Cannot "+m);var w=(d,h,m)=>(P(d,h,"read from private field"),m?m.call(d):h.get(d)),x=(d,h,m)=>h.has(d)?V("Cannot add the same private member more than once"):h instanceof WeakSet?h.add(d):h.set(d,m);var S=(d,h,m)=>(P(d,h,"access private method"),m);var E,C,T,L,M,$,z,I,_;class h{constructor(e={}){x(this,C);v(this,"selectors");v(this,"spinBoxes");x(this,E,(e,r,s,n=0,t=0)=>{e==n||e<n?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1),t!==0&&(e==t||e>t?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))});v(this,"getValidDataNumber",(e,r)=>{const s=e.getAttribute(`data-${r}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)});const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),S(this,C,T).call(this)}}E=new WeakMap,C=new WeakSet,T=function(){this.spinBoxes.forEach(e=>{const r=e.querySelectorAll(`.${this.selectors.btn}`),s=r[0],n=r[1],t=e.querySelector(`.${this.selectors.input}`),i=this.getValidDataNumber(e,"step"),o=this.getValidDataNumber(e,"min"),l=this.getValidDataNumber(e,"max"),c=u=>{e.setAttribute("aria-valuenow",String(u)),e.setAttribute("aria-valuetext",`${u} items`)};Number(t.value)<=o&&(t.value=o.toFixed(i)),l!==0?(Number(t.value)>=l&&(t.value=l.toFixed(i)),l&&e.setAttribute("aria-valuemax",l.toFixed(i))):t.value=Number(t.value).toFixed(i),o&&e.setAttribute("aria-valuemin",o.toFixed(i)),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value);let b=null;const f=(u=1)=>{t.value=String(Math.abs(Number(t.value)));let a=parseFloat(t.value)||0;a=a+1*u/Math.pow(10,i),a>l&&l!==0&&(a=l),t.value=a.toFixed(i),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value)},g=(u=1)=>{t.value=String(Math.abs(Number(t.value)));let a=parseFloat(t.value)||0;a=a-1*u/Math.pow(10,i),a<o&&(a=o),t.value=a.toFixed(i),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value)},A=(u,a=150)=>{b===null&&(b=window.setInterval(u,a))},y=()=>{b!==null&&(clearInterval(b),b=null)};n.addEventListener("mousedown",u=>{const a=u.shiftKey?3:1;A(()=>f(a))}),n.addEventListener("touchstart",()=>A(f)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{n.addEventListener(u,y)}),n.addEventListener("click",u=>{const a=u.shiftKey?3:1;b===null&&f(a)}),s.addEventListener("click",u=>{const a=u.shiftKey?3:1;b===null&&g(a)}),s.addEventListener("mousedown",u=>{const a=u.shiftKey?3:1;A(()=>g(a),100)}),s.addEventListener("touchstart",()=>A(g,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{s.addEventListener(u,y)}),t.addEventListener("keydown",u=>{const a=u.key,p=u.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(a)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(a.toLowerCase()))return;if(["e","+","-"].includes(a)){u.preventDefault();return}if(a==="ArrowUp"||a==="ArrowDown"){u.preventDefault();const F=parseFloat(t.value)||0,K=1*p/Math.pow(10,i);let N=a==="ArrowUp"?F+K:F-K;N<o&&(N=o),t.value=N.toFixed(i),Number(t.value)<o&&(t.value=o.toFixed(i)),Number(t.value)>l&&l!==0&&(t.value=l.toFixed(i)),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value);return}const U=a===","?".":a,D=/^[0-9]$/.test(U),B=U===".",j=t.value.includes(".");(i===0&&!D||i>0&&!(D||B)||B&&j)&&u.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<o&&(t.value=o.toFixed(i)),Number(t.value)>l&&l!==0?t.value=l.toFixed(i):t.value=Number(t.value).toFixed(i),w(this,E).call(this,Number(t.value),s,n,o,l)})})};class m{constructor(e={}){x(this,L);v(this,"selectors");v(this,"main");const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),S(this,L,M).call(this)}}L=new WeakSet,M=function(){this.main.forEach(e=>{const r=e.querySelector(`.${this.selectors.label}`),s=e.querySelector("input");r&&r.id&&e.setAttribute("aria-labelledby",r.id),s&&(s.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{s.checked=!s.checked,e.setAttribute("aria-checked",String(s.checked))}),e.addEventListener("keydown",t=>{t.key==="ArrowRight"?(s.checked=!0,n(String(s.checked)),t.preventDefault()):t.key==="ArrowLeft"&&(s.checked=!1,n(String(s.checked)),t.preventDefault())}));const n=t=>{e.setAttribute("aria-checked",String(t))}})};class k{constructor(e={},r=!1){v(this,"selectors");v(this,"main",null);v(this,"itemArrowInitialized",new WeakSet);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=r;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,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,r){return Array.from(e).filter(s=>!r.some(n=>typeof n=="string"?s.classList.contains(n)||s.id===n:s===n))}filterSearch(e,r){const s=r.trim().toLowerCase();return e.filter(n=>{var o,l;const t=((o=n.dataset.value)==null?void 0:o.toLowerCase())||"",i=((l=n.textContent)==null?void 0:l.toLowerCase())||"";return t.includes(s)||i.includes(s)})}destroy(){k.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var r;this.abortController=new AbortController;const e=this.abortController.signal;(r=this.main)==null||r.forEach(s=>{const n=s.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!n)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(A){return console.warn("Not found:",A.message)}const t=s.querySelector(`.${this.selectors.selected}`),i=s.querySelector(`.${this.selectors.arrow}`),o=s.querySelector(`.${this.selectors.optionsList}`),l=s.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(s,o)},{signal:e}),t.addEventListener("click",()=>{this.toggle(s,o)},{signal:e}),s.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const c=o.querySelectorAll(`.${this.selectors.items} ul li`),b=this.filterExcluded(c,this.selectors.excludedItems),f=s.querySelector("[aria-selected='true']");f&&this.defaultSelect(s,f,t,n);var g=[];l&&l.addEventListener("input",A=>{const u=A.target.value.trim();t&&(g=this.filterSearch(b,u),u?(c.forEach(a=>a.remove()),g.forEach(a=>{var p;(p=o.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(a)})):c.forEach(a=>{var p;(p=o.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(a)}),this.itemArrow(s,o,t,n,e))},{signal:e}),this.itemArrow(s,o,t,n,e),this.items(s,o,b,t,n,e)},{signal:e})}itemArrow(e,r,s,n,t){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const o=s.textContent?s.textContent:"",l=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",c=>{l&&l.focus();const b=Array.from(r.querySelectorAll(`.${this.selectors.optionsList} ul li`)),f=this.filterExcluded(b,this.selectors.excludedItems),g=f.length;if(g!==0)if(c.key==="ArrowDown"){c.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,r),i=(i+1)%g,s.textContent=f[i].textContent,f.forEach(y=>y.removeAttribute("aria-selected")),f[i].setAttribute("aria-selected","true");const A=f[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",A),f[i].scrollIntoView({block:"nearest"})}else if(c.key==="ArrowUp"){c.preventDefault(),i=(i-1+g)%g,s.textContent=f[i].textContent,f.forEach(y=>y.removeAttribute("aria-selected")),f[i].setAttribute("aria-selected","true");const A=f[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",A),f[i].scrollIntoView({block:"nearest"})}else if(c.key==="Enter")if(c.preventDefault(),i>=0){s.textContent=f[i].textContent,f.forEach(y=>y.removeAttribute("aria-selected")),f[i].setAttribute("aria-selected","true");const A=f[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",A),n.value=String(f[i].dataset.value),this.costomEvent(e,n.value),this.close(e,r)}else this.toggle(e,r);else c.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(s.textContent=o),this.close(e,r))},{signal:t})}itemsPosition(e){const r=e.querySelector('[aria-selected="true"]');r&&r.scrollIntoView({block:"nearest"})}items(e,r,s,n,t,i){s.forEach((o,l)=>{o.addEventListener("click",()=>{const c=s[l];if(c){n.textContent=c.textContent,s.forEach(f=>f.removeAttribute("aria-selected")),c.setAttribute("aria-selected","true");const b=c.id||`${this.selectors.idPrefix}${l}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",b),t.value=String(s[l].dataset.value),this.costomEvent(e,t.value),this.close(e,r)}},{signal:i})})}defaultSelect(e,r,s,n){r&&(n.setAttribute("value",r.dataset.value??""),s.textContent=r.textContent??"",e.setAttribute("aria-activedescendant",r.id||""))}costomEvent(e,r){this.dbug&&console.log(`CostomEvent: { detail: ${r}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:r},bubbles:!0}))}toggle(e,r){k.closeAll(this.selectors),r.hidden?(r.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,r)}close(e,r){r.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(r=>{const s=r.querySelector(`.${e.optionsList}`);s.hidden=!0,r.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",r=>{const s=r.target;[...document.querySelectorAll(`.${e.main}`)].some(t=>t.contains(s))||k.closeAll(e)},{signal:this.abortController.signal})}}class G{constructor(e={}){x(this,$);v(this,"selectors");v(this,"groups");const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.groups=document.querySelectorAll(`.${this.selectors.main}`),S(this,$,z).call(this)}}$=new WeakSet,z=function(){this.groups.forEach(e=>{const r=e.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener("click",()=>{r.forEach(i=>{i.setAttribute("aria-checked","false"),i.setAttribute("tabindex","-1")}),t.setAttribute("aria-checked","true"),t.setAttribute("tabindex","0"),t.focus()}),t.addEventListener("keydown",i=>{let o=Array.from(r).indexOf(t);if(i.key==="ArrowRight"&&o++,i.key==="ArrowLeft"&&o--,o<0&&(o=r.length-1),o>=r.length&&(o=0),i.key==="Enter"){const c=s[o];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),c.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:c.id,value:c.value},bubbles:!0}))),i.preventDefault();return}const l=r[o];l&&(r.forEach(c=>c.setAttribute("tabindex","-1")),l.setAttribute("tabindex","0"),l.focus())})});const s=e.querySelectorAll(`.${this.selectors.input}`);s.forEach((t,i)=>{const o=r[i];o&&(t.tabIndex=-1,o.setAttribute("role","radio"),o.setAttribute("aria-checked",String(t.checked)),o.setAttribute("tabindex",t.checked?"0":"-1"),t.disabled?o.setAttribute("aria-disabled","true"):o.removeAttribute("aria-disabled"),t.addEventListener("click",()=>{s.forEach(l=>{l.checked=!1,l.removeAttribute("checked")}),s[i].checked=!0,s[i].setAttribute("checked",""),t.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:t.id,value:t.value},bubbles:!0}))}),t.addEventListener("ui-button-group-change",l=>{console.log("detail:",l.detail)}))});const n=Array.from(s).find(t=>!t.checked&&!t.disabled);if(n){const t=e.querySelector(`label[for="${n.id}"]`);t&&t.setAttribute("tabindex","0")}})};class R{constructor(e={},r=!1){x(this,I);v(this,"selectors");v(this,"buttons",null);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=r;const s={main:"UIb"};this.selectors={...s,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),S(this,I,_).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}costomEvent(e,r){if(!r||r==="undefined"||r.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${r}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:r},bubbles:!0}))}}I=new WeakSet,_=function(){var r;this.abortController=new AbortController;const e=this.abortController.signal;(r=this.buttons)==null||r.forEach(s=>{s.addEventListener("click",()=>{this.costomEvent(s,String(s.dataset.value))},{signal:e})})},d.Button=R,d.ButtonGroup=G,d.Select=k,d.SpinBox=h,d.Switch=m,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "Andrii Popov",
3
3
  "name": "@popovandrii/ui-elements",
4
4
  "description": "UI elements. Color scheme. Elements with complex logic Java Script. SpinBox, Select+search, Switch, Button Group (radio)",
5
- "version": "0.0.21",
5
+ "version": "0.0.23",
6
6
  "license": "MIT",
7
7
  "keywords": [
8
8
  "spinbox",