@popovandrii/ui-elements 0.0.28 → 0.0.31

package/README.md

@@ -1,4 +1,5 @@
 # UI elements
+Version 0.0.31
 
 TypeScript-based NPM plugin.
 The plugin includes interface elements with specific properties. 
@@ -67,6 +68,10 @@ app.use(
 </head>
   <script src="/ui-elements/js/index.umd.js"></script>
   <link rel='stylesheet' href="/ui-elements/js/style.css" />
+  <link rel='stylesheet' href="/ui-elements/js/theme-dark.css" />
+  <!-- <link rel='stylesheet' href="/ui-elements/js/theme-light.css" /> -->
+  <!-- <link rel='stylesheet' href="/ui-elements/js/theme-neon-dark.css" /> -->
+  <!-- <link rel='stylesheet' href="/ui-elements/js/theme-neon-light.css" /> -->
 </head>
 
 <!-- usually connected with a separate template -->
@@ -89,8 +94,10 @@ app.use(
 ## add Style
 ```js
 import '@popovandrii/ui-elements/style.css';
+// 4 design styles available.
+// theme-dark.css theme-neon-dark.css theme-neon-light.css
+import '@popovandrii/ui-elements/theme-light.css';
 ```
-*** You can not include styles from the package. Use your own styles.
 
 Abbreviation of the base (main) class of each element:<br>
 `UIsp`, UIdd, UIsw ...  (`UI + Spin-Box`, UI + Drop-Down, UI + Switch ...)<br>
@@ -127,50 +134,14 @@ Abbreviation of the base (main) class of each element:<br>
 
 #### [SpinBox README (button -> input)](/docs/spinBox/README.md)
 
-
 #### Select UI
-```html
-  <div class="UIselect" id="mySelect2" tabindex="0" role="listbox" aria-haspopup="listbox">
-    <span class="UIselect-selected">Select an option</span>
-    <input type="hidden" name="myId2">
-    <ul class="UIselect-options" hidden>
-      <li class="UIselect-options__search" role="search">
-        <input type="text" value="" aria-label="Search options">
-      </li>
-      <li class="UIselect-options__items" aria-hidden="true">
-        <ul role="group">
-          <li role="option" data-value="1">Option 1</li>
-          <li role="option" data-value="2">Option 2</li>
-          <li role="option" data-value="3">Option 3</li>
-          <li role="presentation" class="divider" aria-hidden="true"></li>
-          <li role="option" data-value="4">Option 4</li>
-          <li role="option" data-value="5">Option 5</li>
-          <li role="option" data-value="6">Option 6</li>
-          <li role="option" data-value="7">Option 7</li>
-          <li role="option" data-value="8">Option 8</li>
-          <li role="option" data-value="9">Option 9</li>
-          <li role="option" data-value="10">Option 10</li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-```
-
-##### Search
-```UIselect-options__search``` may be excluded
-##### Send to server
-```js
-const select = document.getElementById('mySelect');
-select?.addEventListener('ui-select-change', (e) => {
-  const value = e.detail?.value;
-  console.log('Value:', value);
-});
-```
 
 <p align="center">
 <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/select-UI.png" alt="Switch Preview" width="700">
 </p>
 
+#### [Select README](/docs/select/README.md)
+
 # Information for Developers
 ```sh
 git clone git@gitlab.com:AndreyPopov/ui-elements.git && cd ui-elements

package/dist/Button.d.ts

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

package/dist/Select.d.ts

@@ -6,6 +6,7 @@ interface SelectorMap {
     optionsList: string;
     search: string;
     items: string;
+    flash: string;
     excludedItems: Array<string>;
 }
 export declare class Select {
@@ -14,16 +15,24 @@ export declare class Select {
     private itemArrowInitialized;
     private abortController;
     private dbug;
+    private selectMap;
     constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
     private filterExcluded;
     private filterSearch;
     destroy(): void;
+    /**
+     *
+     * @param el ID elements
+     * @param value string or number
+     * @returns
+     */
+    setValue(el: HTMLElement, value: string | number): void;
     private event;
     private itemArrow;
     private itemsPosition;
     private items;
     private defaultSelect;
-    private costomEvent;
+    private customEvent;
     private toggle;
     private close;
     static closeAll(map: SelectorMap): void;

package/dist/Switch.d.ts

@@ -10,6 +10,12 @@ export declare class Switch {
     constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
     destroy(): void;
     private event;
-    private costomEvent;
+    /**
+     * Sets the state of a specific switch by its ID.
+     * @param id ID of the internal input element
+     * @param checked State (true/false)
+     */
+    setValue(id: string, value: boolean): void;
+    private customEvent;
 }
 export {};

package/dist/index.cjs.js

@@ -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 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,o=0,s=0)=>{e==o||e<o?(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 o=t.querySelectorAll(`.${this.selectors.btn}`),s=t.querySelector(`.${this.selectors.input}`);this.dbug&&(o||console.log(`Buttons (${this.selectors.btn}) not found in container`),s||console.log(`Input (${this.selectors.input}) not found in container`));const i=o[0],n=o[1],a=this.getValidDataNumber(t,"step"),l=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)<=l&&(s.value=l.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),l&&t.setAttribute("aria-valuemin",l.toFixed(a)),this.state(Number(s.value),i,n,l,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),i,n,l,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<l&&(d=l),s.value=d.toFixed(a),this.state(Number(s.value),i,n,l,h),c(s.value),s.value},m=(u,d=150)=>{b===null&&(b=window.setInterval(u,d))},E=()=>{b!==null&&(clearInterval(b),b=null)};n.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>v(d))},{signal:e}),n.addEventListener("touchstart",()=>m(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{n.addEventListener(u,E,{signal:e})}),n.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=v(d),this.costomEvent(s,r))},{signal:e}),i.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=f(d),this.costomEvent(s,r))},{signal:e}),i.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>f(d),100)},{signal:e}),i.addEventListener("touchstart",()=>m(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{i.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)<l&&(s.value=l.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),i,n,l,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}`),o=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),o&&(o.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",s=>{if(s.target.tagName==="INPUT")return;s.target.closest("label")||(o.checked=!o.checked);const n=t.querySelector("input");this.costomEvent(n,String(n?.checked)),t.setAttribute("aria-checked",String(o.checked))},{signal:e}),t.addEventListener("keydown",s=>{const i=t.querySelector("input");s.key==="ArrowRight"?(o.checked=!0,t.setAttribute("aria-checked",String(o.checked)),s.preventDefault(),this.costomEvent(i,String(!0))):s.key==="ArrowLeft"&&(o.checked=!1,t.setAttribute("aria-checked",String(o.checked)),s.preventDefault(),this.costomEvent(i,String(!1)))},{signal:e}))})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent:",r.detail),e.dispatchEvent(new CustomEvent("ui-switch-change",r))}}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(o=>typeof o=="string"?r.classList.contains(o)||r.id===o:r===o))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(o=>{const s=o.dataset.value?.toLowerCase()||"",i=o.textContent?.toLowerCase()||"";return s.includes(r)||i.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 o=t.querySelector(`.${this.selectors.selected}`),s=t.querySelector(`.${this.selectors.arrow}`),i=t.querySelector(`.${this.selectors.optionsList}`),n=t.querySelector(`.${this.selectors.search} input`);s&&s.addEventListener("click",()=>{this.toggle(t,i)},{signal:e}),o.addEventListener("click",()=>{this.toggle(t,i)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(i)},{signal:e});const a=i.querySelectorAll(`.${this.selectors.items} ul li`),l=this.filterExcluded(a,this.selectors.excludedItems),h=t.querySelector("[aria-selected='true']");h&&this.defaultSelect(t,h,o,r);var c=[];n&&n.addEventListener("input",b=>{const f=b.target.value.trim();o&&(c=this.filterSearch(l,f),f?(a.forEach(m=>m.remove()),c.forEach(m=>{i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)})):a.forEach(m=>{i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)}),this.itemArrow(t,i,o,r,e))},{signal:e}),this.itemArrow(t,i,o,r,e),this.items(t,i,l,o,r,e)},{signal:e})}itemArrow(e,t,r,o,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const n=r.textContent?r.textContent:"",a=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",l=>{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(l.key==="ArrowDown"){l.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),i=(i+1)%b,r.textContent=c[i].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[i].setAttribute("aria-selected","true");const v=c[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),c[i].scrollIntoView({block:"nearest"})}else if(l.key==="ArrowUp"){l.preventDefault(),i=(i-1+b)%b,r.textContent=c[i].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[i].setAttribute("aria-selected","true");const v=c[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),c[i].scrollIntoView({block:"nearest"})}else if(l.key==="Enter")if(l.preventDefault(),i>=0){r.textContent=c[i].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[i].setAttribute("aria-selected","true");const v=c[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),o.value=String(c[i].dataset.value),this.costomEvent(e,o.value),this.close(e,t)}else this.toggle(e,t);else l.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=n),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,o,s,i){r.forEach((n,a)=>{n.addEventListener("click",()=>{const l=r[a];if(l){o.textContent=l.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),l.setAttribute("aria-selected","true");const h=l.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:i})})}defaultSelect(e,t,r,o){t&&(o.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=!1){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 o=t.querySelectorAll(`.${this.selectors.btn}`);o.forEach(n=>{n.addEventListener("click",()=>{o.forEach(a=>{a.setAttribute("aria-checked","false"),a.setAttribute("tabindex","-1")}),n.setAttribute("aria-checked","true"),n.setAttribute("tabindex","0"),n.focus()},{signal:e}),n.addEventListener("keydown",a=>{let l=Array.from(o).indexOf(n);if(a.key==="ArrowRight"&&l++,a.key==="ArrowLeft"&&l--,l<0&&(l=o.length-1),l>=o.length&&(l=0),a.key==="Enter"){const c=s[l];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=o[l];h&&(o.forEach(c=>c.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:e})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((n,a)=>{this.dbug&&(n.id||console.error(`Input #${a} in group has no ID!`),(!n.value||n.value==="on")&&console.warn(`Input #${n.id} does not have a value specified (currently "${n.value}")`));const l=o[a];l&&(n.tabIndex=-1,l.setAttribute("role","radio"),l.setAttribute("aria-checked",String(n.checked)),l.setAttribute("tabindex",n.checked?"0":"-1"),n.disabled?l.setAttribute("aria-disabled","true"):l.removeAttribute("aria-disabled"),n.addEventListener("click",()=>{s.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),s[a].checked=!0,s[a].setAttribute("checked",""),this.costomEvent(n)},{signal:e}))});const i=Array.from(s).find(n=>n.checked&&!n.disabled)||Array.from(s).find(n=>!n.disabled);if(i){const n=t.querySelector(`label[for="${i.id}"]`);n&&n.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 L{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=L;exports.ButtonGroup=$;exports.Select=A;exports.SpinBox=x;exports.Switch=S;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...n,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};event(){this.abortController=new AbortController;let e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.dbug&&(r||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));let a=r[0],o=r[1],s=this.getValidDataNumber(t,`step`),c=this.getValidDataNumber(t,`min`),l=this.getValidDataNumber(t,`max`),u=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,`${e} items`)};Number(i.value)<=c&&(i.value=c.toFixed(s)),l===0?i.value=Number(i.value).toFixed(s):(Number(i.value)>=l&&(i.value=l.toFixed(s)),l&&t.setAttribute(`aria-valuemax`,l.toFixed(s))),c&&t.setAttribute(`aria-valuemin`,c.toFixed(s)),this.state(Number(i.value),a,o,c,l),u(i.value);let d=null,f=(e=1)=>{i.value=String(Math.abs(Number(i.value)));let t=parseFloat(i.value)||0;return t+=1*e/10**s,t>l&&l!==0&&(t=l),i.value=t.toFixed(s),this.state(Number(i.value),a,o,c,l),u(i.value),i.value},p=(e=1)=>{i.value=String(Math.abs(Number(i.value)));let t=parseFloat(i.value)||0;return t-=1*e/10**s,t<c&&(t=c),i.value=t.toFixed(s),this.state(Number(i.value),a,o,c,l),u(i.value),i.value},m=(e,t=150)=>{d===null&&(d=window.setInterval(e,t))},h=()=>{d!==null&&(clearInterval(d),d=null)};o.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;m(()=>f(t))},{signal:e}),o.addEventListener(`touchstart`,()=>m(f),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{o.addEventListener(t,h,{signal:e})}),o.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=f(t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=p(t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;m(()=>p(t),100)},{signal:e}),a.addEventListener(`touchstart`,()=>m(p,100),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{a.addEventListener(t,h,{signal:e})}),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`,`-`].includes(t)){e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),t===`ArrowUp`?f(n):p(n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,c=i.value.includes(`.`);(s===0&&!a||s>0&&!(a||o)||o&&c)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.costomEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>{Number(i.value)<c&&(i.value=c.toFixed(s)),Number(i.value)>l&&l!==0?i.value=l.toFixed(s):i.value=Number(i.value).toFixed(s),this.state(Number(i.value),a,o,c,l),this.costomEvent(i,i.value)},{signal:e})})}costomEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CostomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},t=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsw`,label:`UIsw-label`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),r?.disabled&&(t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let t=e.target.closest(`label`);t||(r.checked=!r.checked),t||r.dispatchEvent(new Event(`change`))},{signal:e}),t.addEventListener(`keydown`,e=>{let n=t.querySelector(`input`);e.key===`ArrowRight`?(r.checked=!0,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`true`)):e.key===`ArrowLeft`&&(r.checked=!1,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`false`))},{signal:e}))})}setValue(e,t){this.main?.forEach(n=>{let r=n.querySelector(`input#${e}`);r&&(r.checked=t,this.dbug&&console.log(`SetValue:`,r.checked),n.setAttribute(`aria-checked`,String(t)),this.customEvent(r,String(t)))})}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},n=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;selectMap=new Map;constructor(e={},t=!1){this.dbug=t;let n={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIFlash`,excludedItems:[`divider`,`test`]};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){e.closeAll(this.selectors),this.abortController&&(this.abortController.abort(),this.selectMap.clear()),this.main=null}setValue(e,t){let n=this.selectMap.get(e);if(!n){this.dbug&&console.warn(`UISelect: element not registered`);return}let{input:r,selected:i}=n,a=e.querySelector(`.${this.selectors.optionsList}`);if(!a)return;let o=Array.from(a.querySelectorAll(`.${this.selectors.items} ul li`)),s=this.filterExcluded(o,this.selectors.excludedItems),c=s.find(e=>String(e.dataset.value)===String(t));if(!c){this.dbug&&console.warn(`UISelect: value "${t}" not found`);return}s.forEach(e=>e.removeAttribute(`aria-selected`)),c.setAttribute(`aria-selected`,`true`),i.textContent=c.textContent??``,r.value=String(t),r.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,c.id||`${this.selectors.idPrefix}${s.indexOf(c)}`),this.customEvent(e,String(t)),e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0})}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YouUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n);var u=[];o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim();r&&(u=this.filterSearch(c,o),o?(s.forEach(e=>e.remove()),u.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)})):s.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)}),this.itemArrow(t,a,r,n,e))},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)},{signal:e})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=-1,o=n.textContent?n.textContent:``,s=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{s&&s.focus();let c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.length;if(u!==0)if(i.key===`ArrowDown`){i.preventDefault(),e.getAttribute(`aria-expanded`)===`false`&&this.toggle(e,t),a=(a+1)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let r=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,r),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`ArrowUp`){i.preventDefault(),a=(a-1+u)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let t=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,t),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`Enter`)if(i.preventDefault(),a>=0){n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let i=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,i),r.value=String(l[a].dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=o),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n.hidden=!0,t.setAttribute(`aria-expanded`,`false`)})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.abortController.signal})}},r=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.input}:checked`);n&&this.costomEvent(n);let r=t.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener(`click`,()=>{r.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus()},{signal:e}),t.addEventListener(`keydown`,e=>{let n=Array.from(r).indexOf(t);if(e.key===`ArrowRight`&&n++,e.key===`ArrowLeft`&&n--,n<0&&(n=r.length-1),n>=r.length&&(n=0),e.key===`Enter`){let t=i[n];t&&!t.disabled&&(i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),this.costomEvent(t)),e.preventDefault();return}let a=r[n];a&&(r.forEach(e=>e.setAttribute(`tabindex`,`-1`)),a.setAttribute(`tabindex`,`0`),a.focus())},{signal:e})});let i=t.querySelectorAll(`.${this.selectors.input}`);i.forEach((t,n)=>{this.dbug&&(t.id||console.error(`Input #${n} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=r[n];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),i[n].checked=!0,i[n].setAttribute(`checked`,``),this.costomEvent(t)},{signal:e}))});let a=Array.from(i).find(e=>e.checked&&!e.disabled)||Array.from(i).find(e=>!e.disabled);if(a){let e=t.querySelector(`label[for="${a.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}costomEvent(e){let 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))}},i=class{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!0){this.dbug=t;let n={main:`UIb`};this.selectors={...n,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener(`click`,()=>{this.customEvent(t,String(t.dataset.value))},{signal:e})})}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}};exports.Button=i,exports.ButtonGroup=r,exports.Select=n,exports.SpinBox=e,exports.Switch=t;