@popovandrii/ui-elements 0.0.25 → 0.0.26

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.
Files changed (4) hide show
  1. package/dist/index.cjs.js +1 -1
  2. package/dist/index.es.js +331 -350
  3. package/dist/index.umd.js +1 -1
  4. package/package.json +12 -12
package/dist/index.cjs.js CHANGED
@@ -1 +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;
1
+ "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 s={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...s,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,s,o=0,i=0)=>{e==o||e<o?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const s=e.getAttribute(`data-${t}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let s;const o=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.dbug&&(o||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));const r=o[0],d=o[1],n=this.getValidDataNumber(t,"step"),l=this.getValidDataNumber(t,"min"),c=this.getValidDataNumber(t,"max"),h=a=>{t.setAttribute("aria-valuenow",String(a)),t.setAttribute("aria-valuetext",`${a} items`)};Number(i.value)<=l&&(i.value=l.toFixed(n)),c!==0?(Number(i.value)>=c&&(i.value=c.toFixed(n)),c&&t.setAttribute("aria-valuemax",c.toFixed(n))):i.value=Number(i.value).toFixed(n),l&&t.setAttribute("aria-valuemin",l.toFixed(n)),this.state(Number(i.value),r,d,l,c),h(i.value);let b=null;const v=(a=1)=>{i.value=String(Math.abs(Number(i.value)));let u=parseFloat(i.value)||0;return u=u+1*a/Math.pow(10,n),u>c&&c!==0&&(u=c),i.value=u.toFixed(n),this.state(Number(i.value),r,d,l,c),h(i.value),i.value},f=(a=1)=>{i.value=String(Math.abs(Number(i.value)));let u=parseFloat(i.value)||0;return u=u-1*a/Math.pow(10,n),u<l&&(u=l),i.value=u.toFixed(n),this.state(Number(i.value),r,d,l,c),h(i.value),i.value},m=(a,u=150)=>{b===null&&(b=window.setInterval(a,u))},E=()=>{b!==null&&(clearInterval(b),b=null)};d.addEventListener("mousedown",a=>{const u=a.shiftKey?3:1;m(()=>v(u))},{signal:e}),d.addEventListener("touchstart",()=>m(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{d.addEventListener(a,E,{signal:e})}),d.addEventListener("click",a=>{const u=a.shiftKey?3:1;b===null&&(s=v(u),this.costomEvent(i,s))},{signal:e}),r.addEventListener("click",a=>{const u=a.shiftKey?3:1;b===null&&(s=f(u),this.costomEvent(i,s))},{signal:e}),r.addEventListener("mousedown",a=>{const u=a.shiftKey?3:1;m(()=>f(u),100)},{signal:e}),r.addEventListener("touchstart",()=>m(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{r.addEventListener(a,E,{signal:e})}),i.addEventListener("keydown",a=>{const u=a.key,y=a.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(u)||(a.ctrlKey||a.metaKey)&&["a","c","v","x"].includes(u.toLowerCase()))return;if(["e","+","-"].includes(u)){a.preventDefault();return}if(u==="ArrowUp"||u==="ArrowDown"){a.preventDefault(),u==="ArrowUp"?v(y):f(y);return}const w=u===","?".":u,p=/^[0-9]$/.test(w),C=w===".",k=i.value.includes(".");(n===0&&!p||n>0&&!(p||C)||C&&k)&&a.preventDefault()},{signal:e}),i.addEventListener("keyup",a=>{(a.key==="ArrowUp"||a.key==="ArrowDown")&&this.costomEvent(i,i.value)},{signal:e}),i.addEventListener("change",()=>{Number(i.value)<l&&(i.value=l.toFixed(n)),Number(i.value)>c&&c!==0?i.value=c.toFixed(n):i.value=Number(i.value).toFixed(n),this.state(Number(i.value),r,d,l,c),this.costomEvent(i,i.value)},{signal:e})})}costomEvent(e,t){const s={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",s.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",s))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIsw",label:"UIsw-label"};this.selectors={...s,...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 s=t.querySelector(`.${this.selectors.label}`),o=t.querySelector("input");s&&s.id&&t.setAttribute("aria-labelledby",s.id),o&&(o.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{o.checked=!o.checked;const i=t.querySelector("input");this.costomEvent(t,String(i?.checked)),t.setAttribute("aria-checked",String(o.checked))},{signal:e}),t.addEventListener("keydown",i=>{i.key==="ArrowRight"?(o.checked=!0,t.setAttribute("aria-checked",String(o.checked)),i.preventDefault(),this.costomEvent(t,String(!0))):i.key==="ArrowLeft"&&(o.checked=!1,t.setAttribute("aria-checked",String(o.checked)),i.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 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,t){return Array.from(e).filter(s=>!t.some(o=>typeof o=="string"?s.classList.contains(o)||s.id===o:s===o))}filterSearch(e,t){const s=t.trim().toLowerCase();return e.filter(o=>{const i=o.dataset.value?.toLowerCase()||"",r=o.textContent?.toLowerCase()||"";return i.includes(s)||r.includes(s)})}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 s=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!s)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const o=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),r=t.querySelector(`.${this.selectors.optionsList}`),d=t.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(t,r)},{signal:e}),o.addEventListener("click",()=>{this.toggle(t,r)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(r)},{signal:e});const n=r.querySelectorAll(`.${this.selectors.items} ul li`),l=this.filterExcluded(n,this.selectors.excludedItems),c=t.querySelector("[aria-selected='true']");c&&this.defaultSelect(t,c,o,s);var h=[];d&&d.addEventListener("input",b=>{const f=b.target.value.trim();o&&(h=this.filterSearch(l,f),f?(n.forEach(m=>m.remove()),h.forEach(m=>{r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)})):n.forEach(m=>{r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)}),this.itemArrow(t,r,o,s,e))},{signal:e}),this.itemArrow(t,r,o,s,e),this.items(t,r,l,o,s,e)},{signal:e})}itemArrow(e,t,s,o,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let r=-1;const d=s.textContent?s.textContent:"",n=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",l=>{n&&n.focus();const c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),h=this.filterExcluded(c,this.selectors.excludedItems),b=h.length;if(b!==0)if(l.key==="ArrowDown"){l.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),r=(r+1)%b,s.textContent=h[r].textContent,h.forEach(f=>f.removeAttribute("aria-selected")),h[r].setAttribute("aria-selected","true");const v=h[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",v),h[r].scrollIntoView({block:"nearest"})}else if(l.key==="ArrowUp"){l.preventDefault(),r=(r-1+b)%b,s.textContent=h[r].textContent,h.forEach(f=>f.removeAttribute("aria-selected")),h[r].setAttribute("aria-selected","true");const v=h[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",v),h[r].scrollIntoView({block:"nearest"})}else if(l.key==="Enter")if(l.preventDefault(),r>=0){s.textContent=h[r].textContent,h.forEach(f=>f.removeAttribute("aria-selected")),h[r].setAttribute("aria-selected","true");const v=h[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",v),o.value=String(h[r].dataset.value),this.costomEvent(e,o.value),this.close(e,t)}else this.toggle(e,t);else l.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(s.textContent=d),this.close(e,t))},{signal:i})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,s,o,i,r){s.forEach((d,n)=>{d.addEventListener("click",()=>{const l=s[n];if(l){o.textContent=l.textContent,s.forEach(h=>h.removeAttribute("aria-selected")),l.setAttribute("aria-selected","true");const c=l.id||`${this.selectors.idPrefix}${n}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",c),i.value=String(s[n].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}},{signal:r})})}defaultSelect(e,t,s,o){t&&(o.setAttribute("value",t.dataset.value??""),s.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 s=t.querySelector(`.${e.optionsList}`);s.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const s=t.target;[...document.querySelectorAll(`.${e.main}`)].some(i=>i.contains(s))||A.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...s,...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 s=t.querySelectorAll(`.${this.selectors.btn}`);s.forEach(r=>{r.addEventListener("click",()=>{s.forEach(d=>{d.setAttribute("aria-checked","false"),d.setAttribute("tabindex","-1")}),r.setAttribute("aria-checked","true"),r.setAttribute("tabindex","0"),r.focus()},{signal:e}),r.addEventListener("keydown",d=>{let n=Array.from(s).indexOf(r);if(d.key==="ArrowRight"&&n++,d.key==="ArrowLeft"&&n--,n<0&&(n=s.length-1),n>=s.length&&(n=0),d.key==="Enter"){const c=o[n];c&&!c.disabled&&(o.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),d.preventDefault();return}const l=s[n];l&&(s.forEach(c=>c.setAttribute("tabindex","-1")),l.setAttribute("tabindex","0"),l.focus())},{signal:e})});const o=t.querySelectorAll(`.${this.selectors.input}`);o.forEach((r,d)=>{this.dbug&&(r.id||console.error(`Input #${d} in group has no ID!`),(!r.value||r.value==="on")&&console.warn(`Input #${r.id} does not have a value specified (currently "${r.value}")`));const n=s[d];n&&(r.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(r.checked)),n.setAttribute("tabindex",r.checked?"0":"-1"),r.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),r.addEventListener("click",()=>{o.forEach(l=>{l.checked=!1,l.removeAttribute("checked")}),o[d].checked=!0,o[d].setAttribute("checked",""),this.costomEvent(r)},{signal:e}))});const i=Array.from(o).find(r=>r.checked&&!r.disabled)||Array.from(o).find(r=>!r.disabled);if(i){const r=t.querySelector(`label[for="${i.id}"]`);r&&r.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class L{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIb"};this.selectors={...s,...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=L;exports.ButtonGroup=$;exports.Select=A;exports.SpinBox=x;exports.Switch=S;
package/dist/index.es.js CHANGED
@@ -1,110 +1,103 @@
1
- var B = Object.defineProperty;
2
- var q = (f) => {
3
- throw TypeError(f);
4
- };
5
- var F = (f, t, e) => t in f ? B(f, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : f[t] = e;
6
- var b = (f, t, e) => F(f, typeof t != "symbol" ? t + "" : t, e), K = (f, t, e) => t.has(f) || q("Cannot " + e);
7
- 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);
8
- var x = (f, t, e) => (K(f, t, "access private method"), e);
9
- class _ {
10
- constructor(t = {}, e = !1) {
11
- b(this, "selectors");
12
- b(this, "spinBoxes");
13
- b(this, "abortController", new AbortController());
14
- b(this, "dbug");
15
- b(this, "state", (t, e, s, a = 0, c = 0) => {
16
- 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));
17
- });
18
- b(this, "getValidDataNumber", (t, e) => {
19
- const s = t.getAttribute(`data-${e}`);
20
- return s === null || s.trim() === "" || isNaN(Number(s)) ? 0 : Number(s);
21
- });
22
- this.dbug = e;
1
+ class S {
2
+ selectors;
3
+ spinBoxes;
4
+ abortController = new AbortController();
5
+ dbug;
6
+ constructor(e = {}, t = !1) {
7
+ this.dbug = t;
23
8
  const s = {
24
9
  main: "UIsp",
25
10
  btn: "UIsp__btn",
26
11
  input: "UIsp__input",
27
12
  disabledBtn: "disabled"
28
13
  };
29
- this.selectors = { ...s, ...t }, this.spinBoxes = document.querySelectorAll(
14
+ this.selectors = { ...s, ...e }, this.spinBoxes = document.querySelectorAll(
30
15
  `.${this.selectors.main}`
31
16
  ), this.event();
32
17
  }
18
+ state = (e, t, s, o = 0, i = 0) => {
19
+ e == o || e < o ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), i !== 0 && (e == i || e > i ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1));
20
+ };
33
21
  destroy() {
34
22
  this.abortController && this.abortController.abort(), this.spinBoxes = null;
35
23
  }
24
+ getValidDataNumber = (e, t) => {
25
+ const s = e.getAttribute(`data-${t}`);
26
+ return s === null || s.trim() === "" || isNaN(Number(s)) ? 0 : Number(s);
27
+ };
36
28
  event() {
37
- var e;
38
29
  this.abortController = new AbortController();
39
- const t = this.abortController.signal;
40
- (e = this.spinBoxes) == null || e.forEach((s) => {
41
- let a;
42
- const c = s.querySelectorAll(
30
+ const e = this.abortController.signal;
31
+ this.spinBoxes?.forEach((t) => {
32
+ let s;
33
+ const o = t.querySelectorAll(
43
34
  `.${this.selectors.btn}`
44
- ), o = c[0], i = c[1], r = s.querySelector(
35
+ ), i = t.querySelector(
45
36
  `.${this.selectors.input}`
46
- ), n = this.getValidDataNumber(s, "step"), h = this.getValidDataNumber(s, "min"), l = this.getValidDataNumber(s, "max"), m = (u) => {
47
- s.setAttribute("aria-valuenow", String(u)), s.setAttribute("aria-valuetext", `${u} items`);
37
+ );
38
+ this.dbug && (o || console.log(`Buttons (${this.selectors.btn}) not found in container`), i || console.log(`Input (${this.selectors.input}) not found in container`));
39
+ const r = o[0], d = o[1], n = this.getValidDataNumber(t, "step"), l = this.getValidDataNumber(t, "min"), c = this.getValidDataNumber(t, "max"), h = (a) => {
40
+ t.setAttribute("aria-valuenow", String(a)), t.setAttribute("aria-valuetext", `${a} items`);
48
41
  };
49
- 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);
50
- let v = null;
51
- const A = (u = 1) => {
52
- r.value = String(Math.abs(Number(r.value)));
53
- let d = parseFloat(r.value) || 0;
54
- 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;
55
- }, y = (u = 1) => {
56
- r.value = String(Math.abs(Number(r.value)));
57
- let d = parseFloat(r.value) || 0;
58
- 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;
59
- }, E = (u, d = 150) => {
60
- v === null && (v = window.setInterval(u, d));
61
- }, g = () => {
62
- v !== null && (clearInterval(v), v = null);
42
+ Number(i.value) <= l && (i.value = l.toFixed(n)), c !== 0 ? (Number(i.value) >= c && (i.value = c.toFixed(n)), c && t.setAttribute("aria-valuemax", c.toFixed(n))) : i.value = Number(i.value).toFixed(n), l && t.setAttribute("aria-valuemin", l.toFixed(n)), this.state(Number(i.value), r, d, l, c), h(i.value);
43
+ let b = null;
44
+ const v = (a = 1) => {
45
+ i.value = String(Math.abs(Number(i.value)));
46
+ let u = parseFloat(i.value) || 0;
47
+ return u = u + 1 * a / Math.pow(10, n), u > c && c !== 0 && (u = c), i.value = u.toFixed(n), this.state(Number(i.value), r, d, l, c), h(i.value), i.value;
48
+ }, f = (a = 1) => {
49
+ i.value = String(Math.abs(Number(i.value)));
50
+ let u = parseFloat(i.value) || 0;
51
+ return u = u - 1 * a / Math.pow(10, n), u < l && (u = l), i.value = u.toFixed(n), this.state(Number(i.value), r, d, l, c), h(i.value), i.value;
52
+ }, m = (a, u = 150) => {
53
+ b === null && (b = window.setInterval(a, u));
54
+ }, E = () => {
55
+ b !== null && (clearInterval(b), b = null);
63
56
  };
64
- i.addEventListener(
57
+ d.addEventListener(
65
58
  "mousedown",
66
- (u) => {
67
- const d = u.shiftKey ? 3 : 1;
68
- E(() => A(d));
59
+ (a) => {
60
+ const u = a.shiftKey ? 3 : 1;
61
+ m(() => v(u));
69
62
  },
70
- { signal: t }
71
- ), i.addEventListener("touchstart", () => E(A), {
72
- signal: t
63
+ { signal: e }
64
+ ), d.addEventListener("touchstart", () => m(v), {
65
+ signal: e
73
66
  }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
74
- (u) => {
75
- i.addEventListener(u, g, { signal: t });
67
+ (a) => {
68
+ d.addEventListener(a, E, { signal: e });
76
69
  }
77
- ), i.addEventListener(
70
+ ), d.addEventListener(
78
71
  "click",
79
- (u) => {
80
- const d = u.shiftKey ? 3 : 1;
81
- v === null && (a = A(d), this.costomEvent(i, a));
72
+ (a) => {
73
+ const u = a.shiftKey ? 3 : 1;
74
+ b === null && (s = v(u), this.costomEvent(i, s));
82
75
  },
83
- { signal: t }
84
- ), o.addEventListener(
76
+ { signal: e }
77
+ ), r.addEventListener(
85
78
  "click",
86
- (u) => {
87
- const d = u.shiftKey ? 3 : 1;
88
- v === null && (a = y(d), this.costomEvent(o, a));
79
+ (a) => {
80
+ const u = a.shiftKey ? 3 : 1;
81
+ b === null && (s = f(u), this.costomEvent(i, s));
89
82
  },
90
- { signal: t }
91
- ), o.addEventListener(
83
+ { signal: e }
84
+ ), r.addEventListener(
92
85
  "mousedown",
93
- (u) => {
94
- const d = u.shiftKey ? 3 : 1;
95
- E(() => y(d), 100);
86
+ (a) => {
87
+ const u = a.shiftKey ? 3 : 1;
88
+ m(() => f(u), 100);
96
89
  },
97
- { signal: t }
98
- ), o.addEventListener("touchstart", () => E(y, 100), {
99
- signal: t
90
+ { signal: e }
91
+ ), r.addEventListener("touchstart", () => m(f, 100), {
92
+ signal: e
100
93
  }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
101
- (u) => {
102
- o.addEventListener(u, g, { signal: t });
94
+ (a) => {
95
+ r.addEventListener(a, E, { signal: e });
103
96
  }
104
- ), r.addEventListener(
97
+ ), i.addEventListener(
105
98
  "keydown",
106
- (u) => {
107
- const d = u.key, S = u.shiftKey ? 5 : 1;
99
+ (a) => {
100
+ const u = a.key, y = a.shiftKey ? 5 : 1;
108
101
  if ([
109
102
  "Backspace",
110
103
  "Delete",
@@ -114,56 +107,55 @@ class _ {
114
107
  "Enter",
115
108
  "Home",
116
109
  "End"
117
- ].includes(d) || (u.ctrlKey || u.metaKey) && ["a", "c", "v", "x"].includes(d.toLowerCase()))
110
+ ].includes(u) || (a.ctrlKey || a.metaKey) && ["a", "c", "v", "x"].includes(u.toLowerCase()))
118
111
  return;
119
- if (["e", "+", "-"].includes(d)) {
120
- u.preventDefault();
112
+ if (["e", "+", "-"].includes(u)) {
113
+ a.preventDefault();
121
114
  return;
122
115
  }
123
- if (d === "ArrowUp" || d === "ArrowDown") {
124
- u.preventDefault(), d === "ArrowUp" ? A(S) : y(S);
116
+ if (u === "ArrowUp" || u === "ArrowDown") {
117
+ a.preventDefault(), u === "ArrowUp" ? v(y) : f(y);
125
118
  return;
126
119
  }
127
- const $ = d === "," ? "." : d, L = /^[0-9]$/.test($), I = $ === ".", N = r.value.includes(".");
128
- (n === 0 && !L || n > 0 && !(L || I) || I && N) && u.preventDefault();
120
+ const w = u === "," ? "." : u, p = /^[0-9]$/.test(w), C = w === ".", k = i.value.includes(".");
121
+ (n === 0 && !p || n > 0 && !(p || C) || C && k) && a.preventDefault();
129
122
  },
130
- { signal: t }
131
- ), r.addEventListener(
123
+ { signal: e }
124
+ ), i.addEventListener(
132
125
  "keyup",
133
- (u) => {
134
- (u.key === "ArrowUp" || u.key === "ArrowDown") && this.costomEvent(r, r.value);
126
+ (a) => {
127
+ (a.key === "ArrowUp" || a.key === "ArrowDown") && this.costomEvent(i, i.value);
135
128
  },
136
- { signal: t }
137
- ), r.addEventListener(
129
+ { signal: e }
130
+ ), i.addEventListener(
138
131
  "change",
139
132
  () => {
140
- 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);
133
+ Number(i.value) < l && (i.value = l.toFixed(n)), Number(i.value) > c && c !== 0 ? i.value = c.toFixed(n) : i.value = Number(i.value).toFixed(n), this.state(Number(i.value), r, d, l, c), this.costomEvent(i, i.value);
141
134
  },
142
- { signal: t }
135
+ { signal: e }
143
136
  );
144
137
  });
145
138
  }
146
- costomEvent(t, e) {
147
- this.dbug && console.log(`CostomEvent: { detail: ${e}, bubbles: true }`), t.dispatchEvent(
148
- new CustomEvent("ui-spinbox-change", {
149
- detail: { val: e },
150
- bubbles: !0
151
- })
152
- );
139
+ costomEvent(e, t) {
140
+ const s = {
141
+ detail: { id: e.id, value: t },
142
+ bubbles: !0
143
+ };
144
+ this.dbug && console.log("CostomEvent: data.detail ", s.detail), e.dispatchEvent(new CustomEvent("ui-spinbox-change", s));
153
145
  }
154
146
  }
155
- class z {
156
- constructor(t = {}, e = !1) {
157
- b(this, "selectors");
158
- b(this, "main", null);
159
- b(this, "abortController", new AbortController());
160
- b(this, "dbug");
161
- this.dbug = e;
147
+ class $ {
148
+ selectors;
149
+ main = null;
150
+ abortController = new AbortController();
151
+ dbug;
152
+ constructor(e = {}, t = !1) {
153
+ this.dbug = t;
162
154
  const s = {
163
155
  main: "UIsw",
164
156
  label: "UIsw-label"
165
157
  };
166
- this.selectors = { ...s, ...t }, this.main = document.querySelectorAll(
158
+ this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
167
159
  `.${this.selectors.main}`
168
160
  ), this.event();
169
161
  }
@@ -171,45 +163,44 @@ class z {
171
163
  this.abortController && this.abortController.abort(), this.main = null;
172
164
  }
173
165
  event() {
174
- var e;
175
166
  this.abortController = new AbortController();
176
- const t = this.abortController.signal;
177
- (e = this.main) == null || e.forEach((s) => {
178
- const a = s.querySelector(`.${this.selectors.label}`), c = s.querySelector("input");
179
- a && a.id && s.setAttribute("aria-labelledby", a.id), c && (c.checked ? s.setAttribute("aria-checked", "true") : s.setAttribute("aria-checked", "false"), s.addEventListener(
167
+ const e = this.abortController.signal;
168
+ this.main?.forEach((t) => {
169
+ const s = t.querySelector(`.${this.selectors.label}`), o = t.querySelector("input");
170
+ s && s.id && t.setAttribute("aria-labelledby", s.id), o && (o.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener(
180
171
  "click",
181
172
  () => {
182
- c.checked = !c.checked;
183
- const o = s.querySelector("input");
184
- this.costomEvent(s, String(o == null ? void 0 : o.checked)), s.setAttribute("aria-checked", String(c.checked));
173
+ o.checked = !o.checked;
174
+ const i = t.querySelector("input");
175
+ this.costomEvent(t, String(i?.checked)), t.setAttribute("aria-checked", String(o.checked));
185
176
  },
186
- { signal: t }
187
- ), s.addEventListener(
177
+ { signal: e }
178
+ ), t.addEventListener(
188
179
  "keydown",
189
- (o) => {
190
- 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)));
180
+ (i) => {
181
+ i.key === "ArrowRight" ? (o.checked = !0, t.setAttribute("aria-checked", String(o.checked)), i.preventDefault(), this.costomEvent(t, String(!0))) : i.key === "ArrowLeft" && (o.checked = !1, t.setAttribute("aria-checked", String(o.checked)), i.preventDefault(), this.costomEvent(t, String(!1)));
191
182
  },
192
- { signal: t }
183
+ { signal: e }
193
184
  ));
194
185
  });
195
186
  }
196
- costomEvent(t, e) {
197
- this.dbug && console.log(`CostomEvent: { detail: ${e}, bubbles: true }`), t.dispatchEvent(
187
+ costomEvent(e, t) {
188
+ this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
198
189
  new CustomEvent("ui-switch-change", {
199
- detail: { val: e },
190
+ detail: { val: t },
200
191
  bubbles: !0
201
192
  })
202
193
  );
203
194
  }
204
195
  }
205
- class w {
206
- constructor(t = {}, e = !1) {
207
- b(this, "selectors");
208
- b(this, "main", null);
209
- b(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
210
- b(this, "abortController", new AbortController());
211
- b(this, "dbug");
212
- this.dbug = e;
196
+ class A {
197
+ selectors;
198
+ main = null;
199
+ itemArrowInitialized = /* @__PURE__ */ new WeakSet();
200
+ abortController = new AbortController();
201
+ dbug;
202
+ constructor(e = {}, t = !1) {
203
+ this.dbug = t;
213
204
  const s = {
214
205
  idPrefix: "UI-option-",
215
206
  main: "UIselect",
@@ -221,331 +212,321 @@ class w {
221
212
  excludedItems: ["divider", "test"]
222
213
  // class=""
223
214
  };
224
- this.selectors = { ...s, ...t }, this.main = document.querySelectorAll(
215
+ this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
225
216
  `.${this.selectors.main}`
226
217
  ), this.event(), this.initGlobalListener(this.selectors);
227
218
  }
228
- filterExcluded(t, e) {
229
- return Array.from(t).filter((s) => !e.some((a) => typeof a == "string" ? s.classList.contains(a) || s.id === a : s === a));
219
+ filterExcluded(e, t) {
220
+ return Array.from(e).filter((s) => !t.some((o) => typeof o == "string" ? s.classList.contains(o) || s.id === o : s === o));
230
221
  }
231
- filterSearch(t, e) {
232
- const s = e.trim().toLowerCase();
233
- return t.filter((a) => {
234
- var i, r;
235
- const c = ((i = a.dataset.value) == null ? void 0 : i.toLowerCase()) || "", o = ((r = a.textContent) == null ? void 0 : r.toLowerCase()) || "";
236
- return c.includes(s) || o.includes(s);
222
+ filterSearch(e, t) {
223
+ const s = t.trim().toLowerCase();
224
+ return e.filter((o) => {
225
+ const i = o.dataset.value?.toLowerCase() || "", r = o.textContent?.toLowerCase() || "";
226
+ return i.includes(s) || r.includes(s);
237
227
  });
238
228
  }
239
229
  destroy() {
240
- w.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
230
+ A.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
241
231
  }
242
232
  event() {
243
- var e;
244
233
  this.abortController = new AbortController();
245
- const t = this.abortController.signal;
246
- (e = this.main) == null || e.forEach(
247
- (s) => {
248
- const a = s.querySelector(
234
+ const e = this.abortController.signal;
235
+ this.main?.forEach(
236
+ (t) => {
237
+ const s = t.querySelector(
249
238
  `.${this.selectors.main} input[type='hidden']`
250
239
  );
251
240
  try {
252
- if (!a)
241
+ if (!s)
253
242
  throw new Error('<input type="hidden" name="YouUniqueId">');
254
- } catch (v) {
255
- return console.warn("Not found:", v.message);
243
+ } catch (b) {
244
+ return console.warn("Not found:", b.message);
256
245
  }
257
- const c = s.querySelector(
246
+ const o = t.querySelector(
258
247
  `.${this.selectors.selected}`
259
- ), o = s.querySelector(
248
+ ), i = t.querySelector(
260
249
  `.${this.selectors.arrow}`
261
- ), i = s.querySelector(
250
+ ), r = t.querySelector(
262
251
  `.${this.selectors.optionsList}`
263
- ), r = s.querySelector(
252
+ ), d = t.querySelector(
264
253
  `.${this.selectors.search} input`
265
254
  );
266
- o && o.addEventListener(
255
+ i && i.addEventListener(
267
256
  "click",
268
257
  () => {
269
- this.toggle(s, i);
258
+ this.toggle(t, r);
270
259
  },
271
- { signal: t }
272
- ), c.addEventListener(
260
+ { signal: e }
261
+ ), o.addEventListener(
273
262
  "click",
274
263
  () => {
275
- this.toggle(s, i);
264
+ this.toggle(t, r);
276
265
  },
277
- { signal: t }
278
- ), s.addEventListener(
266
+ { signal: e }
267
+ ), t.addEventListener(
279
268
  "click",
280
269
  () => {
281
- this.itemsPosition(i);
270
+ this.itemsPosition(r);
282
271
  },
283
- { signal: t }
272
+ { signal: e }
284
273
  );
285
- const n = i.querySelectorAll(
274
+ const n = r.querySelectorAll(
286
275
  `.${this.selectors.items} ul li`
287
- ), h = this.filterExcluded(
276
+ ), l = this.filterExcluded(
288
277
  n,
289
278
  this.selectors.excludedItems
290
- ), l = s.querySelector(
279
+ ), c = t.querySelector(
291
280
  "[aria-selected='true']"
292
281
  );
293
- l && this.defaultSelect(s, l, c, a);
294
- var m = [];
295
- r && r.addEventListener(
282
+ c && this.defaultSelect(t, c, o, s);
283
+ var h = [];
284
+ d && d.addEventListener(
296
285
  "input",
297
- (v) => {
298
- const y = v.target.value.trim();
299
- c && (m = this.filterSearch(h, y), y ? (n.forEach((E) => E.remove()), m.forEach((E) => {
300
- var g;
301
- (g = i.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(E);
302
- })) : n.forEach((E) => {
303
- var g;
304
- (g = i.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(E);
305
- }), this.itemArrow(s, i, c, a, t));
286
+ (b) => {
287
+ const f = b.target.value.trim();
288
+ o && (h = this.filterSearch(l, f), f ? (n.forEach((m) => m.remove()), h.forEach((m) => {
289
+ r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
290
+ })) : n.forEach((m) => {
291
+ r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
292
+ }), this.itemArrow(t, r, o, s, e));
306
293
  },
307
- { signal: t }
308
- ), this.itemArrow(s, i, c, a, t), this.items(s, i, h, c, a, t);
294
+ { signal: e }
295
+ ), this.itemArrow(t, r, o, s, e), this.items(t, r, l, o, s, e);
309
296
  },
310
- { signal: t }
297
+ { signal: e }
311
298
  );
312
299
  }
313
- itemArrow(t, e, s, a, c) {
314
- if (this.itemArrowInitialized.has(t)) return;
315
- this.itemArrowInitialized.add(t);
316
- let o = -1;
317
- const i = s.textContent ? s.textContent : "", r = t.querySelector(
300
+ itemArrow(e, t, s, o, i) {
301
+ if (this.itemArrowInitialized.has(e)) return;
302
+ this.itemArrowInitialized.add(e);
303
+ let r = -1;
304
+ const d = s.textContent ? s.textContent : "", n = e.querySelector(
318
305
  `.${this.selectors.search} input`
319
306
  );
320
- t.addEventListener(
307
+ e.addEventListener(
321
308
  "keydown",
322
- (n) => {
323
- r && r.focus();
324
- const h = Array.from(
325
- e.querySelectorAll(`.${this.selectors.optionsList} ul li`)
326
- ), l = this.filterExcluded(
327
- h,
309
+ (l) => {
310
+ n && n.focus();
311
+ const c = Array.from(
312
+ t.querySelectorAll(`.${this.selectors.optionsList} ul li`)
313
+ ), h = this.filterExcluded(
314
+ c,
328
315
  this.selectors.excludedItems
329
- ), m = l.length;
330
- if (m !== 0)
331
- if (n.key === "ArrowDown") {
332
- 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");
333
- const v = l[o].id || `${this.selectors.idPrefix}${o}`;
334
- t.setAttribute("aria-activedescendant", v), l[o].scrollIntoView({ block: "nearest" });
335
- } else if (n.key === "ArrowUp") {
336
- 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");
337
- const v = l[o].id || `${this.selectors.idPrefix}${o}`;
338
- t.setAttribute("aria-activedescendant", v), l[o].scrollIntoView({ block: "nearest" });
339
- } else if (n.key === "Enter")
340
- if (n.preventDefault(), o >= 0) {
341
- s.textContent = l[o].textContent, l.forEach((A) => A.removeAttribute("aria-selected")), l[o].setAttribute("aria-selected", "true");
342
- const v = l[o].id || `${this.selectors.idPrefix}${o}`;
343
- t.setAttribute("aria-activedescendant", v), a.value = String(l[o].dataset.value), this.costomEvent(t, a.value), this.close(t, e);
316
+ ), b = h.length;
317
+ if (b !== 0)
318
+ if (l.key === "ArrowDown") {
319
+ l.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), r = (r + 1) % b, s.textContent = h[r].textContent, h.forEach((f) => f.removeAttribute("aria-selected")), h[r].setAttribute("aria-selected", "true");
320
+ const v = h[r].id || `${this.selectors.idPrefix}${r}`;
321
+ e.setAttribute("aria-activedescendant", v), h[r].scrollIntoView({ block: "nearest" });
322
+ } else if (l.key === "ArrowUp") {
323
+ l.preventDefault(), r = (r - 1 + b) % b, s.textContent = h[r].textContent, h.forEach((f) => f.removeAttribute("aria-selected")), h[r].setAttribute("aria-selected", "true");
324
+ const v = h[r].id || `${this.selectors.idPrefix}${r}`;
325
+ e.setAttribute("aria-activedescendant", v), h[r].scrollIntoView({ block: "nearest" });
326
+ } else if (l.key === "Enter")
327
+ if (l.preventDefault(), r >= 0) {
328
+ s.textContent = h[r].textContent, h.forEach((f) => f.removeAttribute("aria-selected")), h[r].setAttribute("aria-selected", "true");
329
+ const v = h[r].id || `${this.selectors.idPrefix}${r}`;
330
+ e.setAttribute("aria-activedescendant", v), o.value = String(h[r].dataset.value), this.costomEvent(e, o.value), this.close(e, t);
344
331
  } else
345
- this.toggle(t, e);
346
- else n.key === "Escape" && (t.getAttribute("aria-activedescendant") || (s.textContent = i), this.close(t, e));
332
+ this.toggle(e, t);
333
+ else l.key === "Escape" && (e.getAttribute("aria-activedescendant") || (s.textContent = d), this.close(e, t));
347
334
  },
348
- { signal: c }
335
+ { signal: i }
349
336
  );
350
337
  }
351
- itemsPosition(t) {
352
- const e = t.querySelector(
338
+ itemsPosition(e) {
339
+ const t = e.querySelector(
353
340
  '[aria-selected="true"]'
354
341
  );
355
- e && e.scrollIntoView({ block: "nearest" });
342
+ t && t.scrollIntoView({ block: "nearest" });
356
343
  }
357
- items(t, e, s, a, c, o) {
358
- s.forEach((i, r) => {
359
- i.addEventListener(
344
+ items(e, t, s, o, i, r) {
345
+ s.forEach((d, n) => {
346
+ d.addEventListener(
360
347
  "click",
361
348
  () => {
362
- const n = s[r];
363
- if (n) {
364
- a.textContent = n.textContent, s.forEach((l) => l.removeAttribute("aria-selected")), n.setAttribute("aria-selected", "true");
365
- const h = n.id || `${this.selectors.idPrefix}${r}`;
366
- 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);
349
+ const l = s[n];
350
+ if (l) {
351
+ o.textContent = l.textContent, s.forEach((h) => h.removeAttribute("aria-selected")), l.setAttribute("aria-selected", "true");
352
+ const c = l.id || `${this.selectors.idPrefix}${n}`;
353
+ e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", c), i.value = String(s[n].dataset.value), this.costomEvent(e, i.value), this.close(e, t);
367
354
  }
368
355
  },
369
- { signal: o }
356
+ { signal: r }
370
357
  );
371
358
  });
372
359
  }
373
- defaultSelect(t, e, s, a) {
374
- e && (a.setAttribute("value", e.dataset.value ?? ""), s.textContent = e.textContent ?? "", t.setAttribute("aria-activedescendant", e.id || ""));
360
+ defaultSelect(e, t, s, o) {
361
+ t && (o.setAttribute("value", t.dataset.value ?? ""), s.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
375
362
  }
376
- costomEvent(t, e) {
377
- this.dbug && console.log(`CostomEvent: { detail: ${e}, bubbles: true }`), t.dispatchEvent(
363
+ costomEvent(e, t) {
364
+ this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
378
365
  new CustomEvent("ui-select-change", {
379
- detail: { val: e },
366
+ detail: { val: t },
380
367
  bubbles: !0
381
368
  })
382
369
  );
383
370
  }
384
- toggle(t, e) {
385
- w.closeAll(this.selectors), e.hidden ? (e.hidden = !1, t.setAttribute("aria-expanded", "true")) : this.close(t, e);
371
+ toggle(e, t) {
372
+ A.closeAll(this.selectors), t.hidden ? (t.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, t);
386
373
  }
387
- close(t, e) {
388
- e.hidden = !0, t.setAttribute("aria-expanded", "false");
374
+ close(e, t) {
375
+ t.hidden = !0, e.setAttribute("aria-expanded", "false");
389
376
  }
390
- static closeAll(t) {
391
- document.querySelectorAll(`.${t.main}`).forEach((e) => {
392
- const s = e.querySelector(`.${t.optionsList}`);
393
- s.hidden = !0, e.setAttribute("aria-expanded", "false");
377
+ static closeAll(e) {
378
+ document.querySelectorAll(`.${e.main}`).forEach((t) => {
379
+ const s = t.querySelector(`.${e.optionsList}`);
380
+ s.hidden = !0, t.setAttribute("aria-expanded", "false");
394
381
  });
395
382
  }
396
- initGlobalListener(t) {
383
+ initGlobalListener(e) {
397
384
  document.addEventListener(
398
385
  "click",
399
- (e) => {
400
- const s = e.target;
401
- [...document.querySelectorAll(`.${t.main}`)].some(
402
- (c) => c.contains(s)
403
- ) || w.closeAll(t);
386
+ (t) => {
387
+ const s = t.target;
388
+ [...document.querySelectorAll(`.${e.main}`)].some(
389
+ (i) => i.contains(s)
390
+ ) || A.closeAll(e);
404
391
  },
405
392
  { signal: this.abortController.signal }
406
393
  );
407
394
  }
408
395
  }
409
- var C, D;
410
- class M {
411
- constructor(t = {}, e = !1) {
412
- k(this, C);
413
- b(this, "selectors");
414
- b(this, "main", null);
415
- b(this, "abortController", new AbortController());
416
- b(this, "dbug");
417
- this.dbug = e;
396
+ class L {
397
+ selectors;
398
+ main = null;
399
+ abortController = new AbortController();
400
+ dbug;
401
+ constructor(e = {}, t = !1) {
402
+ this.dbug = t;
418
403
  const s = {
419
404
  main: "UIbg",
420
405
  btn: "UIbg-btn",
421
406
  input: "UIbg-input"
422
407
  };
423
- this.selectors = { ...s, ...t }, this.main = document.querySelectorAll(
408
+ this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
424
409
  `.${this.selectors.main}`
425
- ), x(this, C, D).call(this);
410
+ ), this.#t();
426
411
  }
427
412
  destroy() {
428
413
  this.abortController && this.abortController.abort(), this.main = null;
429
414
  }
430
- costomEvent(t) {
431
- const e = {
432
- detail: { id: t.id, value: t.value },
415
+ #t() {
416
+ this.abortController = new AbortController();
417
+ const e = this.abortController.signal;
418
+ this.main?.forEach((t) => {
419
+ const s = t.querySelectorAll(
420
+ `.${this.selectors.btn}`
421
+ );
422
+ s.forEach((r) => {
423
+ r.addEventListener(
424
+ "click",
425
+ () => {
426
+ s.forEach((d) => {
427
+ d.setAttribute("aria-checked", "false"), d.setAttribute("tabindex", "-1");
428
+ }), r.setAttribute("aria-checked", "true"), r.setAttribute("tabindex", "0"), r.focus();
429
+ },
430
+ { signal: e }
431
+ ), r.addEventListener(
432
+ "keydown",
433
+ (d) => {
434
+ let n = Array.from(s).indexOf(r);
435
+ if (d.key === "ArrowRight" && n++, d.key === "ArrowLeft" && n--, n < 0 && (n = s.length - 1), n >= s.length && (n = 0), d.key === "Enter") {
436
+ const c = o[n];
437
+ c && !c.disabled && (o.forEach((h) => {
438
+ h.checked = !1, h.removeAttribute("checked");
439
+ }), c.checked = !0, c.setAttribute("checked", ""), this.costomEvent(c)), d.preventDefault();
440
+ return;
441
+ }
442
+ const l = s[n];
443
+ l && (s.forEach((c) => c.setAttribute("tabindex", "-1")), l.setAttribute("tabindex", "0"), l.focus());
444
+ },
445
+ { signal: e }
446
+ );
447
+ });
448
+ const o = t.querySelectorAll(
449
+ `.${this.selectors.input}`
450
+ );
451
+ o.forEach((r, d) => {
452
+ this.dbug && (r.id || console.error(`Input #${d} in group has no ID!`), (!r.value || r.value === "on") && console.warn(
453
+ `Input #${r.id} does not have a value specified (currently "${r.value}")`
454
+ ));
455
+ const n = s[d];
456
+ n && (r.tabIndex = -1, n.setAttribute("role", "radio"), n.setAttribute("aria-checked", String(r.checked)), n.setAttribute("tabindex", r.checked ? "0" : "-1"), r.disabled ? n.setAttribute("aria-disabled", "true") : n.removeAttribute("aria-disabled"), r.addEventListener(
457
+ "click",
458
+ () => {
459
+ o.forEach((l) => {
460
+ l.checked = !1, l.removeAttribute("checked");
461
+ }), o[d].checked = !0, o[d].setAttribute("checked", ""), this.costomEvent(r);
462
+ },
463
+ { signal: e }
464
+ ));
465
+ });
466
+ const i = Array.from(o).find((r) => r.checked && !r.disabled) || Array.from(o).find((r) => !r.disabled);
467
+ if (i) {
468
+ const r = t.querySelector(
469
+ `label[for="${i.id}"]`
470
+ );
471
+ r && r.setAttribute("tabindex", "0");
472
+ }
473
+ });
474
+ }
475
+ costomEvent(e) {
476
+ const t = {
477
+ detail: { id: e.id, value: e.value },
433
478
  bubbles: !0
434
479
  };
435
- this.dbug && console.log("CostomEvent:", e), t.dispatchEvent(new CustomEvent("ui-button-group-change", e));
480
+ this.dbug && console.log("CostomEvent:", t), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
436
481
  }
437
482
  }
438
- C = new WeakSet(), D = function() {
439
- var e;
440
- this.abortController = new AbortController();
441
- const t = this.abortController.signal;
442
- (e = this.main) == null || e.forEach((s) => {
443
- const a = s.querySelectorAll(
444
- `.${this.selectors.btn}`
445
- );
446
- a.forEach((i) => {
447
- i.addEventListener(
448
- "click",
449
- () => {
450
- a.forEach((r) => {
451
- r.setAttribute("aria-checked", "false"), r.setAttribute("tabindex", "-1");
452
- }), i.setAttribute("aria-checked", "true"), i.setAttribute("tabindex", "0"), i.focus();
453
- },
454
- { signal: t }
455
- ), i.addEventListener(
456
- "keydown",
457
- (r) => {
458
- let n = Array.from(a).indexOf(i);
459
- if (r.key === "ArrowRight" && n++, r.key === "ArrowLeft" && n--, n < 0 && (n = a.length - 1), n >= a.length && (n = 0), r.key === "Enter") {
460
- const l = c[n];
461
- l && !l.disabled && (c.forEach((m) => {
462
- m.checked = !1, m.removeAttribute("checked");
463
- }), l.checked = !0, l.setAttribute("checked", ""), this.costomEvent(l)), r.preventDefault();
464
- return;
465
- }
466
- const h = a[n];
467
- h && (a.forEach((l) => l.setAttribute("tabindex", "-1")), h.setAttribute("tabindex", "0"), h.focus());
468
- },
469
- { signal: t }
470
- );
471
- });
472
- const c = s.querySelectorAll(
473
- `.${this.selectors.input}`
474
- );
475
- c.forEach((i, r) => {
476
- this.dbug && (i.id || console.error(`Input #${r} in group has no ID!`), (!i.value || i.value === "on") && console.warn(
477
- `Input #${i.id} does not have a value specified (currently "${i.value}")`
478
- ));
479
- const n = a[r];
480
- 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(
481
- "click",
482
- () => {
483
- c.forEach((h) => {
484
- h.checked = !1, h.removeAttribute("checked");
485
- }), c[r].checked = !0, c[r].setAttribute("checked", ""), this.costomEvent(i);
486
- },
487
- { signal: t }
488
- ));
489
- });
490
- const o = Array.from(c).find((i) => i.checked && !i.disabled) || Array.from(c).find((i) => !i.disabled);
491
- if (o) {
492
- const i = s.querySelector(
493
- `label[for="${o.id}"]`
494
- );
495
- i && i.setAttribute("tabindex", "0");
496
- }
497
- });
498
- };
499
- var p, U;
500
- class T {
501
- constructor(t = {}, e = !1) {
502
- k(this, p);
503
- b(this, "selectors");
504
- b(this, "buttons", null);
505
- b(this, "abortController", new AbortController());
506
- b(this, "dbug");
507
- this.dbug = e;
483
+ class I {
484
+ selectors;
485
+ buttons = null;
486
+ abortController = new AbortController();
487
+ dbug;
488
+ constructor(e = {}, t = !1) {
489
+ this.dbug = t;
508
490
  const s = {
509
491
  main: "UIb"
510
492
  };
511
- this.selectors = { ...s, ...t }, this.buttons = document.querySelectorAll(
493
+ this.selectors = { ...s, ...e }, this.buttons = document.querySelectorAll(
512
494
  `.${this.selectors.main}`
513
- ), x(this, p, U).call(this);
495
+ ), this.#t();
514
496
  }
515
497
  destroy() {
516
498
  this.abortController && this.abortController.abort(), this.buttons = null;
517
499
  }
518
- costomEvent(t, e) {
519
- if (!e || e === "undefined" || e.trim() === "") {
500
+ #t() {
501
+ this.abortController = new AbortController();
502
+ const e = this.abortController.signal;
503
+ this.buttons?.forEach((t) => {
504
+ t.addEventListener(
505
+ "click",
506
+ () => {
507
+ this.costomEvent(t, String(t.dataset.value));
508
+ },
509
+ { signal: e }
510
+ );
511
+ });
512
+ }
513
+ costomEvent(e, t) {
514
+ if (!t || t === "undefined" || t.trim() === "") {
520
515
  console.log('Button data-value="" Not set!');
521
516
  return;
522
517
  }
523
- this.dbug && console.log(`CostomEvent: { detail: ${e}, bubbles: true }`), t.dispatchEvent(
518
+ this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
524
519
  new CustomEvent("ui-button-change", {
525
- detail: { val: e },
520
+ detail: { val: t },
526
521
  bubbles: !0
527
522
  })
528
523
  );
529
524
  }
530
525
  }
531
- p = new WeakSet(), U = function() {
532
- var e;
533
- this.abortController = new AbortController();
534
- const t = this.abortController.signal;
535
- (e = this.buttons) == null || e.forEach((s) => {
536
- s.addEventListener(
537
- "click",
538
- () => {
539
- this.costomEvent(s, String(s.dataset.value));
540
- },
541
- { signal: t }
542
- );
543
- });
544
- };
545
526
  export {
546
- T as Button,
547
- M as ButtonGroup,
548
- w as Select,
549
- _ as SpinBox,
550
- z as Switch
527
+ I as Button,
528
+ L as ButtonGroup,
529
+ A as Select,
530
+ S as SpinBox,
531
+ $ as Switch
551
532
  };
package/dist/index.umd.js CHANGED
@@ -1 +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"})});
1
+ (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 s={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...s,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,s,o=0,i=0)=>{e==o||e<o?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const s=e.getAttribute(`data-${t}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let s;const o=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.dbug&&(o||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));const r=o[0],d=o[1],n=this.getValidDataNumber(t,"step"),l=this.getValidDataNumber(t,"min"),c=this.getValidDataNumber(t,"max"),h=a=>{t.setAttribute("aria-valuenow",String(a)),t.setAttribute("aria-valuetext",`${a} items`)};Number(i.value)<=l&&(i.value=l.toFixed(n)),c!==0?(Number(i.value)>=c&&(i.value=c.toFixed(n)),c&&t.setAttribute("aria-valuemax",c.toFixed(n))):i.value=Number(i.value).toFixed(n),l&&t.setAttribute("aria-valuemin",l.toFixed(n)),this.state(Number(i.value),r,d,l,c),h(i.value);let b=null;const v=(a=1)=>{i.value=String(Math.abs(Number(i.value)));let u=parseFloat(i.value)||0;return u=u+1*a/Math.pow(10,n),u>c&&c!==0&&(u=c),i.value=u.toFixed(n),this.state(Number(i.value),r,d,l,c),h(i.value),i.value},f=(a=1)=>{i.value=String(Math.abs(Number(i.value)));let u=parseFloat(i.value)||0;return u=u-1*a/Math.pow(10,n),u<l&&(u=l),i.value=u.toFixed(n),this.state(Number(i.value),r,d,l,c),h(i.value),i.value},A=(a,u=150)=>{b===null&&(b=window.setInterval(a,u))},p=()=>{b!==null&&(clearInterval(b),b=null)};d.addEventListener("mousedown",a=>{const u=a.shiftKey?3:1;A(()=>v(u))},{signal:e}),d.addEventListener("touchstart",()=>A(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{d.addEventListener(a,p,{signal:e})}),d.addEventListener("click",a=>{const u=a.shiftKey?3:1;b===null&&(s=v(u),this.costomEvent(i,s))},{signal:e}),r.addEventListener("click",a=>{const u=a.shiftKey?3:1;b===null&&(s=f(u),this.costomEvent(i,s))},{signal:e}),r.addEventListener("mousedown",a=>{const u=a.shiftKey?3:1;A(()=>f(u),100)},{signal:e}),r.addEventListener("touchstart",()=>A(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{r.addEventListener(a,p,{signal:e})}),i.addEventListener("keydown",a=>{const u=a.key,w=a.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(u)||(a.ctrlKey||a.metaKey)&&["a","c","v","x"].includes(u.toLowerCase()))return;if(["e","+","-"].includes(u)){a.preventDefault();return}if(u==="ArrowUp"||u==="ArrowDown"){a.preventDefault(),u==="ArrowUp"?v(w):f(w);return}const C=u===","?".":u,k=/^[0-9]$/.test(C),x=C===".",I=i.value.includes(".");(n===0&&!k||n>0&&!(k||x)||x&&I)&&a.preventDefault()},{signal:e}),i.addEventListener("keyup",a=>{(a.key==="ArrowUp"||a.key==="ArrowDown")&&this.costomEvent(i,i.value)},{signal:e}),i.addEventListener("change",()=>{Number(i.value)<l&&(i.value=l.toFixed(n)),Number(i.value)>c&&c!==0?i.value=c.toFixed(n):i.value=Number(i.value).toFixed(n),this.state(Number(i.value),r,d,l,c),this.costomEvent(i,i.value)},{signal:e})})}costomEvent(e,t){const s={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",s.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",s))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIsw",label:"UIsw-label"};this.selectors={...s,...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 s=t.querySelector(`.${this.selectors.label}`),o=t.querySelector("input");s&&s.id&&t.setAttribute("aria-labelledby",s.id),o&&(o.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{o.checked=!o.checked;const i=t.querySelector("input");this.costomEvent(t,String(i?.checked)),t.setAttribute("aria-checked",String(o.checked))},{signal:e}),t.addEventListener("keydown",i=>{i.key==="ArrowRight"?(o.checked=!0,t.setAttribute("aria-checked",String(o.checked)),i.preventDefault(),this.costomEvent(t,String(!0))):i.key==="ArrowLeft"&&(o.checked=!1,t.setAttribute("aria-checked",String(o.checked)),i.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 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,t){return Array.from(e).filter(s=>!t.some(o=>typeof o=="string"?s.classList.contains(o)||s.id===o:s===o))}filterSearch(e,t){const s=t.trim().toLowerCase();return e.filter(o=>{const i=o.dataset.value?.toLowerCase()||"",r=o.textContent?.toLowerCase()||"";return i.includes(s)||r.includes(s)})}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 s=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!s)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const o=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),r=t.querySelector(`.${this.selectors.optionsList}`),d=t.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(t,r)},{signal:e}),o.addEventListener("click",()=>{this.toggle(t,r)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(r)},{signal:e});const n=r.querySelectorAll(`.${this.selectors.items} ul li`),l=this.filterExcluded(n,this.selectors.excludedItems),c=t.querySelector("[aria-selected='true']");c&&this.defaultSelect(t,c,o,s);var h=[];d&&d.addEventListener("input",b=>{const f=b.target.value.trim();o&&(h=this.filterSearch(l,f),f?(n.forEach(A=>A.remove()),h.forEach(A=>{r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)})):n.forEach(A=>{r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)}),this.itemArrow(t,r,o,s,e))},{signal:e}),this.itemArrow(t,r,o,s,e),this.items(t,r,l,o,s,e)},{signal:e})}itemArrow(e,t,s,o,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let r=-1;const d=s.textContent?s.textContent:"",n=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",l=>{n&&n.focus();const c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),h=this.filterExcluded(c,this.selectors.excludedItems),b=h.length;if(b!==0)if(l.key==="ArrowDown"){l.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),r=(r+1)%b,s.textContent=h[r].textContent,h.forEach(f=>f.removeAttribute("aria-selected")),h[r].setAttribute("aria-selected","true");const v=h[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",v),h[r].scrollIntoView({block:"nearest"})}else if(l.key==="ArrowUp"){l.preventDefault(),r=(r-1+b)%b,s.textContent=h[r].textContent,h.forEach(f=>f.removeAttribute("aria-selected")),h[r].setAttribute("aria-selected","true");const v=h[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",v),h[r].scrollIntoView({block:"nearest"})}else if(l.key==="Enter")if(l.preventDefault(),r>=0){s.textContent=h[r].textContent,h.forEach(f=>f.removeAttribute("aria-selected")),h[r].setAttribute("aria-selected","true");const v=h[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",v),o.value=String(h[r].dataset.value),this.costomEvent(e,o.value),this.close(e,t)}else this.toggle(e,t);else l.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(s.textContent=d),this.close(e,t))},{signal:i})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,s,o,i,r){s.forEach((d,n)=>{d.addEventListener("click",()=>{const l=s[n];if(l){o.textContent=l.textContent,s.forEach(h=>h.removeAttribute("aria-selected")),l.setAttribute("aria-selected","true");const c=l.id||`${this.selectors.idPrefix}${n}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",c),i.value=String(s[n].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}},{signal:r})})}defaultSelect(e,t,s,o){t&&(o.setAttribute("value",t.dataset.value??""),s.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 s=t.querySelector(`.${e.optionsList}`);s.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const s=t.target;[...document.querySelectorAll(`.${e.main}`)].some(i=>i.contains(s))||E.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...s,...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 s=t.querySelectorAll(`.${this.selectors.btn}`);s.forEach(r=>{r.addEventListener("click",()=>{s.forEach(d=>{d.setAttribute("aria-checked","false"),d.setAttribute("tabindex","-1")}),r.setAttribute("aria-checked","true"),r.setAttribute("tabindex","0"),r.focus()},{signal:e}),r.addEventListener("keydown",d=>{let n=Array.from(s).indexOf(r);if(d.key==="ArrowRight"&&n++,d.key==="ArrowLeft"&&n--,n<0&&(n=s.length-1),n>=s.length&&(n=0),d.key==="Enter"){const c=o[n];c&&!c.disabled&&(o.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),d.preventDefault();return}const l=s[n];l&&(s.forEach(c=>c.setAttribute("tabindex","-1")),l.setAttribute("tabindex","0"),l.focus())},{signal:e})});const o=t.querySelectorAll(`.${this.selectors.input}`);o.forEach((r,d)=>{this.dbug&&(r.id||console.error(`Input #${d} in group has no ID!`),(!r.value||r.value==="on")&&console.warn(`Input #${r.id} does not have a value specified (currently "${r.value}")`));const n=s[d];n&&(r.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(r.checked)),n.setAttribute("tabindex",r.checked?"0":"-1"),r.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),r.addEventListener("click",()=>{o.forEach(l=>{l.checked=!1,l.removeAttribute("checked")}),o[d].checked=!0,o[d].setAttribute("checked",""),this.costomEvent(r)},{signal:e}))});const i=Array.from(o).find(r=>r.checked&&!r.disabled)||Array.from(o).find(r=>!r.disabled);if(i){const r=t.querySelector(`label[for="${i.id}"]`);r&&r.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class L{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIb"};this.selectors={...s,...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=L,m.ButtonGroup=$,m.Select=E,m.SpinBox=g,m.Switch=S,Object.defineProperty(m,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), Button",
5
- "version": "0.0.25",
5
+ "version": "0.0.26",
6
6
  "license": "MIT",
7
7
  "keywords": [
8
8
  "spinbox",
@@ -43,17 +43,17 @@
43
43
  "test": "vitest"
44
44
  },
45
45
  "devDependencies": {
46
- "@typescript-eslint/eslint-plugin": "^8.8.0",
47
- "@typescript-eslint/parser": "^8.8.0",
48
- "eslint": "^9.27.0",
49
- "eslint-config-prettier": "^10.1.5",
50
- "eslint-plugin-prettier": "^5.4.0",
51
- "jsdom": "^26.1.0",
52
- "prettier": "^3.5.3",
53
- "sass": "^1.89.2",
54
- "typescript": "~5.8.3",
55
- "vite": "^6.3.5",
46
+ "@typescript-eslint/eslint-plugin": "^8.56.1",
47
+ "@typescript-eslint/parser": "^8.56.1",
48
+ "eslint": "^10.0.2",
49
+ "eslint-config-prettier": "^10.1.8",
50
+ "eslint-plugin-prettier": "^5.5.5",
51
+ "jsdom": "^28.1.0",
52
+ "prettier": "^3.8.1",
53
+ "sass": "^1.97.3",
54
+ "typescript": "~5.9.3",
55
+ "vite": "^7.3.1",
56
56
  "vite-plugin-dts": "^4.5.4",
57
- "vitest": "^3.2.4"
57
+ "vitest": "^4.0.18"
58
58
  }
59
59
  }