@popovandrii/ui-elements 0.0.26 → 0.0.27

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 (5) hide show
  1. package/README.md +1 -21
  2. package/dist/index.cjs.js +1 -1
  3. package/dist/index.es.js +185 -181
  4. package/dist/index.umd.js +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -13,7 +13,7 @@ Connection with `standard styles` from the package by element name.
13
13
  new SpinBox();
14
14
  new Switch();
15
15
  new Select();
16
- new ButtonGroup();
16
+ new ButtonGroup({}, true); // debug mode
17
17
  ```
18
18
  Connection with `custom styles` from a package by element name.
19
19
  ```js
@@ -171,26 +171,6 @@ select?.addEventListener('ui-select-change', (e) => {
171
171
  <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/select-UI.png" alt="Switch Preview" width="700">
172
172
  </p>
173
173
 
174
- #### Button-Group UI
175
- ```html
176
- <div class="UIbg warning sm vertical border" role="group" aria-label="">
177
- <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck21">
178
- <label class="UIbg-btn" for="btncheck21">radio 1</label>
179
-
180
- <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck22" disabled>
181
- <label class="UIbg-btn" for="btncheck22">radio 2</label>
182
-
183
- <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck23">
184
- <label class="UIbg-btn" for="btncheck23">radio 3</label>
185
-
186
- <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck24">
187
- <label class="UIbg-btn" for="btncheck24">radio 4</label>
188
- </div>
189
- ```
190
- <p align="center">
191
- <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/button-group-UI.png" alt="Button-Group Preview" width="700">
192
- </p>
193
-
194
174
  # Information for Developers
195
175
  ```sh
196
176
  git clone git@gitlab.com:AndreyPopov/ui-elements.git && cd ui-elements
package/dist/index.cjs.js CHANGED
@@ -1 +1 @@
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;
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 r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,r,i=0,s=0)=>{e==i||e<i?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),s!==0&&(e==s||e>s?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let r;const i=t.querySelectorAll(`.${this.selectors.btn}`),s=t.querySelector(`.${this.selectors.input}`);this.dbug&&(i||console.log(`Buttons (${this.selectors.btn}) not found in container`),s||console.log(`Input (${this.selectors.input}) not found in container`));const o=i[0],l=i[1],a=this.getValidDataNumber(t,"step"),n=this.getValidDataNumber(t,"min"),h=this.getValidDataNumber(t,"max"),c=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=n&&(s.value=n.toFixed(a)),h!==0?(Number(s.value)>=h&&(s.value=h.toFixed(a)),h&&t.setAttribute("aria-valuemax",h.toFixed(a))):s.value=Number(s.value).toFixed(a),n&&t.setAttribute("aria-valuemin",n.toFixed(a)),this.state(Number(s.value),o,l,n,h),c(s.value);let b=null;const v=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d+1*u/Math.pow(10,a),d>h&&h!==0&&(d=h),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},f=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d-1*u/Math.pow(10,a),d<n&&(d=n),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},m=(u,d=150)=>{b===null&&(b=window.setInterval(u,d))},E=()=>{b!==null&&(clearInterval(b),b=null)};l.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>v(d))},{signal:e}),l.addEventListener("touchstart",()=>m(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{l.addEventListener(u,E,{signal:e})}),l.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=v(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=f(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>f(d),100)},{signal:e}),o.addEventListener("touchstart",()=>m(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{o.addEventListener(u,E,{signal:e})}),s.addEventListener("keydown",u=>{const d=u.key,y=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?v(y):f(y);return}const p=d===","?".":d,w=/^[0-9]$/.test(p),C=p===".",k=s.value.includes(".");(a===0&&!w||a>0&&!(w||C)||C&&k)&&u.preventDefault()},{signal:e}),s.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(s,s.value)},{signal:e}),s.addEventListener("change",()=>{Number(s.value)<n&&(s.value=n.toFixed(a)),Number(s.value)>h&&h!==0?s.value=h.toFixed(a):s.value=Number(s.value).toFixed(a),this.state(Number(s.value),o,l,n,h),this.costomEvent(s,s.value)},{signal:e})})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",r.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",r))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.label}`),i=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),i&&(i.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{i.checked=!i.checked;const s=t.querySelector("input");this.costomEvent(t,String(s?.checked)),t.setAttribute("aria-checked",String(i.checked))},{signal:e}),t.addEventListener("keydown",s=>{s.key==="ArrowRight"?(i.checked=!0,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!0))):s.key==="ArrowLeft"&&(i.checked=!1,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!1)))},{signal:e}))})}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:t},bubbles:!0}))}}class A{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(r=>!t.some(i=>typeof i=="string"?r.classList.contains(i)||r.id===i:r===i))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(i=>{const s=i.dataset.value?.toLowerCase()||"",o=i.textContent?.toLowerCase()||"";return s.includes(r)||o.includes(r)})}destroy(){A.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!r)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const i=t.querySelector(`.${this.selectors.selected}`),s=t.querySelector(`.${this.selectors.arrow}`),o=t.querySelector(`.${this.selectors.optionsList}`),l=t.querySelector(`.${this.selectors.search} input`);s&&s.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),i.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const a=o.querySelectorAll(`.${this.selectors.items} ul li`),n=this.filterExcluded(a,this.selectors.excludedItems),h=t.querySelector("[aria-selected='true']");h&&this.defaultSelect(t,h,i,r);var c=[];l&&l.addEventListener("input",b=>{const f=b.target.value.trim();i&&(c=this.filterSearch(n,f),f?(a.forEach(m=>m.remove()),c.forEach(m=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)})):a.forEach(m=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)}),this.itemArrow(t,o,i,r,e))},{signal:e}),this.itemArrow(t,o,i,r,e),this.items(t,o,n,i,r,e)},{signal:e})}itemArrow(e,t,r,i,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let o=-1;const l=r.textContent?r.textContent:"",a=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",n=>{a&&a.focus();const h=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),b=c.length;if(b!==0)if(n.key==="ArrowDown"){n.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),o=(o+1)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),o=(o-1+b)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="Enter")if(n.preventDefault(),o>=0){r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),i.value=String(c[o].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}else this.toggle(e,t);else n.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=l),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,i,s,o){r.forEach((l,a)=>{l.addEventListener("click",()=>{const n=r[a];if(n){i.textContent=n.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const h=n.id||`${this.selectors.idPrefix}${a}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),s.value=String(r[a].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:o})})}defaultSelect(e,t,r,i){t&&(i.setAttribute("value",t.dataset.value??""),r.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){A.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const r=t.querySelector(`.${e.optionsList}`);r.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const r=t.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(r))||A.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!0){this.dbug=t;const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.costomEvent(r);const i=t.querySelectorAll(`.${this.selectors.btn}`);i.forEach(l=>{l.addEventListener("click",()=>{i.forEach(a=>{a.setAttribute("aria-checked","false"),a.setAttribute("tabindex","-1")}),l.setAttribute("aria-checked","true"),l.setAttribute("tabindex","0"),l.focus()},{signal:e}),l.addEventListener("keydown",a=>{let n=Array.from(i).indexOf(l);if(a.key==="ArrowRight"&&n++,a.key==="ArrowLeft"&&n--,n<0&&(n=i.length-1),n>=i.length&&(n=0),a.key==="Enter"){const c=s[n];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),a.preventDefault();return}const h=i[n];h&&(i.forEach(c=>c.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:e})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((l,a)=>{this.dbug&&(l.id||console.error(`Input #${a} in group has no ID!`),(!l.value||l.value==="on")&&console.warn(`Input #${l.id} does not have a value specified (currently "${l.value}")`));const n=i[a];n&&(l.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(l.checked)),n.setAttribute("tabindex",l.checked?"0":"-1"),l.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),l.addEventListener("click",()=>{s.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),s[a].checked=!0,s[a].setAttribute("checked",""),this.costomEvent(l)},{signal:e}))});const o=Array.from(s).find(l=>l.checked&&!l.disabled)||Array.from(s).find(l=>!l.disabled);if(o){const l=t.querySelector(`label[for="${o.id}"]`);l&&l.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t.detail),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class I{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}exports.Button=I;exports.ButtonGroup=$;exports.Select=A;exports.SpinBox=x;exports.Switch=S;
package/dist/index.es.js CHANGED
@@ -5,99 +5,99 @@ class S {
5
5
  dbug;
6
6
  constructor(e = {}, t = !1) {
7
7
  this.dbug = t;
8
- const s = {
8
+ const r = {
9
9
  main: "UIsp",
10
10
  btn: "UIsp__btn",
11
11
  input: "UIsp__input",
12
12
  disabledBtn: "disabled"
13
13
  };
14
- this.selectors = { ...s, ...e }, this.spinBoxes = document.querySelectorAll(
14
+ this.selectors = { ...r, ...e }, this.spinBoxes = document.querySelectorAll(
15
15
  `.${this.selectors.main}`
16
16
  ), this.event();
17
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));
18
+ state = (e, t, r, i = 0, s = 0) => {
19
+ e == i || e < i ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), s !== 0 && (e == s || e > s ? (r.classList.add(this.selectors.disabledBtn), r.disabled = !0) : (r.classList.remove(this.selectors.disabledBtn), r.disabled = !1));
20
20
  };
21
21
  destroy() {
22
22
  this.abortController && this.abortController.abort(), this.spinBoxes = null;
23
23
  }
24
24
  getValidDataNumber = (e, t) => {
25
- const s = e.getAttribute(`data-${t}`);
26
- return s === null || s.trim() === "" || isNaN(Number(s)) ? 0 : Number(s);
25
+ const r = e.getAttribute(`data-${t}`);
26
+ return r === null || r.trim() === "" || isNaN(Number(r)) ? 0 : Number(r);
27
27
  };
28
28
  event() {
29
29
  this.abortController = new AbortController();
30
30
  const e = this.abortController.signal;
31
31
  this.spinBoxes?.forEach((t) => {
32
- let s;
33
- const o = t.querySelectorAll(
32
+ let r;
33
+ const i = t.querySelectorAll(
34
34
  `.${this.selectors.btn}`
35
- ), i = t.querySelector(
35
+ ), s = t.querySelector(
36
36
  `.${this.selectors.input}`
37
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`);
38
+ this.dbug && (i || console.log(`Buttons (${this.selectors.btn}) not found in container`), s || console.log(`Input (${this.selectors.input}) not found in container`));
39
+ const o = i[0], l = i[1], a = this.getValidDataNumber(t, "step"), n = this.getValidDataNumber(t, "min"), h = this.getValidDataNumber(t, "max"), c = (u) => {
40
+ t.setAttribute("aria-valuenow", String(u)), t.setAttribute("aria-valuetext", `${u} items`);
41
41
  };
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);
42
+ Number(s.value) <= n && (s.value = n.toFixed(a)), h !== 0 ? (Number(s.value) >= h && (s.value = h.toFixed(a)), h && t.setAttribute("aria-valuemax", h.toFixed(a))) : s.value = Number(s.value).toFixed(a), n && t.setAttribute("aria-valuemin", n.toFixed(a)), this.state(Number(s.value), o, l, n, h), c(s.value);
43
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));
44
+ const v = (u = 1) => {
45
+ s.value = String(Math.abs(Number(s.value)));
46
+ let d = parseFloat(s.value) || 0;
47
+ return d = d + 1 * u / Math.pow(10, a), d > h && h !== 0 && (d = h), s.value = d.toFixed(a), this.state(Number(s.value), o, l, n, h), c(s.value), s.value;
48
+ }, f = (u = 1) => {
49
+ s.value = String(Math.abs(Number(s.value)));
50
+ let d = parseFloat(s.value) || 0;
51
+ return d = d - 1 * u / Math.pow(10, a), d < n && (d = n), s.value = d.toFixed(a), this.state(Number(s.value), o, l, n, h), c(s.value), s.value;
52
+ }, m = (u, d = 150) => {
53
+ b === null && (b = window.setInterval(u, d));
54
54
  }, E = () => {
55
55
  b !== null && (clearInterval(b), b = null);
56
56
  };
57
- d.addEventListener(
57
+ l.addEventListener(
58
58
  "mousedown",
59
- (a) => {
60
- const u = a.shiftKey ? 3 : 1;
61
- m(() => v(u));
59
+ (u) => {
60
+ const d = u.shiftKey ? 3 : 1;
61
+ m(() => v(d));
62
62
  },
63
63
  { signal: e }
64
- ), d.addEventListener("touchstart", () => m(v), {
64
+ ), l.addEventListener("touchstart", () => m(v), {
65
65
  signal: e
66
66
  }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
67
- (a) => {
68
- d.addEventListener(a, E, { signal: e });
67
+ (u) => {
68
+ l.addEventListener(u, E, { signal: e });
69
69
  }
70
- ), d.addEventListener(
70
+ ), l.addEventListener(
71
71
  "click",
72
- (a) => {
73
- const u = a.shiftKey ? 3 : 1;
74
- b === null && (s = v(u), this.costomEvent(i, s));
72
+ (u) => {
73
+ const d = u.shiftKey ? 3 : 1;
74
+ b === null && (r = v(d), this.costomEvent(s, r));
75
75
  },
76
76
  { signal: e }
77
- ), r.addEventListener(
77
+ ), o.addEventListener(
78
78
  "click",
79
- (a) => {
80
- const u = a.shiftKey ? 3 : 1;
81
- b === null && (s = f(u), this.costomEvent(i, s));
79
+ (u) => {
80
+ const d = u.shiftKey ? 3 : 1;
81
+ b === null && (r = f(d), this.costomEvent(s, r));
82
82
  },
83
83
  { signal: e }
84
- ), r.addEventListener(
84
+ ), o.addEventListener(
85
85
  "mousedown",
86
- (a) => {
87
- const u = a.shiftKey ? 3 : 1;
88
- m(() => f(u), 100);
86
+ (u) => {
87
+ const d = u.shiftKey ? 3 : 1;
88
+ m(() => f(d), 100);
89
89
  },
90
90
  { signal: e }
91
- ), r.addEventListener("touchstart", () => m(f, 100), {
91
+ ), o.addEventListener("touchstart", () => m(f, 100), {
92
92
  signal: e
93
93
  }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
94
- (a) => {
95
- r.addEventListener(a, E, { signal: e });
94
+ (u) => {
95
+ o.addEventListener(u, E, { signal: e });
96
96
  }
97
- ), i.addEventListener(
97
+ ), s.addEventListener(
98
98
  "keydown",
99
- (a) => {
100
- const u = a.key, y = a.shiftKey ? 5 : 1;
99
+ (u) => {
100
+ const d = u.key, y = u.shiftKey ? 5 : 1;
101
101
  if ([
102
102
  "Backspace",
103
103
  "Delete",
@@ -107,41 +107,41 @@ class S {
107
107
  "Enter",
108
108
  "Home",
109
109
  "End"
110
- ].includes(u) || (a.ctrlKey || a.metaKey) && ["a", "c", "v", "x"].includes(u.toLowerCase()))
110
+ ].includes(d) || (u.ctrlKey || u.metaKey) && ["a", "c", "v", "x"].includes(d.toLowerCase()))
111
111
  return;
112
- if (["e", "+", "-"].includes(u)) {
113
- a.preventDefault();
112
+ if (["e", "+", "-"].includes(d)) {
113
+ u.preventDefault();
114
114
  return;
115
115
  }
116
- if (u === "ArrowUp" || u === "ArrowDown") {
117
- a.preventDefault(), u === "ArrowUp" ? v(y) : f(y);
116
+ if (d === "ArrowUp" || d === "ArrowDown") {
117
+ u.preventDefault(), d === "ArrowUp" ? v(y) : f(y);
118
118
  return;
119
119
  }
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();
120
+ const w = d === "," ? "." : d, p = /^[0-9]$/.test(w), C = w === ".", k = s.value.includes(".");
121
+ (a === 0 && !p || a > 0 && !(p || C) || C && k) && u.preventDefault();
122
122
  },
123
123
  { signal: e }
124
- ), i.addEventListener(
124
+ ), s.addEventListener(
125
125
  "keyup",
126
- (a) => {
127
- (a.key === "ArrowUp" || a.key === "ArrowDown") && this.costomEvent(i, i.value);
126
+ (u) => {
127
+ (u.key === "ArrowUp" || u.key === "ArrowDown") && this.costomEvent(s, s.value);
128
128
  },
129
129
  { signal: e }
130
- ), i.addEventListener(
130
+ ), s.addEventListener(
131
131
  "change",
132
132
  () => {
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);
133
+ Number(s.value) < n && (s.value = n.toFixed(a)), Number(s.value) > h && h !== 0 ? s.value = h.toFixed(a) : s.value = Number(s.value).toFixed(a), this.state(Number(s.value), o, l, n, h), this.costomEvent(s, s.value);
134
134
  },
135
135
  { signal: e }
136
136
  );
137
137
  });
138
138
  }
139
139
  costomEvent(e, t) {
140
- const s = {
140
+ const r = {
141
141
  detail: { id: e.id, value: t },
142
142
  bubbles: !0
143
143
  };
144
- this.dbug && console.log("CostomEvent: data.detail ", s.detail), e.dispatchEvent(new CustomEvent("ui-spinbox-change", s));
144
+ this.dbug && console.log("CostomEvent: data.detail ", r.detail), e.dispatchEvent(new CustomEvent("ui-spinbox-change", r));
145
145
  }
146
146
  }
147
147
  class $ {
@@ -151,11 +151,11 @@ class $ {
151
151
  dbug;
152
152
  constructor(e = {}, t = !1) {
153
153
  this.dbug = t;
154
- const s = {
154
+ const r = {
155
155
  main: "UIsw",
156
156
  label: "UIsw-label"
157
157
  };
158
- this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
158
+ this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
159
159
  `.${this.selectors.main}`
160
160
  ), this.event();
161
161
  }
@@ -166,19 +166,19 @@ class $ {
166
166
  this.abortController = new AbortController();
167
167
  const e = this.abortController.signal;
168
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(
169
+ const r = t.querySelector(`.${this.selectors.label}`), i = t.querySelector("input");
170
+ r && r.id && t.setAttribute("aria-labelledby", r.id), i && (i.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener(
171
171
  "click",
172
172
  () => {
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));
173
+ i.checked = !i.checked;
174
+ const s = t.querySelector("input");
175
+ this.costomEvent(t, String(s?.checked)), t.setAttribute("aria-checked", String(i.checked));
176
176
  },
177
177
  { signal: e }
178
178
  ), t.addEventListener(
179
179
  "keydown",
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)));
180
+ (s) => {
181
+ s.key === "ArrowRight" ? (i.checked = !0, t.setAttribute("aria-checked", String(i.checked)), s.preventDefault(), this.costomEvent(t, String(!0))) : s.key === "ArrowLeft" && (i.checked = !1, t.setAttribute("aria-checked", String(i.checked)), s.preventDefault(), this.costomEvent(t, String(!1)));
182
182
  },
183
183
  { signal: e }
184
184
  ));
@@ -201,7 +201,7 @@ class A {
201
201
  dbug;
202
202
  constructor(e = {}, t = !1) {
203
203
  this.dbug = t;
204
- const s = {
204
+ const r = {
205
205
  idPrefix: "UI-option-",
206
206
  main: "UIselect",
207
207
  selected: "UIselect-selected",
@@ -212,18 +212,18 @@ class A {
212
212
  excludedItems: ["divider", "test"]
213
213
  // class=""
214
214
  };
215
- this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
215
+ this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
216
216
  `.${this.selectors.main}`
217
217
  ), this.event(), this.initGlobalListener(this.selectors);
218
218
  }
219
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));
220
+ return Array.from(e).filter((r) => !t.some((i) => typeof i == "string" ? r.classList.contains(i) || r.id === i : r === i));
221
221
  }
222
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);
223
+ const r = t.trim().toLowerCase();
224
+ return e.filter((i) => {
225
+ const s = i.dataset.value?.toLowerCase() || "", o = i.textContent?.toLowerCase() || "";
226
+ return s.includes(r) || o.includes(r);
227
227
  });
228
228
  }
229
229
  destroy() {
@@ -234,105 +234,105 @@ class A {
234
234
  const e = this.abortController.signal;
235
235
  this.main?.forEach(
236
236
  (t) => {
237
- const s = t.querySelector(
237
+ const r = t.querySelector(
238
238
  `.${this.selectors.main} input[type='hidden']`
239
239
  );
240
240
  try {
241
- if (!s)
241
+ if (!r)
242
242
  throw new Error('<input type="hidden" name="YouUniqueId">');
243
243
  } catch (b) {
244
244
  return console.warn("Not found:", b.message);
245
245
  }
246
- const o = t.querySelector(
246
+ const i = t.querySelector(
247
247
  `.${this.selectors.selected}`
248
- ), i = t.querySelector(
248
+ ), s = t.querySelector(
249
249
  `.${this.selectors.arrow}`
250
- ), r = t.querySelector(
250
+ ), o = t.querySelector(
251
251
  `.${this.selectors.optionsList}`
252
- ), d = t.querySelector(
252
+ ), l = t.querySelector(
253
253
  `.${this.selectors.search} input`
254
254
  );
255
- i && i.addEventListener(
255
+ s && s.addEventListener(
256
256
  "click",
257
257
  () => {
258
- this.toggle(t, r);
258
+ this.toggle(t, o);
259
259
  },
260
260
  { signal: e }
261
- ), o.addEventListener(
261
+ ), i.addEventListener(
262
262
  "click",
263
263
  () => {
264
- this.toggle(t, r);
264
+ this.toggle(t, o);
265
265
  },
266
266
  { signal: e }
267
267
  ), t.addEventListener(
268
268
  "click",
269
269
  () => {
270
- this.itemsPosition(r);
270
+ this.itemsPosition(o);
271
271
  },
272
272
  { signal: e }
273
273
  );
274
- const n = r.querySelectorAll(
274
+ const a = o.querySelectorAll(
275
275
  `.${this.selectors.items} ul li`
276
- ), l = this.filterExcluded(
277
- n,
276
+ ), n = this.filterExcluded(
277
+ a,
278
278
  this.selectors.excludedItems
279
- ), c = t.querySelector(
279
+ ), h = t.querySelector(
280
280
  "[aria-selected='true']"
281
281
  );
282
- c && this.defaultSelect(t, c, o, s);
283
- var h = [];
284
- d && d.addEventListener(
282
+ h && this.defaultSelect(t, h, i, r);
283
+ var c = [];
284
+ l && l.addEventListener(
285
285
  "input",
286
286
  (b) => {
287
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));
288
+ i && (c = this.filterSearch(n, f), f ? (a.forEach((m) => m.remove()), c.forEach((m) => {
289
+ o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
290
+ })) : a.forEach((m) => {
291
+ o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
292
+ }), this.itemArrow(t, o, i, r, e));
293
293
  },
294
294
  { signal: e }
295
- ), this.itemArrow(t, r, o, s, e), this.items(t, r, l, o, s, e);
295
+ ), this.itemArrow(t, o, i, r, e), this.items(t, o, n, i, r, e);
296
296
  },
297
297
  { signal: e }
298
298
  );
299
299
  }
300
- itemArrow(e, t, s, o, i) {
300
+ itemArrow(e, t, r, i, s) {
301
301
  if (this.itemArrowInitialized.has(e)) return;
302
302
  this.itemArrowInitialized.add(e);
303
- let r = -1;
304
- const d = s.textContent ? s.textContent : "", n = e.querySelector(
303
+ let o = -1;
304
+ const l = r.textContent ? r.textContent : "", a = e.querySelector(
305
305
  `.${this.selectors.search} input`
306
306
  );
307
307
  e.addEventListener(
308
308
  "keydown",
309
- (l) => {
310
- n && n.focus();
311
- const c = Array.from(
309
+ (n) => {
310
+ a && a.focus();
311
+ const h = Array.from(
312
312
  t.querySelectorAll(`.${this.selectors.optionsList} ul li`)
313
- ), h = this.filterExcluded(
314
- c,
313
+ ), c = this.filterExcluded(
314
+ h,
315
315
  this.selectors.excludedItems
316
- ), b = h.length;
316
+ ), b = c.length;
317
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);
318
+ if (n.key === "ArrowDown") {
319
+ n.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), o = (o + 1) % b, r.textContent = c[o].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[o].setAttribute("aria-selected", "true");
320
+ const v = c[o].id || `${this.selectors.idPrefix}${o}`;
321
+ e.setAttribute("aria-activedescendant", v), c[o].scrollIntoView({ block: "nearest" });
322
+ } else if (n.key === "ArrowUp") {
323
+ n.preventDefault(), o = (o - 1 + b) % b, r.textContent = c[o].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[o].setAttribute("aria-selected", "true");
324
+ const v = c[o].id || `${this.selectors.idPrefix}${o}`;
325
+ e.setAttribute("aria-activedescendant", v), c[o].scrollIntoView({ block: "nearest" });
326
+ } else if (n.key === "Enter")
327
+ if (n.preventDefault(), o >= 0) {
328
+ r.textContent = c[o].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[o].setAttribute("aria-selected", "true");
329
+ const v = c[o].id || `${this.selectors.idPrefix}${o}`;
330
+ e.setAttribute("aria-activedescendant", v), i.value = String(c[o].dataset.value), this.costomEvent(e, i.value), this.close(e, t);
331
331
  } else
332
332
  this.toggle(e, t);
333
- else l.key === "Escape" && (e.getAttribute("aria-activedescendant") || (s.textContent = d), this.close(e, t));
333
+ else n.key === "Escape" && (e.getAttribute("aria-activedescendant") || (r.textContent = l), this.close(e, t));
334
334
  },
335
- { signal: i }
335
+ { signal: s }
336
336
  );
337
337
  }
338
338
  itemsPosition(e) {
@@ -341,24 +341,24 @@ class A {
341
341
  );
342
342
  t && t.scrollIntoView({ block: "nearest" });
343
343
  }
344
- items(e, t, s, o, i, r) {
345
- s.forEach((d, n) => {
346
- d.addEventListener(
344
+ items(e, t, r, i, s, o) {
345
+ r.forEach((l, a) => {
346
+ l.addEventListener(
347
347
  "click",
348
348
  () => {
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);
349
+ const n = r[a];
350
+ if (n) {
351
+ i.textContent = n.textContent, r.forEach((c) => c.removeAttribute("aria-selected")), n.setAttribute("aria-selected", "true");
352
+ const h = n.id || `${this.selectors.idPrefix}${a}`;
353
+ e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), s.value = String(r[a].dataset.value), this.costomEvent(e, s.value), this.close(e, t);
354
354
  }
355
355
  },
356
- { signal: r }
356
+ { signal: o }
357
357
  );
358
358
  });
359
359
  }
360
- defaultSelect(e, t, s, o) {
361
- t && (o.setAttribute("value", t.dataset.value ?? ""), s.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
360
+ defaultSelect(e, t, r, i) {
361
+ t && (i.setAttribute("value", t.dataset.value ?? ""), r.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
362
362
  }
363
363
  costomEvent(e, t) {
364
364
  this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
@@ -376,36 +376,36 @@ class A {
376
376
  }
377
377
  static closeAll(e) {
378
378
  document.querySelectorAll(`.${e.main}`).forEach((t) => {
379
- const s = t.querySelector(`.${e.optionsList}`);
380
- s.hidden = !0, t.setAttribute("aria-expanded", "false");
379
+ const r = t.querySelector(`.${e.optionsList}`);
380
+ r.hidden = !0, t.setAttribute("aria-expanded", "false");
381
381
  });
382
382
  }
383
383
  initGlobalListener(e) {
384
384
  document.addEventListener(
385
385
  "click",
386
386
  (t) => {
387
- const s = t.target;
387
+ const r = t.target;
388
388
  [...document.querySelectorAll(`.${e.main}`)].some(
389
- (i) => i.contains(s)
389
+ (s) => s.contains(r)
390
390
  ) || A.closeAll(e);
391
391
  },
392
392
  { signal: this.abortController.signal }
393
393
  );
394
394
  }
395
395
  }
396
- class L {
396
+ class I {
397
397
  selectors;
398
398
  main = null;
399
399
  abortController = new AbortController();
400
400
  dbug;
401
- constructor(e = {}, t = !1) {
401
+ constructor(e = {}, t = !0) {
402
402
  this.dbug = t;
403
- const s = {
403
+ const r = {
404
404
  main: "UIbg",
405
405
  btn: "UIbg-btn",
406
406
  input: "UIbg-input"
407
407
  };
408
- this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
408
+ this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
409
409
  `.${this.selectors.main}`
410
410
  ), this.#t();
411
411
  }
@@ -416,59 +416,63 @@ class L {
416
416
  this.abortController = new AbortController();
417
417
  const e = this.abortController.signal;
418
418
  this.main?.forEach((t) => {
419
- const s = t.querySelectorAll(
419
+ const r = t.querySelector(
420
+ `.${this.selectors.input}:checked`
421
+ );
422
+ r && this.costomEvent(r);
423
+ const i = t.querySelectorAll(
420
424
  `.${this.selectors.btn}`
421
425
  );
422
- s.forEach((r) => {
423
- r.addEventListener(
426
+ i.forEach((l) => {
427
+ l.addEventListener(
424
428
  "click",
425
429
  () => {
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();
430
+ i.forEach((a) => {
431
+ a.setAttribute("aria-checked", "false"), a.setAttribute("tabindex", "-1");
432
+ }), l.setAttribute("aria-checked", "true"), l.setAttribute("tabindex", "0"), l.focus();
429
433
  },
430
434
  { signal: e }
431
- ), r.addEventListener(
435
+ ), l.addEventListener(
432
436
  "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();
437
+ (a) => {
438
+ let n = Array.from(i).indexOf(l);
439
+ if (a.key === "ArrowRight" && n++, a.key === "ArrowLeft" && n--, n < 0 && (n = i.length - 1), n >= i.length && (n = 0), a.key === "Enter") {
440
+ const c = s[n];
441
+ c && !c.disabled && (s.forEach((b) => {
442
+ b.checked = !1, b.removeAttribute("checked");
443
+ }), c.checked = !0, c.setAttribute("checked", ""), this.costomEvent(c)), a.preventDefault();
440
444
  return;
441
445
  }
442
- const l = s[n];
443
- l && (s.forEach((c) => c.setAttribute("tabindex", "-1")), l.setAttribute("tabindex", "0"), l.focus());
446
+ const h = i[n];
447
+ h && (i.forEach((c) => c.setAttribute("tabindex", "-1")), h.setAttribute("tabindex", "0"), h.focus());
444
448
  },
445
449
  { signal: e }
446
450
  );
447
451
  });
448
- const o = t.querySelectorAll(
452
+ const s = t.querySelectorAll(
449
453
  `.${this.selectors.input}`
450
454
  );
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}")`
455
+ s.forEach((l, a) => {
456
+ this.dbug && (l.id || console.error(`Input #${a} in group has no ID!`), (!l.value || l.value === "on") && console.warn(
457
+ `Input #${l.id} does not have a value specified (currently "${l.value}")`
454
458
  ));
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(
459
+ const n = i[a];
460
+ n && (l.tabIndex = -1, n.setAttribute("role", "radio"), n.setAttribute("aria-checked", String(l.checked)), n.setAttribute("tabindex", l.checked ? "0" : "-1"), l.disabled ? n.setAttribute("aria-disabled", "true") : n.removeAttribute("aria-disabled"), l.addEventListener(
457
461
  "click",
458
462
  () => {
459
- o.forEach((l) => {
460
- l.checked = !1, l.removeAttribute("checked");
461
- }), o[d].checked = !0, o[d].setAttribute("checked", ""), this.costomEvent(r);
463
+ s.forEach((h) => {
464
+ h.checked = !1, h.removeAttribute("checked");
465
+ }), s[a].checked = !0, s[a].setAttribute("checked", ""), this.costomEvent(l);
462
466
  },
463
467
  { signal: e }
464
468
  ));
465
469
  });
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
+ const o = Array.from(s).find((l) => l.checked && !l.disabled) || Array.from(s).find((l) => !l.disabled);
471
+ if (o) {
472
+ const l = t.querySelector(
473
+ `label[for="${o.id}"]`
470
474
  );
471
- r && r.setAttribute("tabindex", "0");
475
+ l && l.setAttribute("tabindex", "0");
472
476
  }
473
477
  });
474
478
  }
@@ -477,20 +481,20 @@ class L {
477
481
  detail: { id: e.id, value: e.value },
478
482
  bubbles: !0
479
483
  };
480
- this.dbug && console.log("CostomEvent:", t), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
484
+ this.dbug && console.log("CostomEvent:", t.detail), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
481
485
  }
482
486
  }
483
- class I {
487
+ class L {
484
488
  selectors;
485
489
  buttons = null;
486
490
  abortController = new AbortController();
487
491
  dbug;
488
492
  constructor(e = {}, t = !1) {
489
493
  this.dbug = t;
490
- const s = {
494
+ const r = {
491
495
  main: "UIb"
492
496
  };
493
- this.selectors = { ...s, ...e }, this.buttons = document.querySelectorAll(
497
+ this.selectors = { ...r, ...e }, this.buttons = document.querySelectorAll(
494
498
  `.${this.selectors.main}`
495
499
  ), this.#t();
496
500
  }
@@ -524,8 +528,8 @@ class I {
524
528
  }
525
529
  }
526
530
  export {
527
- I as Button,
528
- L as ButtonGroup,
531
+ L as Button,
532
+ I as ButtonGroup,
529
533
  A as Select,
530
534
  S as SpinBox,
531
535
  $ as Switch
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
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"})}));
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 r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,r,i=0,s=0)=>{e==i||e<i?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),s!==0&&(e==s||e>s?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let r;const i=t.querySelectorAll(`.${this.selectors.btn}`),s=t.querySelector(`.${this.selectors.input}`);this.dbug&&(i||console.log(`Buttons (${this.selectors.btn}) not found in container`),s||console.log(`Input (${this.selectors.input}) not found in container`));const o=i[0],l=i[1],a=this.getValidDataNumber(t,"step"),n=this.getValidDataNumber(t,"min"),h=this.getValidDataNumber(t,"max"),c=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=n&&(s.value=n.toFixed(a)),h!==0?(Number(s.value)>=h&&(s.value=h.toFixed(a)),h&&t.setAttribute("aria-valuemax",h.toFixed(a))):s.value=Number(s.value).toFixed(a),n&&t.setAttribute("aria-valuemin",n.toFixed(a)),this.state(Number(s.value),o,l,n,h),c(s.value);let b=null;const v=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d+1*u/Math.pow(10,a),d>h&&h!==0&&(d=h),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},f=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d-1*u/Math.pow(10,a),d<n&&(d=n),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},A=(u,d=150)=>{b===null&&(b=window.setInterval(u,d))},p=()=>{b!==null&&(clearInterval(b),b=null)};l.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;A(()=>v(d))},{signal:e}),l.addEventListener("touchstart",()=>A(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{l.addEventListener(u,p,{signal:e})}),l.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=v(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=f(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;A(()=>f(d),100)},{signal:e}),o.addEventListener("touchstart",()=>A(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{o.addEventListener(u,p,{signal:e})}),s.addEventListener("keydown",u=>{const d=u.key,w=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?v(w):f(w);return}const C=d===","?".":d,k=/^[0-9]$/.test(C),x=C===".",L=s.value.includes(".");(a===0&&!k||a>0&&!(k||x)||x&&L)&&u.preventDefault()},{signal:e}),s.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(s,s.value)},{signal:e}),s.addEventListener("change",()=>{Number(s.value)<n&&(s.value=n.toFixed(a)),Number(s.value)>h&&h!==0?s.value=h.toFixed(a):s.value=Number(s.value).toFixed(a),this.state(Number(s.value),o,l,n,h),this.costomEvent(s,s.value)},{signal:e})})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",r.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",r))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.label}`),i=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),i&&(i.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{i.checked=!i.checked;const s=t.querySelector("input");this.costomEvent(t,String(s?.checked)),t.setAttribute("aria-checked",String(i.checked))},{signal:e}),t.addEventListener("keydown",s=>{s.key==="ArrowRight"?(i.checked=!0,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!0))):s.key==="ArrowLeft"&&(i.checked=!1,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!1)))},{signal:e}))})}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:t},bubbles:!0}))}}class E{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(r=>!t.some(i=>typeof i=="string"?r.classList.contains(i)||r.id===i:r===i))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(i=>{const s=i.dataset.value?.toLowerCase()||"",o=i.textContent?.toLowerCase()||"";return s.includes(r)||o.includes(r)})}destroy(){E.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!r)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const i=t.querySelector(`.${this.selectors.selected}`),s=t.querySelector(`.${this.selectors.arrow}`),o=t.querySelector(`.${this.selectors.optionsList}`),l=t.querySelector(`.${this.selectors.search} input`);s&&s.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),i.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const a=o.querySelectorAll(`.${this.selectors.items} ul li`),n=this.filterExcluded(a,this.selectors.excludedItems),h=t.querySelector("[aria-selected='true']");h&&this.defaultSelect(t,h,i,r);var c=[];l&&l.addEventListener("input",b=>{const f=b.target.value.trim();i&&(c=this.filterSearch(n,f),f?(a.forEach(A=>A.remove()),c.forEach(A=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)})):a.forEach(A=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)}),this.itemArrow(t,o,i,r,e))},{signal:e}),this.itemArrow(t,o,i,r,e),this.items(t,o,n,i,r,e)},{signal:e})}itemArrow(e,t,r,i,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let o=-1;const l=r.textContent?r.textContent:"",a=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",n=>{a&&a.focus();const h=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),b=c.length;if(b!==0)if(n.key==="ArrowDown"){n.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),o=(o+1)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),o=(o-1+b)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="Enter")if(n.preventDefault(),o>=0){r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),i.value=String(c[o].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}else this.toggle(e,t);else n.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=l),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,i,s,o){r.forEach((l,a)=>{l.addEventListener("click",()=>{const n=r[a];if(n){i.textContent=n.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const h=n.id||`${this.selectors.idPrefix}${a}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),s.value=String(r[a].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:o})})}defaultSelect(e,t,r,i){t&&(i.setAttribute("value",t.dataset.value??""),r.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){E.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const r=t.querySelector(`.${e.optionsList}`);r.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const r=t.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(r))||E.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!0){this.dbug=t;const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.costomEvent(r);const i=t.querySelectorAll(`.${this.selectors.btn}`);i.forEach(l=>{l.addEventListener("click",()=>{i.forEach(a=>{a.setAttribute("aria-checked","false"),a.setAttribute("tabindex","-1")}),l.setAttribute("aria-checked","true"),l.setAttribute("tabindex","0"),l.focus()},{signal:e}),l.addEventListener("keydown",a=>{let n=Array.from(i).indexOf(l);if(a.key==="ArrowRight"&&n++,a.key==="ArrowLeft"&&n--,n<0&&(n=i.length-1),n>=i.length&&(n=0),a.key==="Enter"){const c=s[n];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),a.preventDefault();return}const h=i[n];h&&(i.forEach(c=>c.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:e})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((l,a)=>{this.dbug&&(l.id||console.error(`Input #${a} in group has no ID!`),(!l.value||l.value==="on")&&console.warn(`Input #${l.id} does not have a value specified (currently "${l.value}")`));const n=i[a];n&&(l.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(l.checked)),n.setAttribute("tabindex",l.checked?"0":"-1"),l.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),l.addEventListener("click",()=>{s.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),s[a].checked=!0,s[a].setAttribute("checked",""),this.costomEvent(l)},{signal:e}))});const o=Array.from(s).find(l=>l.checked&&!l.disabled)||Array.from(s).find(l=>!l.disabled);if(o){const l=t.querySelector(`label[for="${o.id}"]`);l&&l.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t.detail),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class I{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}m.Button=I,m.ButtonGroup=$,m.Select=E,m.SpinBox=g,m.Switch=S,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
package/package.json 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.26",
5
+ "version": "0.0.27",
6
6
  "license": "MIT",
7
7
  "keywords": [
8
8
  "spinbox",