@popovandrii/ui-elements 0.0.22 → 0.0.24

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);
 });
@@ -211,25 +171,6 @@ select?.addEventListener('change', (e) => {
 <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/select-UI.png" alt="Switch Preview" width="700">
 </p>
 
-#### Button-Group UI
-```html
-  <div class="UIbg warning sm vertical border" role="group" aria-label="">
-    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck21">
-    <label class="UIbg-btn" for="btncheck21">radio 1</label>
-
-    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck22" disabled>
-    <label class="UIbg-btn" for="btncheck22">radio 2</label>
-
-    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck23">
-    <label class="UIbg-btn" for="btncheck23">radio 3</label>
-
-    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck24">
-    <label class="UIbg-btn" for="btncheck24">radio 4</label>
-  </div>
-```
-<p align="center">
-<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/button-group-UI.png" alt="Button-Group Preview" width="700">
-</p>
 
 # Information for Developers
 ```sh

package/dist/Button.d.ts

@@ -6,7 +6,8 @@ export declare class Button {
     private selectors;
     private buttons;
     private abortController;
-    constructor(selectors?: Partial<SelectorMap>);
+    private dbug;
+    constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
     destroy(): void;
     private costomEvent;
 }

package/dist/Select.d.ts

@@ -13,7 +13,8 @@ export declare class Select {
     private main;
     private itemArrowInitialized;
     private abortController;
-    constructor(selectors?: Partial<SelectorMap>);
+    private dbug;
+    constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
     private filterExcluded;
     private filterSearch;
     destroy(): void;

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