@popovandrii/ui-elements 0.0.23 → 0.0.25

package/README.md

@@ -98,76 +98,36 @@ Abbreviation of the base (main) class of each element:<br>
 
 ### UI Elements
 
-#### [Button group (radio)](/docs/button-group-radio/README.md)
 
-#### [Button (button)](/docs/button/README.md)
-
-
-#### Spin-Box
- This is a field with two buttons.<br> 
-- the ability to set the minimum and maximum value
-- the number of digits after the decimal point
-- accelerated increment when holding down the `Shift` key
-- setting the value directly in the field and increment using `arrows`
-- value validation
-- accessibility in accordance with the `A11Y` standard
-- colors (danger primary...) and markup (sm lg radius-none)
-- setting a custom CSS selector
+### Button group UI
+<p align="center">
+<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/button-group-UI.png" alt="Switch Preview" width="700">
+</p>
 
-```html
-  <div class="UIsp lg r-0" data-step="4" data-min="1" data-max="5" role="spinbutton" tabindex="0"
-    aria-label="Numeric input">
-    <button class="UIsp__btn" type="button" aria-label="Decrease value">
-      <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
-        <path d="M1 7h14v2H1" />
-      </svg>
-    </button>
-    <input class="UIsp__input" id="spin5-1" type="text" value="" aria-label="Current value" inputmode="decimal">
-    <button class="UIsp__btn" type="button" aria-label="Increase value">
-      <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
-        <path d="M9 1v6h6v2H9v6H7V9H1V7h6V1" />
-      </svg>
-    </button>
-  </div>
-```
-Important field <br>
-`data-step="0"` - number of digits after the decimal point  (0 = 0; 3 = 0.000; 5 = 0.00100) <br>
-`data-min="10"` - minimum value <br>
-`data-max="15"` - maximum value <br>
-The `<div class="UIsp-label">min 10 max 15 step 0</div>` field can be omitted.<br>
-Additional styles <br>
-size: lg sm `class="UIsp lg"`<br>
-colors: `danger` `info` `success` `primary` `warning`<br>
-radius: `r-0` `r-1`<br>
+#### [Button group README (radio)](/docs/button-group-radio/README.md)
 
+### Button UI
 <p align="center">
-<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/spinBox-UI.png" alt="SpinBox Preview" width="700">
+<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/button-UI.png" alt="Switch Preview" width="700">
 </p>
 
-#### Switch UI
+#### [Button README (button)](/docs/button/README.md)
 
-```html
-  <div class="UIsw" role="switch" tabindex="0">
-    <label class="UIsw-label" for="ch0" id="label-ch0">Label</label>
-    <input type="checkbox" id="ch0" name="btn3" checked hidden>
-    <span class="UIsw-slider"></span>
-    <span class="UIsw-slider__on">on</span>
-    <span class="UIsw-slider__off">off</span>
-  </div>
-```
-One of the `input` fields must be set to `checked` `hidden`<br>
-The `<div class="UIsw-label">Status:</div>` <br>`<span class="UIsw-slider__on">on</span>` <br>`<span class="UIsw-slider__off">off</span>` field can be omitted.<br>
-`aria-label` will be installed automatically.
+### Switch UI
+<p align="center">
+<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/switch-UI.png" alt="Switch Preview" width="700">
+</p>
 
-Additional styles <br>
-size: `lg` `sm`<br>
-colors: `danger` `info` `success` `primary` `warning`<br>
-radius: `r-0` `r-1`<br>
+#### [Switch README (input)](/docs/switch/README.md)
 
+### SpinBox UI
 <p align="center">
-<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/switch-UI.png" alt="Switch Preview" width="700">
+<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/spinBox-UI.png" alt="Switch Preview" width="700">
 </p>
 
+#### [SpinBox README (button -> input)](/docs/spinBox/README.md)
+
+
 #### Select UI
 ```html
   <div class="UIselect" id="mySelect2" tabindex="0" role="listbox" aria-haspopup="listbox">
@@ -201,7 +161,7 @@ radius: `r-0` `r-1`<br>
 ##### Send to server
 ```js
 const select = document.getElementById('mySelect');
-select?.addEventListener('change', (e) => {
+select?.addEventListener('ui-select-change', (e) => {
   const value = e.detail?.value;
   console.log('Value:', value);
 });

package/dist/ButtonGroup.d.ts

@@ -6,7 +6,11 @@ interface SelectorMap {
 export declare class ButtonGroup {
     #private;
     private selectors;
-    private groups;
-    constructor(selectors?: Partial<SelectorMap>);
+    private main;
+    private abortController;
+    private dbug;
+    constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
+    destroy(): void;
+    private costomEvent;
 }
 export {};

package/dist/SpinBox.d.ts

@@ -5,10 +5,15 @@ interface SelectorMap {
     disabledBtn: string;
 }
 export declare class SpinBox {
-    #private;
     private selectors;
     private spinBoxes;
-    constructor(selectors?: Partial<SelectorMap>);
+    private abortController;
+    private dbug;
+    constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
+    private state;
+    destroy(): void;
     getValidDataNumber: (el: HTMLElement, attr: string) => number;
+    private event;
+    private costomEvent;
 }
 export {};

package/dist/Switch.d.ts

@@ -3,9 +3,13 @@ interface SelectorMap {
     label: string;
 }
 export declare class Switch {
-    #private;
     private selectors;
     private main;
-    constructor(selectors?: Partial<SelectorMap>);
+    private abortController;
+    private dbug;
+    constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
+    destroy(): void;
+    private event;
+    private costomEvent;
 }
 export {};

package/dist/index.cjs.js

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