@popovandrii/ui-elements 0.0.23 → 0.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +19 -78
  2. package/dist/SpinBox.d.ts +7 -2
  3. package/dist/Switch.d.ts +6 -2
  4. package/dist/index.cjs.js +1 -1
  5. package/dist/index.es.js +316 -247
  6. package/dist/index.umd.js +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -98,76 +98,36 @@ Abbreviation of the base (main) class of each element:<br>
98
98
 
99
99
  ### UI Elements
100
100
 
101
- #### [Button group (radio)](/docs/button-group-radio/README.md)
102
101
 
103
- #### [Button (button)](/docs/button/README.md)
104
-
105
-
106
- #### Spin-Box
107
- This is a field with two buttons.<br>
108
- - the ability to set the minimum and maximum value
109
- - the number of digits after the decimal point
110
- - accelerated increment when holding down the `Shift` key
111
- - setting the value directly in the field and increment using `arrows`
112
- - value validation
113
- - accessibility in accordance with the `A11Y` standard
114
- - colors (danger primary...) and markup (sm lg radius-none)
115
- - setting a custom CSS selector
102
+ ### Button group UI
103
+ <p align="center">
104
+ <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/button-group-UI.png" alt="Switch Preview" width="700">
105
+ </p>
116
106
 
117
- ```html
118
- <div class="UIsp lg r-0" data-step="4" data-min="1" data-max="5" role="spinbutton" tabindex="0"
119
- aria-label="Numeric input">
120
- <button class="UIsp__btn" type="button" aria-label="Decrease value">
121
- <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
122
- <path d="M1 7h14v2H1" />
123
- </svg>
124
- </button>
125
- <input class="UIsp__input" id="spin5-1" type="text" value="" aria-label="Current value" inputmode="decimal">
126
- <button class="UIsp__btn" type="button" aria-label="Increase value">
127
- <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
128
- <path d="M9 1v6h6v2H9v6H7V9H1V7h6V1" />
129
- </svg>
130
- </button>
131
- </div>
132
- ```
133
- Important field <br>
134
- `data-step="0"` - number of digits after the decimal point (0 = 0; 3 = 0.000; 5 = 0.00100) <br>
135
- `data-min="10"` - minimum value <br>
136
- `data-max="15"` - maximum value <br>
137
- The `<div class="UIsp-label">min 10 max 15 step 0</div>` field can be omitted.<br>
138
- Additional styles <br>
139
- size: lg sm `class="UIsp lg"`<br>
140
- colors: `danger` `info` `success` `primary` `warning`<br>
141
- radius: `r-0` `r-1`<br>
107
+ #### [Button group README (radio)](/docs/button-group-radio/README.md)
142
108
 
109
+ ### Button UI
143
110
  <p align="center">
144
- <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/spinBox-UI.png" alt="SpinBox Preview" width="700">
111
+ <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/button-UI.png" alt="Switch Preview" width="700">
145
112
  </p>
146
113
 
147
- #### Switch UI
114
+ #### [Button README (button)](/docs/button/README.md)
148
115
 
149
- ```html
150
- <div class="UIsw" role="switch" tabindex="0">
151
- <label class="UIsw-label" for="ch0" id="label-ch0">Label</label>
152
- <input type="checkbox" id="ch0" name="btn3" checked hidden>
153
- <span class="UIsw-slider"></span>
154
- <span class="UIsw-slider__on">on</span>
155
- <span class="UIsw-slider__off">off</span>
156
- </div>
157
- ```
158
- One of the `input` fields must be set to `checked` `hidden`<br>
159
- 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>
160
- `aria-label` will be installed automatically.
116
+ ### Switch UI
117
+ <p align="center">
118
+ <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/switch-UI.png" alt="Switch Preview" width="700">
119
+ </p>
161
120
 
162
- Additional styles <br>
163
- size: `lg` `sm`<br>
164
- colors: `danger` `info` `success` `primary` `warning`<br>
165
- radius: `r-0` `r-1`<br>
121
+ #### [Switch README (input)](/docs/switch/README.md)
166
122
 
123
+ ### SpinBox UI
167
124
  <p align="center">
168
- <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/switch-UI.png" alt="Switch Preview" width="700">
125
+ <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/spinBox-UI.png" alt="Switch Preview" width="700">
169
126
  </p>
170
127
 
128
+ #### [SpinBox README (button -> input)](/docs/spinBox/README.md)
129
+
130
+
171
131
  #### Select UI
172
132
  ```html
173
133
  <div class="UIselect" id="mySelect2" tabindex="0" role="listbox" aria-haspopup="listbox">
@@ -201,7 +161,7 @@ radius: `r-0` `r-1`<br>
201
161
  ##### Send to server
202
162
  ```js
203
163
  const select = document.getElementById('mySelect');
204
- select?.addEventListener('change', (e) => {
164
+ select?.addEventListener('ui-select-change', (e) => {
205
165
  const value = e.detail?.value;
206
166
  console.log('Value:', value);
207
167
  });
@@ -211,25 +171,6 @@ select?.addEventListener('change', (e) => {
211
171
  <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/select-UI.png" alt="Switch Preview" width="700">
212
172
  </p>
213
173
 
214
- #### Button-Group UI
215
- ```html
216
- <div class="UIbg warning sm vertical border" role="group" aria-label="">
217
- <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck21">
218
- <label class="UIbg-btn" for="btncheck21">radio 1</label>
219
-
220
- <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck22" disabled>
221
- <label class="UIbg-btn" for="btncheck22">radio 2</label>
222
-
223
- <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck23">
224
- <label class="UIbg-btn" for="btncheck23">radio 3</label>
225
-
226
- <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck24">
227
- <label class="UIbg-btn" for="btncheck24">radio 4</label>
228
- </div>
229
- ```
230
- <p align="center">
231
- <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/button-group-UI.png" alt="Button-Group Preview" width="700">
232
- </p>
233
174
 
234
175
  # Information for Developers
235
176
  ```sh
package/dist/SpinBox.d.ts CHANGED
@@ -5,10 +5,15 @@ interface SelectorMap {
5
5
  disabledBtn: string;
6
6
  }
7
7
  export declare class SpinBox {
8
- #private;
9
8
  private selectors;
10
9
  private spinBoxes;
11
- constructor(selectors?: Partial<SelectorMap>);
10
+ private abortController;
11
+ private dbug;
12
+ constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
13
+ private state;
14
+ destroy(): void;
12
15
  getValidDataNumber: (el: HTMLElement, attr: string) => number;
16
+ private event;
17
+ private costomEvent;
13
18
  }
14
19
  export {};
package/dist/Switch.d.ts CHANGED
@@ -3,9 +3,13 @@ interface SelectorMap {
3
3
  label: string;
4
4
  }
5
5
  export declare class Switch {
6
- #private;
7
6
  private selectors;
8
7
  private main;
9
- constructor(selectors?: Partial<SelectorMap>);
8
+ private abortController;
9
+ private dbug;
10
+ constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
11
+ destroy(): void;
12
+ private event;
13
+ private costomEvent;
10
14
  }
11
15
  export {};
package/dist/index.cjs.js CHANGED
@@ -1 +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;
1
+ "use strict";var B=Object.defineProperty;var q=f=>{throw TypeError(f)};var F=(f,t,e)=>t in f?B(f,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):f[t]=e;var b=(f,t,e)=>F(f,typeof t!="symbol"?t+"":t,e),K=(f,t,e)=>t.has(f)||q("Cannot "+e);var 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;
package/dist/index.es.js CHANGED
@@ -1,147 +1,216 @@
1
- var _ = Object.defineProperty;
2
- var F = (h) => {
3
- throw TypeError(h);
1
+ var B = Object.defineProperty;
2
+ var q = (f) => {
3
+ throw TypeError(f);
4
4
  };
5
- var T = (h, e, t) => e in h ? _(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
6
- var f = (h, e, t) => T(h, typeof e != "symbol" ? e + "" : e, t), B = (h, e, t) => e.has(h) || F("Cannot " + t);
7
- var y = (h, e, t) => (B(h, e, "read from private field"), t ? t.call(h) : e.get(h)), p = (h, e, t) => e.has(h) ? F("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(h) : e.set(h, t);
8
- var x = (h, e, t) => (B(h, e, "access private method"), t);
9
- var E, k, K;
10
- class H {
11
- constructor(e = {}) {
12
- p(this, k);
13
- f(this, "selectors");
14
- f(this, "spinBoxes");
15
- p(this, E, (e, t, r, a = 0, s = 0) => {
16
- 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));
5
+ var F = (f, e, t) => e in f ? B(f, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : f[e] = t;
6
+ var b = (f, e, t) => F(f, typeof e != "symbol" ? e + "" : e, t), K = (f, e, t) => e.has(f) || q("Cannot " + t);
7
+ var x = (f, e, t) => e.has(f) ? q("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(f) : e.set(f, t);
8
+ var C = (f, e, t) => (K(f, e, "access private method"), t);
9
+ class _ {
10
+ constructor(e = {}, t = !1) {
11
+ b(this, "selectors");
12
+ b(this, "spinBoxes");
13
+ b(this, "abortController", new AbortController());
14
+ b(this, "dbug");
15
+ b(this, "state", (e, t, s, c = 0, o = 0) => {
16
+ e == c || e < c ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), o !== 0 && (e == o || e > o ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1));
17
17
  });
18
- f(this, "getValidDataNumber", (e, t) => {
19
- const r = e.getAttribute(`data-${t}`);
20
- return r === null || r.trim() === "" || isNaN(Number(r)) ? 0 : Number(r);
18
+ b(this, "getValidDataNumber", (e, t) => {
19
+ const s = e.getAttribute(`data-${t}`);
20
+ return s === null || s.trim() === "" || isNaN(Number(s)) ? 0 : Number(s);
21
21
  });
22
- const t = {
22
+ this.dbug = t;
23
+ const s = {
23
24
  main: "UIsp",
24
25
  btn: "UIsp__btn",
25
26
  input: "UIsp__input",
26
27
  disabledBtn: "disabled"
27
28
  };
28
- this.selectors = { ...t, ...e }, this.spinBoxes = document.querySelectorAll(
29
+ this.selectors = { ...s, ...e }, this.spinBoxes = document.querySelectorAll(
29
30
  `.${this.selectors.main}`
30
- ), x(this, k, K).call(this);
31
+ ), this.event();
31
32
  }
32
- }
33
- E = new WeakMap(), k = new WeakSet(), K = function() {
34
- this.spinBoxes.forEach((e) => {
35
- const t = e.querySelectorAll(
36
- `.${this.selectors.btn}`
37
- ), r = t[0], a = t[1], s = e.querySelector(
38
- `.${this.selectors.input}`
39
- ), i = this.getValidDataNumber(e, "step"), o = this.getValidDataNumber(e, "min"), l = this.getValidDataNumber(e, "max"), c = (u) => {
40
- e.setAttribute("aria-valuenow", String(u)), e.setAttribute("aria-valuetext", `${u} items`);
41
- };
42
- 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, E).call(this, Number(s.value), r, a, o, l), c(s.value);
43
- let b = null;
44
- const d = (u = 1) => {
45
- s.value = String(Math.abs(Number(s.value)));
46
- let n = parseFloat(s.value) || 0;
47
- n = n + 1 * u / Math.pow(10, i), n > l && l !== 0 && (n = l), s.value = n.toFixed(i), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
48
- }, m = (u = 1) => {
49
- s.value = String(Math.abs(Number(s.value)));
50
- let n = parseFloat(s.value) || 0;
51
- n = n - 1 * u / Math.pow(10, i), n < o && (n = o), s.value = n.toFixed(i), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
52
- }, v = (u, n = 150) => {
53
- b === null && (b = window.setInterval(u, n));
54
- }, A = () => {
55
- b !== null && (clearInterval(b), b = null);
56
- };
57
- a.addEventListener("mousedown", (u) => {
58
- const n = u.shiftKey ? 3 : 1;
59
- v(() => d(n));
60
- }), a.addEventListener("touchstart", () => v(d)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
61
- (u) => {
62
- a.addEventListener(u, A);
63
- }
64
- ), a.addEventListener("click", (u) => {
65
- const n = u.shiftKey ? 3 : 1;
66
- b === null && d(n);
67
- }), r.addEventListener("click", (u) => {
68
- const n = u.shiftKey ? 3 : 1;
69
- b === null && m(n);
70
- }), r.addEventListener("mousedown", (u) => {
71
- const n = u.shiftKey ? 3 : 1;
72
- v(() => m(n), 100);
73
- }), r.addEventListener("touchstart", () => v(m, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
74
- (u) => {
75
- r.addEventListener(u, A);
76
- }
77
- ), s.addEventListener("keydown", (u) => {
78
- const n = u.key, g = u.shiftKey ? 3 : 1;
79
- if ([
80
- "Backspace",
81
- "Delete",
82
- "ArrowLeft",
83
- "ArrowRight",
84
- "Tab",
85
- "Enter",
86
- "Home",
87
- "End"
88
- ].includes(n) || (u.ctrlKey || u.metaKey) && ["a", "c", "v", "x"].includes(n.toLowerCase()))
89
- return;
90
- if (["e", "+", "-"].includes(n)) {
91
- u.preventDefault();
92
- return;
93
- }
94
- if (n === "ArrowUp" || n === "ArrowDown") {
95
- u.preventDefault();
96
- const U = parseFloat(s.value) || 0, D = 1 * g / Math.pow(10, i);
97
- let $ = n === "ArrowUp" ? U + D : U - D;
98
- $ < 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, E).call(this, Number(s.value), r, a, o, l), c(s.value);
99
- return;
100
- }
101
- const I = n === "," ? "." : n, q = /^[0-9]$/.test(I), N = I === ".", M = s.value.includes(".");
102
- (i === 0 && !q || i > 0 && !(q || N) || N && M) && u.preventDefault();
103
- }), s.addEventListener("change", () => {
104
- 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, E).call(this, Number(s.value), r, a, o, l);
33
+ destroy() {
34
+ this.abortController && this.abortController.abort(), this.spinBoxes = null;
35
+ }
36
+ event() {
37
+ var t;
38
+ this.abortController = new AbortController();
39
+ const e = this.abortController.signal;
40
+ (t = this.spinBoxes) == null || t.forEach((s) => {
41
+ let c;
42
+ const o = s.querySelectorAll(
43
+ `.${this.selectors.btn}`
44
+ ), i = o[0], n = o[1], r = s.querySelector(
45
+ `.${this.selectors.input}`
46
+ ), l = this.getValidDataNumber(s, "step"), h = this.getValidDataNumber(s, "min"), a = this.getValidDataNumber(s, "max"), m = (u) => {
47
+ s.setAttribute("aria-valuenow", String(u)), s.setAttribute("aria-valuetext", `${u} items`);
48
+ };
49
+ 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);
50
+ let v = null;
51
+ const A = (u = 1) => {
52
+ r.value = String(Math.abs(Number(r.value)));
53
+ let d = parseFloat(r.value) || 0;
54
+ return d = d + 1 * u / Math.pow(10, 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;
55
+ }, y = (u = 1) => {
56
+ r.value = String(Math.abs(Number(r.value)));
57
+ let d = parseFloat(r.value) || 0;
58
+ return d = d - 1 * u / Math.pow(10, l), d < h && (d = h), r.value = d.toFixed(l), this.state(Number(r.value), i, n, h, a), m(r.value), r.value;
59
+ }, E = (u, d = 150) => {
60
+ v === null && (v = window.setInterval(u, d));
61
+ }, g = () => {
62
+ v !== null && (clearInterval(v), v = null);
63
+ };
64
+ n.addEventListener(
65
+ "mousedown",
66
+ (u) => {
67
+ const d = u.shiftKey ? 3 : 1;
68
+ E(() => A(d));
69
+ },
70
+ { signal: e }
71
+ ), n.addEventListener("touchstart", () => E(A), {
72
+ signal: e
73
+ }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
74
+ (u) => {
75
+ n.addEventListener(u, g, { signal: e });
76
+ }
77
+ ), n.addEventListener(
78
+ "click",
79
+ (u) => {
80
+ const d = u.shiftKey ? 3 : 1;
81
+ v === null && (c = A(d), this.costomEvent(n, c));
82
+ },
83
+ { signal: e }
84
+ ), i.addEventListener(
85
+ "click",
86
+ (u) => {
87
+ const d = u.shiftKey ? 3 : 1;
88
+ v === null && (c = y(d), this.costomEvent(i, c));
89
+ },
90
+ { signal: e }
91
+ ), i.addEventListener(
92
+ "mousedown",
93
+ (u) => {
94
+ const d = u.shiftKey ? 3 : 1;
95
+ E(() => y(d), 100);
96
+ },
97
+ { signal: e }
98
+ ), i.addEventListener("touchstart", () => E(y, 100), {
99
+ signal: e
100
+ }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
101
+ (u) => {
102
+ i.addEventListener(u, g, { signal: e });
103
+ }
104
+ ), r.addEventListener(
105
+ "keydown",
106
+ (u) => {
107
+ const d = u.key, S = u.shiftKey ? 5 : 1;
108
+ if ([
109
+ "Backspace",
110
+ "Delete",
111
+ "ArrowLeft",
112
+ "ArrowRight",
113
+ "Tab",
114
+ "Enter",
115
+ "Home",
116
+ "End"
117
+ ].includes(d) || (u.ctrlKey || u.metaKey) && ["a", "c", "v", "x"].includes(d.toLowerCase()))
118
+ return;
119
+ if (["e", "+", "-"].includes(d)) {
120
+ u.preventDefault();
121
+ return;
122
+ }
123
+ if (d === "ArrowUp" || d === "ArrowDown") {
124
+ u.preventDefault(), d === "ArrowUp" ? A(S) : y(S);
125
+ return;
126
+ }
127
+ const L = d === "," ? "." : d, $ = /^[0-9]$/.test(L), I = L === ".", N = r.value.includes(".");
128
+ (l === 0 && !$ || l > 0 && !($ || I) || I && N) && u.preventDefault();
129
+ },
130
+ { signal: e }
131
+ ), r.addEventListener(
132
+ "keyup",
133
+ (u) => {
134
+ (u.key === "ArrowUp" || u.key === "ArrowDown") && this.costomEvent(r, r.value);
135
+ },
136
+ { signal: e }
137
+ ), r.addEventListener(
138
+ "change",
139
+ () => {
140
+ 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);
141
+ },
142
+ { signal: e }
143
+ );
105
144
  });
106
- });
107
- };
108
- var S, V;
109
- class O {
110
- constructor(e = {}) {
111
- p(this, S);
112
- f(this, "selectors");
113
- f(this, "main");
114
- const t = {
145
+ }
146
+ costomEvent(e, t) {
147
+ this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
148
+ new CustomEvent("ui-spinbox-change", {
149
+ detail: { val: t },
150
+ bubbles: !0
151
+ })
152
+ );
153
+ }
154
+ }
155
+ class z {
156
+ constructor(e = {}, t = !1) {
157
+ b(this, "selectors");
158
+ b(this, "main", null);
159
+ b(this, "abortController", new AbortController());
160
+ b(this, "dbug");
161
+ this.dbug = t;
162
+ const s = {
115
163
  main: "UIsw",
116
164
  label: "UIsw-label"
117
165
  };
118
- this.selectors = { ...t, ...e }, this.main = document.querySelectorAll(
166
+ this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
119
167
  `.${this.selectors.main}`
120
- ), x(this, S, V).call(this);
168
+ ), this.event();
169
+ }
170
+ destroy() {
171
+ this.abortController && this.abortController.abort(), this.main = null;
172
+ }
173
+ event() {
174
+ var t;
175
+ this.abortController = new AbortController();
176
+ const e = this.abortController.signal;
177
+ (t = this.main) == null || t.forEach((s) => {
178
+ const c = s.querySelector(`.${this.selectors.label}`), o = s.querySelector("input");
179
+ c && c.id && s.setAttribute("aria-labelledby", c.id), o && (o.checked ? s.setAttribute("aria-checked", "true") : s.setAttribute("aria-checked", "false"), s.addEventListener(
180
+ "click",
181
+ () => {
182
+ o.checked = !o.checked;
183
+ const i = s.querySelector("input");
184
+ this.costomEvent(s, String(i == null ? void 0 : i.checked)), s.setAttribute("aria-checked", String(o.checked));
185
+ },
186
+ { signal: e }
187
+ ), s.addEventListener(
188
+ "keydown",
189
+ (i) => {
190
+ 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)));
191
+ },
192
+ { signal: e }
193
+ ));
194
+ });
195
+ }
196
+ costomEvent(e, t) {
197
+ this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
198
+ new CustomEvent("ui-switch-change", {
199
+ detail: { val: t },
200
+ bubbles: !0
201
+ })
202
+ );
121
203
  }
122
204
  }
123
- S = new WeakSet(), V = function() {
124
- this.main.forEach((e) => {
125
- const t = e.querySelector(`.${this.selectors.label}`), r = e.querySelector("input");
126
- 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", () => {
127
- r.checked = !r.checked, e.setAttribute("aria-checked", String(r.checked));
128
- }), e.addEventListener("keydown", (s) => {
129
- s.key === "ArrowRight" ? (r.checked = !0, a(String(r.checked)), s.preventDefault()) : s.key === "ArrowLeft" && (r.checked = !1, a(String(r.checked)), s.preventDefault());
130
- }));
131
- const a = (s) => {
132
- e.setAttribute("aria-checked", String(s));
133
- };
134
- });
135
- };
136
205
  class w {
137
206
  constructor(e = {}, t = !1) {
138
- f(this, "selectors");
139
- f(this, "main", null);
140
- f(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
141
- f(this, "abortController", new AbortController());
142
- f(this, "dbug");
207
+ b(this, "selectors");
208
+ b(this, "main", null);
209
+ b(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
210
+ b(this, "abortController", new AbortController());
211
+ b(this, "dbug");
143
212
  this.dbug = t;
144
- const r = {
213
+ const s = {
145
214
  idPrefix: "UI-option-",
146
215
  main: "UIselect",
147
216
  selected: "UIselect-selected",
@@ -152,19 +221,19 @@ class w {
152
221
  excludedItems: ["divider", "test"]
153
222
  // class=""
154
223
  };
155
- this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
224
+ this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
156
225
  `.${this.selectors.main}`
157
226
  ), this.event(), this.initGlobalListener(this.selectors);
158
227
  }
159
228
  filterExcluded(e, t) {
160
- return Array.from(e).filter((r) => !t.some((a) => typeof a == "string" ? r.classList.contains(a) || r.id === a : r === a));
229
+ return Array.from(e).filter((s) => !t.some((c) => typeof c == "string" ? s.classList.contains(c) || s.id === c : s === c));
161
230
  }
162
231
  filterSearch(e, t) {
163
- const r = t.trim().toLowerCase();
164
- return e.filter((a) => {
165
- var o, l;
166
- const s = ((o = a.dataset.value) == null ? void 0 : o.toLowerCase()) || "", i = ((l = a.textContent) == null ? void 0 : l.toLowerCase()) || "";
167
- return s.includes(r) || i.includes(r);
232
+ const s = t.trim().toLowerCase();
233
+ return e.filter((c) => {
234
+ var n, r;
235
+ const o = ((n = c.dataset.value) == null ? void 0 : n.toLowerCase()) || "", i = ((r = c.textContent) == null ? void 0 : r.toLowerCase()) || "";
236
+ return o.includes(s) || i.includes(s);
168
237
  });
169
238
  }
170
239
  destroy() {
@@ -175,108 +244,108 @@ class w {
175
244
  this.abortController = new AbortController();
176
245
  const e = this.abortController.signal;
177
246
  (t = this.main) == null || t.forEach(
178
- (r) => {
179
- const a = r.querySelector(
247
+ (s) => {
248
+ const c = s.querySelector(
180
249
  `.${this.selectors.main} input[type='hidden']`
181
250
  );
182
251
  try {
183
- if (!a)
252
+ if (!c)
184
253
  throw new Error('<input type="hidden" name="YouUniqueId">');
185
254
  } catch (v) {
186
255
  return console.warn("Not found:", v.message);
187
256
  }
188
- const s = r.querySelector(
257
+ const o = s.querySelector(
189
258
  `.${this.selectors.selected}`
190
- ), i = r.querySelector(
259
+ ), i = s.querySelector(
191
260
  `.${this.selectors.arrow}`
192
- ), o = r.querySelector(
261
+ ), n = s.querySelector(
193
262
  `.${this.selectors.optionsList}`
194
- ), l = r.querySelector(
263
+ ), r = s.querySelector(
195
264
  `.${this.selectors.search} input`
196
265
  );
197
266
  i && i.addEventListener(
198
267
  "click",
199
268
  () => {
200
- this.toggle(r, o);
269
+ this.toggle(s, n);
201
270
  },
202
271
  { signal: e }
203
- ), s.addEventListener(
272
+ ), o.addEventListener(
204
273
  "click",
205
274
  () => {
206
- this.toggle(r, o);
275
+ this.toggle(s, n);
207
276
  },
208
277
  { signal: e }
209
- ), r.addEventListener(
278
+ ), s.addEventListener(
210
279
  "click",
211
280
  () => {
212
- this.itemsPosition(o);
281
+ this.itemsPosition(n);
213
282
  },
214
283
  { signal: e }
215
284
  );
216
- const c = o.querySelectorAll(
285
+ const l = n.querySelectorAll(
217
286
  `.${this.selectors.items} ul li`
218
- ), b = this.filterExcluded(
219
- c,
287
+ ), h = this.filterExcluded(
288
+ l,
220
289
  this.selectors.excludedItems
221
- ), d = r.querySelector(
290
+ ), a = s.querySelector(
222
291
  "[aria-selected='true']"
223
292
  );
224
- d && this.defaultSelect(r, d, s, a);
293
+ a && this.defaultSelect(s, a, o, c);
225
294
  var m = [];
226
- l && l.addEventListener(
295
+ r && r.addEventListener(
227
296
  "input",
228
297
  (v) => {
229
- const u = v.target.value.trim();
230
- s && (m = this.filterSearch(b, u), u ? (c.forEach((n) => n.remove()), m.forEach((n) => {
298
+ const y = v.target.value.trim();
299
+ o && (m = this.filterSearch(h, y), y ? (l.forEach((E) => E.remove()), m.forEach((E) => {
231
300
  var g;
232
- (g = o.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(n);
233
- })) : c.forEach((n) => {
301
+ (g = n.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(E);
302
+ })) : l.forEach((E) => {
234
303
  var g;
235
- (g = o.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(n);
236
- }), this.itemArrow(r, o, s, a, e));
304
+ (g = n.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(E);
305
+ }), this.itemArrow(s, n, o, c, e));
237
306
  },
238
307
  { signal: e }
239
- ), this.itemArrow(r, o, s, a, e), this.items(r, o, b, s, a, e);
308
+ ), this.itemArrow(s, n, o, c, e), this.items(s, n, h, o, c, e);
240
309
  },
241
310
  { signal: e }
242
311
  );
243
312
  }
244
- itemArrow(e, t, r, a, s) {
313
+ itemArrow(e, t, s, c, o) {
245
314
  if (this.itemArrowInitialized.has(e)) return;
246
315
  this.itemArrowInitialized.add(e);
247
316
  let i = -1;
248
- const o = r.textContent ? r.textContent : "", l = e.querySelector(
317
+ const n = s.textContent ? s.textContent : "", r = e.querySelector(
249
318
  `.${this.selectors.search} input`
250
319
  );
251
320
  e.addEventListener(
252
321
  "keydown",
253
- (c) => {
254
- l && l.focus();
255
- const b = Array.from(
322
+ (l) => {
323
+ r && r.focus();
324
+ const h = Array.from(
256
325
  t.querySelectorAll(`.${this.selectors.optionsList} ul li`)
257
- ), d = this.filterExcluded(
258
- b,
326
+ ), a = this.filterExcluded(
327
+ h,
259
328
  this.selectors.excludedItems
260
- ), m = d.length;
329
+ ), m = a.length;
261
330
  if (m !== 0)
262
- if (c.key === "ArrowDown") {
263
- 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");
264
- const v = d[i].id || `${this.selectors.idPrefix}${i}`;
265
- e.setAttribute("aria-activedescendant", v), d[i].scrollIntoView({ block: "nearest" });
266
- } else if (c.key === "ArrowUp") {
267
- 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");
268
- const v = d[i].id || `${this.selectors.idPrefix}${i}`;
269
- e.setAttribute("aria-activedescendant", v), d[i].scrollIntoView({ block: "nearest" });
270
- } else if (c.key === "Enter")
271
- if (c.preventDefault(), i >= 0) {
272
- r.textContent = d[i].textContent, d.forEach((A) => A.removeAttribute("aria-selected")), d[i].setAttribute("aria-selected", "true");
273
- const v = d[i].id || `${this.selectors.idPrefix}${i}`;
274
- e.setAttribute("aria-activedescendant", v), a.value = String(d[i].dataset.value), this.costomEvent(e, a.value), this.close(e, t);
331
+ if (l.key === "ArrowDown") {
332
+ l.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), i = (i + 1) % m, s.textContent = a[i].textContent, a.forEach((A) => A.removeAttribute("aria-selected")), a[i].setAttribute("aria-selected", "true");
333
+ const v = a[i].id || `${this.selectors.idPrefix}${i}`;
334
+ e.setAttribute("aria-activedescendant", v), a[i].scrollIntoView({ block: "nearest" });
335
+ } else if (l.key === "ArrowUp") {
336
+ 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");
337
+ const v = a[i].id || `${this.selectors.idPrefix}${i}`;
338
+ e.setAttribute("aria-activedescendant", v), a[i].scrollIntoView({ block: "nearest" });
339
+ } else if (l.key === "Enter")
340
+ if (l.preventDefault(), i >= 0) {
341
+ s.textContent = a[i].textContent, a.forEach((A) => A.removeAttribute("aria-selected")), a[i].setAttribute("aria-selected", "true");
342
+ const v = a[i].id || `${this.selectors.idPrefix}${i}`;
343
+ e.setAttribute("aria-activedescendant", v), c.value = String(a[i].dataset.value), this.costomEvent(e, c.value), this.close(e, t);
275
344
  } else
276
345
  this.toggle(e, t);
277
- else c.key === "Escape" && (e.getAttribute("aria-activedescendant") || (r.textContent = o), this.close(e, t));
346
+ else l.key === "Escape" && (e.getAttribute("aria-activedescendant") || (s.textContent = n), this.close(e, t));
278
347
  },
279
- { signal: s }
348
+ { signal: o }
280
349
  );
281
350
  }
282
351
  itemsPosition(e) {
@@ -285,24 +354,24 @@ class w {
285
354
  );
286
355
  t && t.scrollIntoView({ block: "nearest" });
287
356
  }
288
- items(e, t, r, a, s, i) {
289
- r.forEach((o, l) => {
290
- o.addEventListener(
357
+ items(e, t, s, c, o, i) {
358
+ s.forEach((n, r) => {
359
+ n.addEventListener(
291
360
  "click",
292
361
  () => {
293
- const c = r[l];
294
- if (c) {
295
- a.textContent = c.textContent, r.forEach((d) => d.removeAttribute("aria-selected")), c.setAttribute("aria-selected", "true");
296
- const b = c.id || `${this.selectors.idPrefix}${l}`;
297
- 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);
362
+ const l = s[r];
363
+ if (l) {
364
+ c.textContent = l.textContent, s.forEach((a) => a.removeAttribute("aria-selected")), l.setAttribute("aria-selected", "true");
365
+ const h = l.id || `${this.selectors.idPrefix}${r}`;
366
+ e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), o.value = String(s[r].dataset.value), this.costomEvent(e, o.value), this.close(e, t);
298
367
  }
299
368
  },
300
369
  { signal: i }
301
370
  );
302
371
  });
303
372
  }
304
- defaultSelect(e, t, r, a) {
305
- t && (a.setAttribute("value", t.dataset.value ?? ""), r.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
373
+ defaultSelect(e, t, s, c) {
374
+ t && (c.setAttribute("value", t.dataset.value ?? ""), s.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
306
375
  }
307
376
  costomEvent(e, t) {
308
377
  this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
@@ -320,29 +389,29 @@ class w {
320
389
  }
321
390
  static closeAll(e) {
322
391
  document.querySelectorAll(`.${e.main}`).forEach((t) => {
323
- const r = t.querySelector(`.${e.optionsList}`);
324
- r.hidden = !0, t.setAttribute("aria-expanded", "false");
392
+ const s = t.querySelector(`.${e.optionsList}`);
393
+ s.hidden = !0, t.setAttribute("aria-expanded", "false");
325
394
  });
326
395
  }
327
396
  initGlobalListener(e) {
328
397
  document.addEventListener(
329
398
  "click",
330
399
  (t) => {
331
- const r = t.target;
400
+ const s = t.target;
332
401
  [...document.querySelectorAll(`.${e.main}`)].some(
333
- (s) => s.contains(r)
402
+ (o) => o.contains(s)
334
403
  ) || w.closeAll(e);
335
404
  },
336
405
  { signal: this.abortController.signal }
337
406
  );
338
407
  }
339
408
  }
340
- var C, P;
341
- class Q {
409
+ var p, U;
410
+ class M {
342
411
  constructor(e = {}) {
343
- p(this, C);
344
- f(this, "selectors");
345
- f(this, "groups");
412
+ x(this, p);
413
+ b(this, "selectors");
414
+ b(this, "groups");
346
415
  const t = {
347
416
  main: "UIbg",
348
417
  btn: "UIbg-btn",
@@ -350,81 +419,81 @@ class Q {
350
419
  };
351
420
  this.selectors = { ...t, ...e }, this.groups = document.querySelectorAll(
352
421
  `.${this.selectors.main}`
353
- ), x(this, C, P).call(this);
422
+ ), C(this, p, U).call(this);
354
423
  }
355
424
  }
356
- C = new WeakSet(), P = function() {
425
+ p = new WeakSet(), U = function() {
357
426
  this.groups.forEach((e) => {
358
427
  const t = e.querySelectorAll(
359
428
  `.${this.selectors.btn}`
360
429
  );
361
- t.forEach((s) => {
362
- s.addEventListener("click", () => {
430
+ t.forEach((o) => {
431
+ o.addEventListener("click", () => {
363
432
  t.forEach((i) => {
364
433
  i.setAttribute("aria-checked", "false"), i.setAttribute("tabindex", "-1");
365
- }), s.setAttribute("aria-checked", "true"), s.setAttribute("tabindex", "0"), s.focus();
366
- }), s.addEventListener("keydown", (i) => {
367
- let o = Array.from(t).indexOf(s);
368
- if (i.key === "ArrowRight" && o++, i.key === "ArrowLeft" && o--, o < 0 && (o = t.length - 1), o >= t.length && (o = 0), i.key === "Enter") {
369
- const c = r[o];
370
- c && !c.disabled && (r.forEach((b) => {
371
- b.checked = !1, b.removeAttribute("checked");
372
- }), c.checked = !0, c.setAttribute("checked", ""), c.dispatchEvent(
434
+ }), o.setAttribute("aria-checked", "true"), o.setAttribute("tabindex", "0"), o.focus();
435
+ }), o.addEventListener("keydown", (i) => {
436
+ let n = Array.from(t).indexOf(o);
437
+ if (i.key === "ArrowRight" && n++, i.key === "ArrowLeft" && n--, n < 0 && (n = t.length - 1), n >= t.length && (n = 0), i.key === "Enter") {
438
+ const l = s[n];
439
+ l && !l.disabled && (s.forEach((h) => {
440
+ h.checked = !1, h.removeAttribute("checked");
441
+ }), l.checked = !0, l.setAttribute("checked", ""), l.dispatchEvent(
373
442
  new CustomEvent("ui-button-group-change", {
374
- detail: { id: c.id, value: c.value },
443
+ detail: { id: l.id, value: l.value },
375
444
  bubbles: !0
376
445
  })
377
446
  )), i.preventDefault();
378
447
  return;
379
448
  }
380
- const l = t[o];
381
- l && (t.forEach((c) => c.setAttribute("tabindex", "-1")), l.setAttribute("tabindex", "0"), l.focus());
449
+ const r = t[n];
450
+ r && (t.forEach((l) => l.setAttribute("tabindex", "-1")), r.setAttribute("tabindex", "0"), r.focus());
382
451
  });
383
452
  });
384
- const r = e.querySelectorAll(
453
+ const s = e.querySelectorAll(
385
454
  `.${this.selectors.input}`
386
455
  );
387
- r.forEach((s, i) => {
388
- const o = t[i];
389
- 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", () => {
390
- r.forEach((l) => {
391
- l.checked = !1, l.removeAttribute("checked");
392
- }), r[i].checked = !0, r[i].setAttribute("checked", ""), s.dispatchEvent(
456
+ s.forEach((o, i) => {
457
+ const n = t[i];
458
+ 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", () => {
459
+ s.forEach((r) => {
460
+ r.checked = !1, r.removeAttribute("checked");
461
+ }), s[i].checked = !0, s[i].setAttribute("checked", ""), o.dispatchEvent(
393
462
  new CustomEvent("ui-button-group-change", {
394
- detail: { id: s.id, value: s.value },
463
+ detail: { id: o.id, value: o.value },
395
464
  bubbles: !0
396
465
  })
397
466
  );
398
- }), s.addEventListener("ui-button-group-change", (l) => {
399
- console.log("detail:", l.detail);
467
+ }), o.addEventListener("ui-button-group-change", (r) => {
468
+ console.log("detail:", r.detail);
400
469
  }));
401
470
  });
402
- const a = Array.from(r).find(
403
- (s) => !s.checked && !s.disabled
471
+ const c = Array.from(s).find(
472
+ (o) => !o.checked && !o.disabled
404
473
  );
405
- if (a) {
406
- const s = e.querySelector(
407
- `label[for="${a.id}"]`
474
+ if (c) {
475
+ const o = e.querySelector(
476
+ `label[for="${c.id}"]`
408
477
  );
409
- s && s.setAttribute("tabindex", "0");
478
+ o && o.setAttribute("tabindex", "0");
410
479
  }
411
480
  });
412
481
  };
413
- var L, z;
414
- class W {
482
+ var k, D;
483
+ class T {
415
484
  constructor(e = {}, t = !1) {
416
- p(this, L);
417
- f(this, "selectors");
418
- f(this, "buttons", null);
419
- f(this, "abortController", new AbortController());
420
- f(this, "dbug");
485
+ x(this, k);
486
+ b(this, "selectors");
487
+ b(this, "buttons", null);
488
+ b(this, "abortController", new AbortController());
489
+ b(this, "dbug");
421
490
  this.dbug = t;
422
- const r = {
491
+ const s = {
423
492
  main: "UIb"
424
493
  };
425
- this.selectors = { ...r, ...e }, this.buttons = document.querySelectorAll(
494
+ this.selectors = { ...s, ...e }, this.buttons = document.querySelectorAll(
426
495
  `.${this.selectors.main}`
427
- ), x(this, L, z).call(this);
496
+ ), C(this, k, D).call(this);
428
497
  }
429
498
  destroy() {
430
499
  this.abortController && this.abortController.abort(), this.buttons = null;
@@ -442,24 +511,24 @@ class W {
442
511
  );
443
512
  }
444
513
  }
445
- L = new WeakSet(), z = function() {
514
+ k = new WeakSet(), D = function() {
446
515
  var t;
447
516
  this.abortController = new AbortController();
448
517
  const e = this.abortController.signal;
449
- (t = this.buttons) == null || t.forEach((r) => {
450
- r.addEventListener(
518
+ (t = this.buttons) == null || t.forEach((s) => {
519
+ s.addEventListener(
451
520
  "click",
452
521
  () => {
453
- this.costomEvent(r, String(r.dataset.value));
522
+ this.costomEvent(s, String(s.dataset.value));
454
523
  },
455
524
  { signal: e }
456
525
  );
457
526
  });
458
527
  };
459
528
  export {
460
- W as Button,
461
- Q as ButtonGroup,
529
+ T as Button,
530
+ M as ButtonGroup,
462
531
  w as Select,
463
- H as SpinBox,
464
- O as Switch
532
+ _ as SpinBox,
533
+ z as Switch
465
534
  };
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
1
- (function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.UiElements={}))})(this,function(d){"use strict";var H=Object.defineProperty;var V=d=>{throw TypeError(d)};var O=(d,h,m)=>h in d?H(d,h,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[h]=m;var v=(d,h,m)=>O(d,typeof h!="symbol"?h+"":h,m),P=(d,h,m)=>h.has(d)||V("Cannot "+m);var w=(d,h,m)=>(P(d,h,"read from private field"),m?m.call(d):h.get(d)),x=(d,h,m)=>h.has(d)?V("Cannot add the same private member more than once"):h instanceof WeakSet?h.add(d):h.set(d,m);var S=(d,h,m)=>(P(d,h,"access private method"),m);var E,C,T,L,M,$,z,I,_;class h{constructor(e={}){x(this,C);v(this,"selectors");v(this,"spinBoxes");x(this,E,(e,r,s,n=0,t=0)=>{e==n||e<n?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1),t!==0&&(e==t||e>t?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))});v(this,"getValidDataNumber",(e,r)=>{const s=e.getAttribute(`data-${r}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)});const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),S(this,C,T).call(this)}}E=new WeakMap,C=new WeakSet,T=function(){this.spinBoxes.forEach(e=>{const r=e.querySelectorAll(`.${this.selectors.btn}`),s=r[0],n=r[1],t=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(t.value)<=o&&(t.value=o.toFixed(i)),l!==0?(Number(t.value)>=l&&(t.value=l.toFixed(i)),l&&e.setAttribute("aria-valuemax",l.toFixed(i))):t.value=Number(t.value).toFixed(i),o&&e.setAttribute("aria-valuemin",o.toFixed(i)),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value);let b=null;const f=(u=1)=>{t.value=String(Math.abs(Number(t.value)));let a=parseFloat(t.value)||0;a=a+1*u/Math.pow(10,i),a>l&&l!==0&&(a=l),t.value=a.toFixed(i),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value)},g=(u=1)=>{t.value=String(Math.abs(Number(t.value)));let a=parseFloat(t.value)||0;a=a-1*u/Math.pow(10,i),a<o&&(a=o),t.value=a.toFixed(i),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value)},A=(u,a=150)=>{b===null&&(b=window.setInterval(u,a))},y=()=>{b!==null&&(clearInterval(b),b=null)};n.addEventListener("mousedown",u=>{const a=u.shiftKey?3:1;A(()=>f(a))}),n.addEventListener("touchstart",()=>A(f)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{n.addEventListener(u,y)}),n.addEventListener("click",u=>{const a=u.shiftKey?3:1;b===null&&f(a)}),s.addEventListener("click",u=>{const a=u.shiftKey?3:1;b===null&&g(a)}),s.addEventListener("mousedown",u=>{const a=u.shiftKey?3:1;A(()=>g(a),100)}),s.addEventListener("touchstart",()=>A(g,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{s.addEventListener(u,y)}),t.addEventListener("keydown",u=>{const a=u.key,p=u.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(a)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(a.toLowerCase()))return;if(["e","+","-"].includes(a)){u.preventDefault();return}if(a==="ArrowUp"||a==="ArrowDown"){u.preventDefault();const F=parseFloat(t.value)||0,K=1*p/Math.pow(10,i);let N=a==="ArrowUp"?F+K:F-K;N<o&&(N=o),t.value=N.toFixed(i),Number(t.value)<o&&(t.value=o.toFixed(i)),Number(t.value)>l&&l!==0&&(t.value=l.toFixed(i)),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value);return}const U=a===","?".":a,D=/^[0-9]$/.test(U),B=U===".",j=t.value.includes(".");(i===0&&!D||i>0&&!(D||B)||B&&j)&&u.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<o&&(t.value=o.toFixed(i)),Number(t.value)>l&&l!==0?t.value=l.toFixed(i):t.value=Number(t.value).toFixed(i),w(this,E).call(this,Number(t.value),s,n,o,l)})})};class m{constructor(e={}){x(this,L);v(this,"selectors");v(this,"main");const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),S(this,L,M).call(this)}}L=new WeakSet,M=function(){this.main.forEach(e=>{const r=e.querySelector(`.${this.selectors.label}`),s=e.querySelector("input");r&&r.id&&e.setAttribute("aria-labelledby",r.id),s&&(s.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{s.checked=!s.checked,e.setAttribute("aria-checked",String(s.checked))}),e.addEventListener("keydown",t=>{t.key==="ArrowRight"?(s.checked=!0,n(String(s.checked)),t.preventDefault()):t.key==="ArrowLeft"&&(s.checked=!1,n(String(s.checked)),t.preventDefault())}));const n=t=>{e.setAttribute("aria-checked",String(t))}})};class k{constructor(e={},r=!1){v(this,"selectors");v(this,"main",null);v(this,"itemArrowInitialized",new WeakSet);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=r;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,r){return Array.from(e).filter(s=>!r.some(n=>typeof n=="string"?s.classList.contains(n)||s.id===n:s===n))}filterSearch(e,r){const s=r.trim().toLowerCase();return e.filter(n=>{var o,l;const t=((o=n.dataset.value)==null?void 0:o.toLowerCase())||"",i=((l=n.textContent)==null?void 0:l.toLowerCase())||"";return t.includes(s)||i.includes(s)})}destroy(){k.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var r;this.abortController=new AbortController;const e=this.abortController.signal;(r=this.main)==null||r.forEach(s=>{const n=s.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!n)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(A){return console.warn("Not found:",A.message)}const t=s.querySelector(`.${this.selectors.selected}`),i=s.querySelector(`.${this.selectors.arrow}`),o=s.querySelector(`.${this.selectors.optionsList}`),l=s.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(s,o)},{signal:e}),t.addEventListener("click",()=>{this.toggle(s,o)},{signal:e}),s.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const c=o.querySelectorAll(`.${this.selectors.items} ul li`),b=this.filterExcluded(c,this.selectors.excludedItems),f=s.querySelector("[aria-selected='true']");f&&this.defaultSelect(s,f,t,n);var g=[];l&&l.addEventListener("input",A=>{const u=A.target.value.trim();t&&(g=this.filterSearch(b,u),u?(c.forEach(a=>a.remove()),g.forEach(a=>{var p;(p=o.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(a)})):c.forEach(a=>{var p;(p=o.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(a)}),this.itemArrow(s,o,t,n,e))},{signal:e}),this.itemArrow(s,o,t,n,e),this.items(s,o,b,t,n,e)},{signal:e})}itemArrow(e,r,s,n,t){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const o=s.textContent?s.textContent:"",l=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",c=>{l&&l.focus();const b=Array.from(r.querySelectorAll(`.${this.selectors.optionsList} ul li`)),f=this.filterExcluded(b,this.selectors.excludedItems),g=f.length;if(g!==0)if(c.key==="ArrowDown"){c.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,r),i=(i+1)%g,s.textContent=f[i].textContent,f.forEach(y=>y.removeAttribute("aria-selected")),f[i].setAttribute("aria-selected","true");const A=f[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",A),f[i].scrollIntoView({block:"nearest"})}else if(c.key==="ArrowUp"){c.preventDefault(),i=(i-1+g)%g,s.textContent=f[i].textContent,f.forEach(y=>y.removeAttribute("aria-selected")),f[i].setAttribute("aria-selected","true");const A=f[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",A),f[i].scrollIntoView({block:"nearest"})}else if(c.key==="Enter")if(c.preventDefault(),i>=0){s.textContent=f[i].textContent,f.forEach(y=>y.removeAttribute("aria-selected")),f[i].setAttribute("aria-selected","true");const A=f[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",A),n.value=String(f[i].dataset.value),this.costomEvent(e,n.value),this.close(e,r)}else this.toggle(e,r);else c.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(s.textContent=o),this.close(e,r))},{signal:t})}itemsPosition(e){const r=e.querySelector('[aria-selected="true"]');r&&r.scrollIntoView({block:"nearest"})}items(e,r,s,n,t,i){s.forEach((o,l)=>{o.addEventListener("click",()=>{const c=s[l];if(c){n.textContent=c.textContent,s.forEach(f=>f.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),t.value=String(s[l].dataset.value),this.costomEvent(e,t.value),this.close(e,r)}},{signal:i})})}defaultSelect(e,r,s,n){r&&(n.setAttribute("value",r.dataset.value??""),s.textContent=r.textContent??"",e.setAttribute("aria-activedescendant",r.id||""))}costomEvent(e,r){this.dbug&&console.log(`CostomEvent: { detail: ${r}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:r},bubbles:!0}))}toggle(e,r){k.closeAll(this.selectors),r.hidden?(r.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,r)}close(e,r){r.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(r=>{const s=r.querySelector(`.${e.optionsList}`);s.hidden=!0,r.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",r=>{const s=r.target;[...document.querySelectorAll(`.${e.main}`)].some(t=>t.contains(s))||k.closeAll(e)},{signal:this.abortController.signal})}}class G{constructor(e={}){x(this,$);v(this,"selectors");v(this,"groups");const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.groups=document.querySelectorAll(`.${this.selectors.main}`),S(this,$,z).call(this)}}$=new WeakSet,z=function(){this.groups.forEach(e=>{const r=e.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener("click",()=>{r.forEach(i=>{i.setAttribute("aria-checked","false"),i.setAttribute("tabindex","-1")}),t.setAttribute("aria-checked","true"),t.setAttribute("tabindex","0"),t.focus()}),t.addEventListener("keydown",i=>{let o=Array.from(r).indexOf(t);if(i.key==="ArrowRight"&&o++,i.key==="ArrowLeft"&&o--,o<0&&(o=r.length-1),o>=r.length&&(o=0),i.key==="Enter"){const c=s[o];c&&!c.disabled&&(s.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=r[o];l&&(r.forEach(c=>c.setAttribute("tabindex","-1")),l.setAttribute("tabindex","0"),l.focus())})});const s=e.querySelectorAll(`.${this.selectors.input}`);s.forEach((t,i)=>{const o=r[i];o&&(t.tabIndex=-1,o.setAttribute("role","radio"),o.setAttribute("aria-checked",String(t.checked)),o.setAttribute("tabindex",t.checked?"0":"-1"),t.disabled?o.setAttribute("aria-disabled","true"):o.removeAttribute("aria-disabled"),t.addEventListener("click",()=>{s.forEach(l=>{l.checked=!1,l.removeAttribute("checked")}),s[i].checked=!0,s[i].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",l=>{console.log("detail:",l.detail)}))});const n=Array.from(s).find(t=>!t.checked&&!t.disabled);if(n){const t=e.querySelector(`label[for="${n.id}"]`);t&&t.setAttribute("tabindex","0")}})};class R{constructor(e={},r=!1){x(this,I);v(this,"selectors");v(this,"buttons",null);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=r;const s={main:"UIb"};this.selectors={...s,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),S(this,I,_).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}costomEvent(e,r){if(!r||r==="undefined"||r.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${r}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:r},bubbles:!0}))}}I=new WeakSet,_=function(){var r;this.abortController=new AbortController;const e=this.abortController.signal;(r=this.buttons)==null||r.forEach(s=>{s.addEventListener("click",()=>{this.costomEvent(s,String(s.dataset.value))},{signal:e})})},d.Button=R,d.ButtonGroup=G,d.Select=k,d.SpinBox=h,d.Switch=m,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
1
+ (function(h,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(h=typeof globalThis<"u"?globalThis:h||self,b(h.UiElements={}))})(this,function(h){"use strict";var T=Object.defineProperty;var N=h=>{throw TypeError(h)};var M=(h,b,A)=>b in h?T(h,b,{enumerable:!0,configurable:!0,writable:!0,value:A}):h[b]=A;var v=(h,b,A)=>M(h,typeof b!="symbol"?b+"":b,A),_=(h,b,A)=>b.has(h)||N("Cannot "+A);var L=(h,b,A)=>b.has(h)?N("Cannot add the same private member more than once"):b instanceof WeakSet?b.add(h):b.set(h,A);var $=(h,b,A)=>(_(h,b,"access private method"),A);var x,B,C,F;class b{constructor(e={},s=!1){v(this,"selectors");v(this,"spinBoxes");v(this,"abortController",new AbortController);v(this,"dbug");v(this,"state",(e,s,t,c=0,o=0)=>{e==c||e<c?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1),o!==0&&(e==o||e>o?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1))});v(this,"getValidDataNumber",(e,s)=>{const t=e.getAttribute(`data-${s}`);return t===null||t.trim()===""||isNaN(Number(t))?0:Number(t)});this.dbug=s;const t={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...t,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}event(){var s;this.abortController=new AbortController;const e=this.abortController.signal;(s=this.spinBoxes)==null||s.forEach(t=>{let c;const o=t.querySelectorAll(`.${this.selectors.btn}`),i=o[0],n=o[1],r=t.querySelector(`.${this.selectors.input}`),l=this.getValidDataNumber(t,"step"),f=this.getValidDataNumber(t,"min"),a=this.getValidDataNumber(t,"max"),g=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(r.value)<=f&&(r.value=f.toFixed(l)),a!==0?(Number(r.value)>=a&&(r.value=a.toFixed(l)),a&&t.setAttribute("aria-valuemax",a.toFixed(l))):r.value=Number(r.value).toFixed(l),f&&t.setAttribute("aria-valuemin",f.toFixed(l)),this.state(Number(r.value),i,n,f,a),g(r.value);let m=null;const E=(u=1)=>{r.value=String(Math.abs(Number(r.value)));let d=parseFloat(r.value)||0;return d=d+1*u/Math.pow(10,l),d>a&&a!==0&&(d=a),r.value=d.toFixed(l),this.state(Number(r.value),i,n,f,a),g(r.value),r.value},w=(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<f&&(d=f),r.value=d.toFixed(l),this.state(Number(r.value),i,n,f,a),g(r.value),r.value},y=(u,d=150)=>{m===null&&(m=window.setInterval(u,d))},p=()=>{m!==null&&(clearInterval(m),m=null)};n.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;y(()=>E(d))},{signal:e}),n.addEventListener("touchstart",()=>y(E),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{n.addEventListener(u,p,{signal:e})}),n.addEventListener("click",u=>{const d=u.shiftKey?3:1;m===null&&(c=E(d),this.costomEvent(n,c))},{signal:e}),i.addEventListener("click",u=>{const d=u.shiftKey?3:1;m===null&&(c=w(d),this.costomEvent(i,c))},{signal:e}),i.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;y(()=>w(d),100)},{signal:e}),i.addEventListener("touchstart",()=>y(w,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{i.addEventListener(u,p,{signal:e})}),r.addEventListener("keydown",u=>{const d=u.key,I=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?E(I):w(I);return}const q=d===","?".":d,U=/^[0-9]$/.test(q),D=q===".",V=r.value.includes(".");(l===0&&!U||l>0&&!(U||D)||D&&V)&&u.preventDefault()},{signal:e}),r.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(r,r.value)},{signal:e}),r.addEventListener("change",()=>{Number(r.value)<f&&(r.value=f.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,f,a),this.costomEvent(r,r.value)},{signal:e})})}costomEvent(e,s){this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-spinbox-change",{detail:{val:s},bubbles:!0}))}}class A{constructor(e={},s=!1){v(this,"selectors");v(this,"main",null);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=s;const t={main:"UIsw",label:"UIsw-label"};this.selectors={...t,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){var s;this.abortController=new AbortController;const e=this.abortController.signal;(s=this.main)==null||s.forEach(t=>{const c=t.querySelector(`.${this.selectors.label}`),o=t.querySelector("input");c&&c.id&&t.setAttribute("aria-labelledby",c.id),o&&(o.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{o.checked=!o.checked;const i=t.querySelector("input");this.costomEvent(t,String(i==null?void 0:i.checked)),t.setAttribute("aria-checked",String(o.checked))},{signal:e}),t.addEventListener("keydown",i=>{i.key==="ArrowRight"?(o.checked=!0,t.setAttribute("aria-checked",String(o.checked)),i.preventDefault(),this.costomEvent(t,String(!0))):i.key==="ArrowLeft"&&(o.checked=!1,t.setAttribute("aria-checked",String(o.checked)),i.preventDefault(),this.costomEvent(t,String(!1)))},{signal:e}))})}costomEvent(e,s){this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:s},bubbles:!0}))}}class k{constructor(e={},s=!1){v(this,"selectors");v(this,"main",null);v(this,"itemArrowInitialized",new WeakSet);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=s;const t={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={...t,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,s){return Array.from(e).filter(t=>!s.some(c=>typeof c=="string"?t.classList.contains(c)||t.id===c:t===c))}filterSearch(e,s){const t=s.trim().toLowerCase();return e.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(t)||i.includes(t)})}destroy(){k.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(t=>{const c=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!c)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(m){return console.warn("Not found:",m.message)}const o=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),n=t.querySelector(`.${this.selectors.optionsList}`),r=t.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(t,n)},{signal:e}),o.addEventListener("click",()=>{this.toggle(t,n)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(n)},{signal:e});const l=n.querySelectorAll(`.${this.selectors.items} ul li`),f=this.filterExcluded(l,this.selectors.excludedItems),a=t.querySelector("[aria-selected='true']");a&&this.defaultSelect(t,a,o,c);var g=[];r&&r.addEventListener("input",m=>{const w=m.target.value.trim();o&&(g=this.filterSearch(f,w),w?(l.forEach(y=>y.remove()),g.forEach(y=>{var p;(p=n.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(y)})):l.forEach(y=>{var p;(p=n.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(y)}),this.itemArrow(t,n,o,c,e))},{signal:e}),this.itemArrow(t,n,o,c,e),this.items(t,n,f,o,c,e)},{signal:e})}itemArrow(e,s,t,c,o){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const n=t.textContent?t.textContent:"",r=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",l=>{r&&r.focus();const f=Array.from(s.querySelectorAll(`.${this.selectors.optionsList} ul li`)),a=this.filterExcluded(f,this.selectors.excludedItems),g=a.length;if(g!==0)if(l.key==="ArrowDown"){l.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,s),i=(i+1)%g,t.textContent=a[i].textContent,a.forEach(E=>E.removeAttribute("aria-selected")),a[i].setAttribute("aria-selected","true");const m=a[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",m),a[i].scrollIntoView({block:"nearest"})}else if(l.key==="ArrowUp"){l.preventDefault(),i=(i-1+g)%g,t.textContent=a[i].textContent,a.forEach(E=>E.removeAttribute("aria-selected")),a[i].setAttribute("aria-selected","true");const m=a[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",m),a[i].scrollIntoView({block:"nearest"})}else if(l.key==="Enter")if(l.preventDefault(),i>=0){t.textContent=a[i].textContent,a.forEach(E=>E.removeAttribute("aria-selected")),a[i].setAttribute("aria-selected","true");const m=a[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",m),c.value=String(a[i].dataset.value),this.costomEvent(e,c.value),this.close(e,s)}else this.toggle(e,s);else l.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(t.textContent=n),this.close(e,s))},{signal:o})}itemsPosition(e){const s=e.querySelector('[aria-selected="true"]');s&&s.scrollIntoView({block:"nearest"})}items(e,s,t,c,o,i){t.forEach((n,r)=>{n.addEventListener("click",()=>{const l=t[r];if(l){c.textContent=l.textContent,t.forEach(a=>a.removeAttribute("aria-selected")),l.setAttribute("aria-selected","true");const f=l.id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",f),o.value=String(t[r].dataset.value),this.costomEvent(e,o.value),this.close(e,s)}},{signal:i})})}defaultSelect(e,s,t,c){s&&(c.setAttribute("value",s.dataset.value??""),t.textContent=s.textContent??"",e.setAttribute("aria-activedescendant",s.id||""))}costomEvent(e,s){this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:s},bubbles:!0}))}toggle(e,s){k.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 t=s.querySelector(`.${e.optionsList}`);t.hidden=!0,s.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",s=>{const t=s.target;[...document.querySelectorAll(`.${e.main}`)].some(o=>o.contains(t))||k.closeAll(e)},{signal:this.abortController.signal})}}class K{constructor(e={}){L(this,x);v(this,"selectors");v(this,"groups");const s={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...s,...e},this.groups=document.querySelectorAll(`.${this.selectors.main}`),$(this,x,B).call(this)}}x=new WeakSet,B=function(){this.groups.forEach(e=>{const s=e.querySelectorAll(`.${this.selectors.btn}`);s.forEach(o=>{o.addEventListener("click",()=>{s.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(s).indexOf(o);if(i.key==="ArrowRight"&&n++,i.key==="ArrowLeft"&&n--,n<0&&(n=s.length-1),n>=s.length&&(n=0),i.key==="Enter"){const l=t[n];l&&!l.disabled&&(t.forEach(f=>{f.checked=!1,f.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=s[n];r&&(s.forEach(l=>l.setAttribute("tabindex","-1")),r.setAttribute("tabindex","0"),r.focus())})});const t=e.querySelectorAll(`.${this.selectors.input}`);t.forEach((o,i)=>{const n=s[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",()=>{t.forEach(r=>{r.checked=!1,r.removeAttribute("checked")}),t[i].checked=!0,t[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(t).find(o=>!o.checked&&!o.disabled);if(c){const o=e.querySelector(`label[for="${c.id}"]`);o&&o.setAttribute("tabindex","0")}})};class P{constructor(e={},s=!1){L(this,C);v(this,"selectors");v(this,"buttons",null);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=s;const t={main:"UIb"};this.selectors={...t,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),$(this,C,F).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}this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:s},bubbles:!0}))}}C=new WeakSet,F=function(){var s;this.abortController=new AbortController;const e=this.abortController.signal;(s=this.buttons)==null||s.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})},h.Button=P,h.ButtonGroup=K,h.Select=k,h.SpinBox=b,h.Switch=A,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";.UIbg{display:grid;gap:.5rem;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);align-content:center}.UIbg.vertical{grid-auto-flow:row;grid-auto-rows:min-content}.UIbg-input{position:absolute;opacity:0;pointer-events:none}.UIbg-input:checked+.UIbg-btn{background-color:var(--c-g-700);color:var(--c-g-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--c-g-100);color:var(--c-g-500);border-color:var(--c-g-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIbg>.UIbg-btn{cursor:pointer;height:2.5rem;padding:.125rem;display:flex;justify-content:center;align-items:center;background-color:var(--c-g-100);border:1px solid var(--c-g-500);border-radius:.5rem;font-size:1rem;color:var(--c-g-700);transition:background-color .4s ease,color .2s ease}.UIbg.r-0>.UIbg-btn{border-radius:0}.UIbg.r-round>.UIbg-btn{border-radius:2.5rem}.UIbg.r-round.g-0>.UIbg-btn:first-of-type{border-radius:2.5rem 0 0 2.5rem}.UIbg.r-round.g-0>.UIbg-btn:last-of-type{border-radius:0 2.5rem 2.5rem 0}.UIbg.g-0{gap:0}.UIbg.g-0>.UIbg-btn{border-radius:0;border:0}.UIbg.g-1{gap:1rem}.UIbg.sm>.UIbg-btn{height:2rem;font-size:.9rem}.UIbg.lg>.UIbg-btn{height:3rem;font-size:1.1rem}.UIbg.border{border:1px solid var(--c-g-100);border-radius:.5rem;padding:5px}.UIbg.border:hover{border-color:var(--c-g-700)}.UIbg.border.r-0{border-radius:0}.UIbg.border.r-round{border-radius:2.5rem}.UIbg.border.danger{border-color:var(--c-d-100)}.UIbg.border.danger:hover{border-color:var(--c-d-700)}.UIbg.border.info{border-color:var(--c-i-100)}.UIbg.border.info:hover{border-color:var(--c-i-700)}.UIbg.border.primary{border-color:var(--c-p-100)}.UIbg.border.primary:hover{border-color:var(--c-p-700)}.UIbg.border.success{border-color:var(--c-s-100)}.UIbg.border.success:hover{border-color:var(--c-s-700)}.UIbg.border.warning{border-color:var(--c-w-100)}.UIbg.border.warning:hover{border-color:var(--c-w-700)}.UIbg.danger>.UIbg-btn{background-color:var(--c-d-300);border-color:var(--c-d-500);color:var(--c-d-900)}.UIbg.danger>.UIbg-btn:hover{background-color:var(--c-d-300);color:var(--c-d-50)}.UIbg.danger>:checked+.UIbg-btn{background-color:var(--c-d-700);color:var(--c-d-50)}.UIbg.danger>:disabled+.UIbg-btn{background-color:var(--c-d-100);color:var(--c-d-500);border-color:var(--c-d-300)}.UIbg.info>.UIbg-btn{background-color:var(--c-i-300);border-color:var(--c-i-500);color:var(--c-i-900)}.UIbg.info>.UIbg-btn:hover{background-color:var(--c-i-300);color:var(--c-i-50)}.UIbg.info>:checked+.UIbg-btn{background-color:var(--c-i-700);color:var(--c-i-50)}.UIbg.info>:disabled+.UIbg-btn{background-color:var(--c-i-100);color:var(--c-i-500);border-color:var(--c-i-300)}.UIbg.primary>.UIbg-btn{background-color:var(--c-p-300);border-color:var(--c-p-500);color:var(--c-p-900)}.UIbg.primary>.UIbg-btn:hover{background-color:var(--c-p-300);color:var(--c-p-50)}.UIbg.primary>:checked+.UIbg-btn{background-color:var(--c-p-700);color:var(--c-p-50)}.UIbg.primary>:disabled+.UIbg-btn{background-color:var(--c-p-100);color:var(--c-p-500);border-color:var(--c-p-300)}.UIbg.success>.UIbg-btn{background-color:var(--c-s-300);border-color:var(--c-s-500);color:var(--c-s-900)}.UIbg.success>.UIbg-btn:hover{background-color:var(--c-s-300);color:var(--c-s-50)}.UIbg.success>:checked+.UIbg-btn{background-color:var(--c-s-700);color:var(--c-s-50)}.UIbg.success>:disabled+.UIbg-btn{background-color:var(--c-s-100);color:var(--c-s-500);border-color:var(--c-s-300)}.UIbg.warning>.UIbg-btn{background-color:var(--c-w-300);border-color:var(--c-w-500);color:var(--c-w-900)}.UIbg.warning>.UIbg-btn:hover{background-color:var(--c-w-300);color:var(--c-w-50)}.UIbg.warning>:checked+.UIbg-btn{background-color:var(--c-w-700);color:var(--c-w-50)}.UIbg.warning>:disabled+.UIbg-btn{background-color:var(--c-w-100);color:var(--c-w-500);border-color:var(--c-w-300)}.UIb{display:grid;gap:.5rem;grid-auto-flow:column;grid-auto-columns:minmax(min-content);cursor:pointer;height:2.5rem;padding:.125rem .75rem;display:flex;justify-content:center;align-items:center;border-radius:.5rem;font-size:1rem;background-color:var(--c-g-100);border:1px solid var(--c-g-500);color:var(--c-g-950);transition:background-color .4s ease,color .1s ease}.UIb:hover{background-color:var(--c-g-700);color:var(--c-g-50)}.UIb:disabled{background-color:var(--c-g-100);border-color:var(--c-g-100);color:var(--c-g-300);cursor:not-allowed}.UIb.expand{width:100%}.UIb.between{justify-content:space-between}.UIb.around{justify-content:space-around}.UIb.r-0{border-radius:0}.UIb.r-round{border-radius:2.5rem}.UIb.g-0{gap:0}.UIb.g-1{gap:1rem}.UIb.sm{height:2rem;font-size:.9rem}.UIb.lg{height:3rem;font-size:1.1rem}.UIb.danger{background-color:var(--c-d-100);border-color:var(--c-d-500);color:var(--c-d-950)}.UIb.danger:hover{background-color:var(--c-d-700);border-color:var(--c-d-700);color:var(--c-d-50)}.UIb.danger:disabled{background-color:var(--c-d-100);border-color:var(--c-d-100);color:var(--c-d-300)}.UIb.info{background-color:var(--c-i-100);border-color:var(--c-i-500);color:var(--c-i-950)}.UIb.info:hover{background-color:var(--c-i-700);border-color:var(--c-i-700);color:var(--c-i-50)}.UIb.info:disabled{background-color:var(--c-i-100);border-color:var(--c-i-100);color:var(--c-i-300)}.UIb.primary{background-color:var(--c-p-100);border-color:var(--c-p-500);color:var(--c-p-950)}.UIb.primary:hover{background-color:var(--c-p-700);border-color:var(--c-p-700);color:var(--c-p-50)}.UIb.primary:disabled{background-color:var(--c-p-100);border-color:var(--c-p-100);color:var(--c-p-300)}.UIb.success{background-color:var(--c-s-100);border-color:var(--c-s-500);color:var(--c-s-950)}.UIb.success:hover{background-color:var(--c-s-700);border-color:var(--c-s-700);color:var(--c-s-50)}.UIb.success:disabled{background-color:var(--c-s-100);border-color:var(--c-s-100);color:var(--c-s-300)}.UIb.warning{background-color:var(--c-w-100);border-color:var(--c-w-500);color:var(--c-w-950)}.UIb.warning:hover{background-color:var(--c-w-700);border-color:var(--c-w-700);color:var(--c-w-50)}.UIb.warning:disabled{background-color:var(--c-w-100);border-color:var(--c-w-100);color:var(--c-w-300)}.UIsp{display:grid;grid-template-columns:min-content 1fr min-content;align-items:end;align-self:end;width:13rem}.UIsp>.UIsp-label{grid-column:1/-1;padding:0rem 0rem .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{border:none;height:2.5rem;outline:none;font-weight:700;font-size:1.5rem;text-align:center;background-color:var(--c-g-50);color:var(--c-g-700);width:100%;min-width:3rem;padding:0;border-top:1px solid var(--c-g-500);border-bottom:1px solid var(--c-g-500);box-sizing:border-box}.UIsp>.UIsp__input:focus{background-color:var(--c-g-50);color:var(--c-g-950)}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{color:var(--c-g-900);display:flex;align-items:center;justify-content:center;border:none;height:2.5rem;background-color:var(--c-g-300);padding:0;cursor:pointer;font-size:2rem;width:3rem;border-radius:.5rem 0 0 .5rem;border:1px solid var(--c-g-500)}.UIsp>.UIsp__btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIsp>.disabled{background-color:var(--c-g-100);color:var(--c-g-300);pointer-events:none}.UIsp>.UIsp__btn:last-of-type{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.UIsp.r-0>.UIsp__btn{border-radius:0}.UIsp.r-round>.UIsp__btn:first-of-type{border-radius:1.5rem 0 0 1.5rem}.UIsp.r-round>.UIsp__btn:last-of-type{border-radius:0 1.5rem 1.5rem 0}.UIsp.sm{width:10rem}.UIsp.sm>.UIsp-label{padding:0rem 0rem 0rem .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{font-size:1rem;height:2rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{font-size:2rem;height:3rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{border-color:var(--c-d-500)}.UIsp.danger>.UIsp__input{background-color:var(--c-d-50);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__input:focus{background-color:var(--c-d-50);color:var(--c-d-950)}.UIsp.danger>.UIsp__btn{color:var(--c-d-500);background-color:var(--c-d-300);border-color:var(--c-d-500)}.UIsp.danger>.UIsp__btn:hover{color:var(--c-d-300);background-color:var(--c-d-500)}.UIsp.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-300)}.UIsp.info{border-color:var(--c-i-500)}.UIsp.info>.UIsp__input{background-color:var(--c-i-50);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__input:focus{background-color:var(--c-i-50);color:var(--c-i-950)}.UIsp.info>.UIsp__btn{color:var(--c-i-500);background-color:var(--c-i-300);border-color:var(--c-i-500)}.UIsp.info>.UIsp__btn:hover{color:var(--c-i-300);background-color:var(--c-i-500)}.UIsp.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-300)}.UIsp.primary{border-color:var(--c-p-500)}.UIsp.primary>.UIsp__input{background-color:var(--c-p-50);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__input:focus{background-color:var(--c-p-50);color:var(--c-p-950)}.UIsp.primary>.UIsp__btn{color:var(--c-p-500);background-color:var(--c-p-300);border-color:var(--c-p-500)}.UIsp.primary>.UIsp__btn:hover{color:var(--c-p-300);background-color:var(--c-p-500)}.UIsp.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-300)}.UIsp.success{border-color:var(--c-s-500)}.UIsp.success>.UIsp__input{background-color:var(--c-s-50);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__input:focus{background-color:var(--c-s-50);color:var(--c-s-950)}.UIsp.success>.UIsp__btn{color:var(--c-s-500);background-color:var(--c-s-300);border-color:var(--c-s-500)}.UIsp.success>.UIsp__btn:hover{color:var(--c-s-300);background-color:var(--c-s-500)}.UIsp.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-300)}.UIsp.warning{border-color:var(--c-w-500)}.UIsp.warning>.UIsp__input{background-color:var(--c-w-50);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__input:focus{background-color:var(--c-w-50);color:var(--c-w-950)}.UIsp.warning>.UIsp__btn{color:var(--c-w-500);background-color:var(--c-w-300);border-color:var(--c-w-500)}.UIsp.warning>.UIsp__btn:hover{color:var(--c-w-300);background-color:var(--c-w-500)}.UIsp.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-300)}.UIselect{display:flex;align-self:end;background-color:var(--c-g-500);border-radius:.5rem;width:12rem;height:2.5rem;position:relative;cursor:pointer;box-sizing:border-box;white-space:nowrap;min-width:10rem}.UIselect-selected{display:flex;align-items:center;background-color:var(--c-g-100);border-radius:.5rem;padding:0 .5rem;margin:1px;height:calc(100% - 2px);width:100%}.UIselect-arrow{position:absolute;font-size:.8rem;justify-content:center;align-items:center;align-content:center;top:0;right:0;height:100%;width:1.5rem;background-color:transparent}.UIselect-options{list-style:none;margin:0;padding:0;border-radius:.5rem;position:absolute;width:inherit;background-color:var(--c-g-100);color:var(--c-g-950);z-index:2;overflow:hidden;left:0;box-sizing:border-box;border:1px solid var(--c-g-500)}.UIselect-options__search{position:sticky;top:1px;padding:1px 2px}.UIselect-options__search>input{width:100%;height:inherit;border:1px solid var(--c-g-300);border-radius:.5rem;box-shadow:none;font-size:1.5rem;background-color:var(--c-g-50);color:var(--c-g-950)}.UIselect-options__search>input:focus-visible{outline:none}.UIselect-options__items{max-height:20rem;overflow-y:auto}.UIselect-options__items>ul{padding:0;margin:0;list-style:none}.UIselect-options__items>ul>li{display:flex;align-items:center;padding:0 .5rem;margin:1px;border-radius:.5rem;height:2.5rem}.UIselect-options__items>ul>li:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-g-300);color:var(--c-g-950)}.UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-g-300);margin:0 .25rem}.UIselect.r-0{border-radius:0}.UIselect.r-0>.UIselect-selected{border-radius:0}.UIselect.r-0>.UIselect-options{border-radius:0}.UIselect.r-0>.UIselect-options>li.UIselect-options__search{border-radius:0}.UIselect.r-0>.UIselect-options>li.UIselect-options__search>input{border-radius:0}.UIselect.r-0>.UIselect-options>li>ul>li{border-radius:0}.UIselect.r-1{border-radius:1.5rem}.UIselect.r-1>.UIselect-selected{border-radius:1.5rem}.UIselect.lg{width:16rem;min-width:12rem;height:3rem;font-size:1.1rem}.UIselect.lg>.UIselect-selected{overflow:hidden}.UIselect.lg .UIselect-options__search>input{height:3rem;font-size:1.7rem}.UIselect.lg .UIselect-options__items{max-height:25rem}.UIselect.lg .UIselect-options__items>ul>li{height:3rem}.UIselect.lg .UIselect-options__items>ul>li.divider{height:1px;margin:0 .5rem}.UIselect.sm{width:10rem;min-width:8rem;height:2rem;font-size:.9rem}.UIselect.sm .UIselect-options__search>input{height:2rem;font-size:1rem}.UIselect.sm .UIselect-options__items{max-height:15rem}.UIselect.sm .UIselect-options__items>ul>li{height:2rem}.UIselect.sm .UIselect-options__items>ul>li.divider{height:1px;margin:0 .25rem}.UIselect.expand{width:100%}.UIselect.danger{background-color:var(--c-d-500)}.UIselect.danger>.UIselect-arrow{color:var(--c-d-700)}.UIselect.danger>.UIselect-selected{background-color:var(--c-d-100);color:var(--c-d-900)}.UIselect.danger .UIselect-options{background-color:var(--c-d-100);border-color:var(--c-d-500)}.UIselect.danger .UIselect-options__search>input{border-color:var(--c-d-300);background-color:var(--c-d-50)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li{color:var(--c-d-950)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-d-300);color:var(--c-d-950)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-d-300)}.UIselect.info{background-color:var(--c-i-500)}.UIselect.info>.UIselect-arrow{color:var(--c-i-700)}.UIselect.info>.UIselect-selected{background-color:var(--c-i-100);color:var(--c-i-900)}.UIselect.info .UIselect-options{background-color:var(--c-i-100);border-color:var(--c-i-500)}.UIselect.info .UIselect-options__search>input{border-color:var(--c-i-300);background-color:var(--c-i-50)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li{color:var(--c-i-950)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-i-300);color:var(--c-i-950)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-i-700);color:var(--c-i-50)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-i-300)}.UIselect.primary{background-color:var(--c-p-500)}.UIselect.primary>.UIselect-arrow{color:var(--c-p-700)}.UIselect.primary>.UIselect-selected{background-color:var(--c-p-100);color:var(--c-p-900)}.UIselect.primary .UIselect-options{background-color:var(--c-p-100);border-color:var(--c-p-500)}.UIselect.primary .UIselect-options__search>input{border-color:var(--c-p-300);background-color:var(--c-p-50)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li{color:var(--c-p-950)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-p-300);color:var(--c-p-950)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-p-300)}.UIselect.success{background-color:var(--c-s-500)}.UIselect.success>.UIselect-arrow{color:var(--c-s-700)}.UIselect.success>.UIselect-selected{background-color:var(--c-s-100);color:var(--c-s-900)}.UIselect.success .UIselect-options{background-color:var(--c-s-100);border-color:var(--c-s-500)}.UIselect.success .UIselect-options__search>input{border-color:var(--c-s-300);background-color:var(--c-s-50)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li{color:var(--c-s-950)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-s-300);color:var(--c-s-950)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-s-700);color:var(--c-s-50)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-s-300)}.UIselect.warning{background-color:var(--c-w-500)}.UIselect.warning>.UIselect-arrow{color:var(--c-w-700)}.UIselect.warning>.UIselect-selected{background-color:var(--c-w-100);color:var(--c-w-900)}.UIselect.warning .UIselect-options{background-color:var(--c-w-100);border-color:var(--c-w-500)}.UIselect.warning .UIselect-options__search>input{border-color:var(--c-w-300);background-color:var(--c-w-50)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li{color:var(--c-w-950)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-w-300);color:var(--c-w-950)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-w-300)}.UIsw{position:relative;display:inline-flex;align-items:center;gap:1.5rem}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none}.UIsw-label:hover{color:var(--c-g-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{position:relative;width:5rem;height:2.5rem;background-color:var(--c-g-100);border-radius:1.5rem;transition:background-color .3s ease;cursor:pointer;border:1px solid var(--c-g-300)}.UIsw-slider:before{z-index:1;content:"";position:absolute;top:0;left:-1px;width:2.5rem;height:2.5rem;background-color:var(--c-g-300);border-radius:1.5rem;transition:transform .3s ease}.UIsw-slider__on,.UIsw-slider__off{position:absolute;top:.5rem;right:3.3rem;color:var(--c-g-900);cursor:pointer}.UIsw-slider__off{right:.7rem;color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-g-300);border-color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.6rem);background-color:var(--c-g-700)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{width:2rem;height:2rem;border-radius:1.5rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;top:.6rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.1rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{width:1rem;height:1rem;border-radius:1.5rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;top:.8rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.2rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1.1rem)}.UIsw.r-0>.UIsw-slider{border-radius:0}.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider{border-radius:.5rem}.UIsw.r-1>.UIsw-slider:before{border-radius:.5rem}.UIsw.danger>.UIsw-slider__on{color:var(--c-d-900)}.UIsw.danger>.UIsw-slider__off{color:var(--c-d-700)}.UIsw.danger>.UIsw-slider{background-color:var(--c-d-100);border:1px solid var(--c-d-300)}.UIsw.danger>.UIsw-slider:before{background-color:var(--c-d-300)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-d-300);border-color:var(--c-d-700)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-d-700)}.UIsw.info>.UIsw-slider__on{color:var(--c-i-900)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-700)}.UIsw.info>.UIsw-slider{background-color:var(--c-i-100);border:1px solid var(--c-i-300)}.UIsw.info>.UIsw-slider:before{background-color:var(--c-i-300)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-i-300);border-color:var(--c-i-700)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-i-700)}.UIsw.success>.UIsw-slider__on{color:var(--c-s-900)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-700)}.UIsw.success>.UIsw-slider{background-color:var(--c-s-100);border:1px solid var(--c-s-300)}.UIsw.success>.UIsw-slider:before{background-color:var(--c-s-300)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-s-300);border-color:var(--c-s-700)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-s-700)}.UIsw.primary>.UIsw-slider__on{color:var(--c-p-900)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-700)}.UIsw.primary>.UIsw-slider{background-color:var(--c-p-100);border:1px solid var(--c-p-300)}.UIsw.primary>.UIsw-slider:before{background-color:var(--c-p-300)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-p-300);border-color:var(--c-p-700)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-p-700)}.UIsw.warning>.UIsw-slider__on{color:var(--c-w-900)}.UIsw.warning>.UIsw-slider__off{color:var(--c-w-700)}.UIsw.warning>.UIsw-slider{background-color:var(--c-w-100);border:1px solid var(--c-w-300)}.UIsw.warning>.UIsw-slider:before{background-color:var(--c-w-300)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-w-300);border-color:var(--c-w-700)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-w-700)}:root{--g-50: hsl(0, 0%, 95%);--g-100: hsl(0, 0%, 90%);--g-300: hsl(0, 0%, 70%);--g-500: hsl(0, 0%, 50%);--g-700: hsl(0, 0%, 30%);--g-900: hsl(0, 0%, 10%);--g-950: hsl(0, 0%, 5%);--d-50: hsl(350, 100%, 95%);--d-100: hsl(350, 100%, 90%);--d-300: hsl(350, 100%, 70%);--d-500: hsl(350, 100%, 50%);--d-700: hsl(350, 100%, 30%);--d-900: hsl(350, 100%, 10%);--d-950: hsl(350, 100%, 5%);--i-50: hsl(195, 90%, 95%);--i-100: hsl(195, 90%, 90%);--i-300: hsl(195, 90%, 70%);--i-500: hsl(195, 90%, 50%);--i-700: hsl(195, 90%, 30%);--i-900: hsl(195, 90%, 10%);--i-950: hsl(195, 90%, 5%);--p-50: hsl(240, 50%, 95%);--p-100: hsl(240, 50%, 90%);--p-300: hsl(240, 50%, 70%);--p-500: hsl(240, 50%, 50%);--p-700: hsl(240, 50%, 30%);--p-900: hsl(240, 50%, 10%);--p-950: hsl(240, 50%, 5%);--s-50: hsl(150, 70%, 95%);--s-100: hsl(150, 70%, 90%);--s-300: hsl(150, 70%, 70%);--s-500: hsl(150, 70%, 50%);--s-700: hsl(150, 70%, 30%);--s-900: hsl(150, 70%, 10%);--s-950: hsl(150, 70%, 5%);--w-50: hsl(45, 75%, 95%);--w-100: hsl(45, 75%, 90%);--w-300: hsl(45, 75%, 70%);--w-500: hsl(45, 75%, 50%);--w-700: hsl(45, 75%, 30%);--w-900: hsl(45, 75%, 10%);--w-950: hsl(45, 75%, 5%);--c-d-50: var(--d-50);--c-d-100: var(--d-100);--c-d-300: var(--d-300);--c-d-500: var(--d-500);--c-d-700: var(--d-700);--c-d-900: var(--d-900);--c-d-950: var(--d-950);--c-i-50: var(--i-50);--c-i-100: var(--i-100);--c-i-300: var(--i-300);--c-i-500: var(--i-500);--c-i-700: var(--i-700);--c-i-900: var(--i-900);--c-i-950: var(--i-950);--c-p-50: var(--p-50);--c-p-100: var(--p-100);--c-p-300: var(--p-300);--c-p-500: var(--p-500);--c-p-700: var(--p-700);--c-p-900: var(--p-900);--c-p-950: var(--p-950);--c-s-50: var(--s-50);--c-s-100: var(--s-100);--c-s-300: var(--s-300);--c-s-500: var(--s-500);--c-s-700: var(--s-700);--c-s-900: var(--s-900);--c-s-950: var(--s-950);--c-g-50: var(--g-50);--c-g-100: var(--g-100);--c-g-300: var(--g-300);--c-g-500: var(--g-500);--c-g-700: var(--g-700);--c-g-900: var(--g-900);--c-g-950: var(--g-950);--c-w-50: var(--w-50);--c-w-100: var(--w-100);--c-w-300: var(--w-300);--c-w-500: var(--w-500);--c-w-700: var(--w-700);--c-w-900: var(--w-900);--c-w-950: var(--w-950)}[data-theme=dark]{--c-d-50: var(--d-950);--c-d-100: var(--d-900);--c-d-300: var(--d-700);--c-d-500: var(--d-500);--c-d-700: var(--d-300);--c-d-900: var(--d-100);--c-d-950: var(--d-50);--c-i-50: var(--i-950);--c-i-100: var(--i-900);--c-i-300: var(--i-700);--c-i-500: var(--i-500);--c-i-700: var(--i-300);--c-i-900: var(--i-100);--c-i-950: var(--i-50);--c-p-50: var(--p-950);--c-p-100: var(--p-900);--c-p-300: var(--p-700);--c-p-500: var(--p-500);--c-p-700: var(--p-300);--c-p-900: var(--p-100);--c-p-950: var(--p-50);--c-s-50: var(--s-950);--c-s-100: var(--s-900);--c-s-300: var(--s-700);--c-s-500: var(--s-500);--c-s-700: var(--s-300);--c-s-900: var(--s-100);--c-s-950: var(--s-50);--c-g-50: var(--g-950);--c-g-100: var(--g-900);--c-g-300: var(--g-700);--c-g-500: var(--g-500);--c-g-700: var(--g-300);--c-g-900: var(--g-100);--c-g-950: var(--g-50);--c-w-50: var(--w-950);--c-w-100: var(--w-900);--c-w-300: var(--w-700);--c-w-500: var(--w-500);--c-w-700: var(--w-300);--c-w-900: var(--w-100);--c-w-950: var(--w-50)}body{padding:0;background-color:var(--c-g-50);color:var(--c-g-950);transition:background .4s ease}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;text-decoration:none;color:inherit}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{padding:.35em .75em .625em;margin:0;border:1px solid #c0c0c0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}table{border-collapse:collapse;border-spacing:0}
1
+ @charset "UTF-8";.UIbg{display:grid;gap:.5rem;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);align-content:center}.UIbg.vertical{grid-auto-flow:row;grid-auto-rows:min-content}.UIbg-input{position:absolute;opacity:0;pointer-events:none}.UIbg-input:checked+.UIbg-btn{background-color:var(--c-g-700);color:var(--c-g-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--c-g-100);color:var(--c-g-500);border-color:var(--c-g-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIbg>.UIbg-btn{cursor:pointer;height:2.5rem;padding:.125rem;display:flex;justify-content:center;align-items:center;background-color:var(--c-g-100);border:1px solid var(--c-g-500);border-radius:.5rem;font-size:1rem;color:var(--c-g-700);transition:background-color .4s ease,color .2s ease}.UIbg.r-0>.UIbg-btn{border-radius:0}.UIbg.r-round>.UIbg-btn{border-radius:2.5rem}.UIbg.r-round.g-0>.UIbg-btn:first-of-type{border-radius:2.5rem 0 0 2.5rem}.UIbg.r-round.g-0>.UIbg-btn:last-of-type{border-radius:0 2.5rem 2.5rem 0}.UIbg.g-0{gap:0}.UIbg.g-0>.UIbg-btn{border-radius:0;border:0}.UIbg.g-1{gap:1rem}.UIbg.sm>.UIbg-btn{height:2rem;font-size:.9rem}.UIbg.lg>.UIbg-btn{height:3rem;font-size:1.1rem}.UIbg.border{border:1px solid var(--c-g-100);border-radius:.5rem;padding:5px}.UIbg.border:hover{border-color:var(--c-g-700)}.UIbg.border.r-0{border-radius:0}.UIbg.border.r-round{border-radius:2.5rem}.UIbg.border.danger{border-color:var(--c-d-100)}.UIbg.border.danger:hover{border-color:var(--c-d-700)}.UIbg.border.info{border-color:var(--c-i-100)}.UIbg.border.info:hover{border-color:var(--c-i-700)}.UIbg.border.primary{border-color:var(--c-p-100)}.UIbg.border.primary:hover{border-color:var(--c-p-700)}.UIbg.border.success{border-color:var(--c-s-100)}.UIbg.border.success:hover{border-color:var(--c-s-700)}.UIbg.border.warning{border-color:var(--c-w-100)}.UIbg.border.warning:hover{border-color:var(--c-w-700)}.UIbg.danger>.UIbg-btn{background-color:var(--c-d-300);border-color:var(--c-d-500);color:var(--c-d-900)}.UIbg.danger>.UIbg-btn:hover{background-color:var(--c-d-300);color:var(--c-d-50)}.UIbg.danger>:checked+.UIbg-btn{background-color:var(--c-d-700);color:var(--c-d-50)}.UIbg.danger>:disabled+.UIbg-btn{background-color:var(--c-d-100);color:var(--c-d-500);border-color:var(--c-d-300)}.UIbg.info>.UIbg-btn{background-color:var(--c-i-300);border-color:var(--c-i-500);color:var(--c-i-900)}.UIbg.info>.UIbg-btn:hover{background-color:var(--c-i-300);color:var(--c-i-50)}.UIbg.info>:checked+.UIbg-btn{background-color:var(--c-i-700);color:var(--c-i-50)}.UIbg.info>:disabled+.UIbg-btn{background-color:var(--c-i-100);color:var(--c-i-500);border-color:var(--c-i-300)}.UIbg.primary>.UIbg-btn{background-color:var(--c-p-300);border-color:var(--c-p-500);color:var(--c-p-900)}.UIbg.primary>.UIbg-btn:hover{background-color:var(--c-p-300);color:var(--c-p-50)}.UIbg.primary>:checked+.UIbg-btn{background-color:var(--c-p-700);color:var(--c-p-50)}.UIbg.primary>:disabled+.UIbg-btn{background-color:var(--c-p-100);color:var(--c-p-500);border-color:var(--c-p-300)}.UIbg.success>.UIbg-btn{background-color:var(--c-s-300);border-color:var(--c-s-500);color:var(--c-s-900)}.UIbg.success>.UIbg-btn:hover{background-color:var(--c-s-300);color:var(--c-s-50)}.UIbg.success>:checked+.UIbg-btn{background-color:var(--c-s-700);color:var(--c-s-50)}.UIbg.success>:disabled+.UIbg-btn{background-color:var(--c-s-100);color:var(--c-s-500);border-color:var(--c-s-300)}.UIbg.warning>.UIbg-btn{background-color:var(--c-w-300);border-color:var(--c-w-500);color:var(--c-w-900)}.UIbg.warning>.UIbg-btn:hover{background-color:var(--c-w-300);color:var(--c-w-50)}.UIbg.warning>:checked+.UIbg-btn{background-color:var(--c-w-700);color:var(--c-w-50)}.UIbg.warning>:disabled+.UIbg-btn{background-color:var(--c-w-100);color:var(--c-w-500);border-color:var(--c-w-300)}.UIb{display:grid;gap:.5rem;grid-auto-flow:column;grid-auto-columns:minmax(min-content);cursor:pointer;height:2.5rem;padding:.125rem .75rem;display:flex;justify-content:center;align-items:center;border-radius:.5rem;font-size:1rem;background-color:var(--c-g-100);border:1px solid var(--c-g-500);color:var(--c-g-950);transition:background-color .4s ease,color .1s ease}.UIb:hover{background-color:var(--c-g-700);color:var(--c-g-50)}.UIb:disabled{background-color:var(--c-g-100);border-color:var(--c-g-100);color:var(--c-g-300);cursor:not-allowed}.UIb.expand{width:100%}.UIb.between{justify-content:space-between}.UIb.around{justify-content:space-around}.UIb.r-0{border-radius:0}.UIb.r-round{border-radius:2.5rem}.UIb.g-0{gap:0}.UIb.g-1{gap:1rem}.UIb.sm{height:2rem;font-size:.9rem}.UIb.lg{height:3rem;font-size:1.1rem}.UIb.danger{background-color:var(--c-d-100);border-color:var(--c-d-500);color:var(--c-d-950)}.UIb.danger:hover{background-color:var(--c-d-700);border-color:var(--c-d-700);color:var(--c-d-50)}.UIb.danger:disabled{background-color:var(--c-d-100);border-color:var(--c-d-100);color:var(--c-d-300)}.UIb.info{background-color:var(--c-i-100);border-color:var(--c-i-500);color:var(--c-i-950)}.UIb.info:hover{background-color:var(--c-i-700);border-color:var(--c-i-700);color:var(--c-i-50)}.UIb.info:disabled{background-color:var(--c-i-100);border-color:var(--c-i-100);color:var(--c-i-300)}.UIb.primary{background-color:var(--c-p-100);border-color:var(--c-p-500);color:var(--c-p-950)}.UIb.primary:hover{background-color:var(--c-p-700);border-color:var(--c-p-700);color:var(--c-p-50)}.UIb.primary:disabled{background-color:var(--c-p-100);border-color:var(--c-p-100);color:var(--c-p-300)}.UIb.success{background-color:var(--c-s-100);border-color:var(--c-s-500);color:var(--c-s-950)}.UIb.success:hover{background-color:var(--c-s-700);border-color:var(--c-s-700);color:var(--c-s-50)}.UIb.success:disabled{background-color:var(--c-s-100);border-color:var(--c-s-100);color:var(--c-s-300)}.UIb.warning{background-color:var(--c-w-100);border-color:var(--c-w-500);color:var(--c-w-950)}.UIb.warning:hover{background-color:var(--c-w-700);border-color:var(--c-w-700);color:var(--c-w-50)}.UIb.warning:disabled{background-color:var(--c-w-100);border-color:var(--c-w-100);color:var(--c-w-300)}.UIsp{display:grid;grid-template-columns:min-content 1fr min-content;align-items:end;align-self:end;width:13rem}.UIsp>.UIsp-label{grid-column:1/-1;padding:0rem 0rem .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{border:none;height:2.5rem;outline:none;font-weight:700;font-size:1.5rem;text-align:center;background-color:var(--c-g-50);color:var(--c-g-700);width:100%;min-width:3rem;padding:0;border-top:1px solid var(--c-g-500);border-bottom:1px solid var(--c-g-500);box-sizing:border-box}.UIsp>.UIsp__input:focus{background-color:var(--c-g-50);color:var(--c-g-950)}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;height:2.5rem;padding:0;font-size:2rem;width:3rem;border-radius:.5rem 0 0 .5rem;background-color:var(--c-g-100);border:1px solid var(--c-g-500);color:var(--c-g-950);transition:background-color .4s ease,color .1s ease}.UIsp>.UIsp__btn:hover{background-color:var(--c-g-700);color:var(--c-g-50)}.UIsp>.disabled{background-color:var(--c-g-100);color:var(--c-g-300);pointer-events:none}.UIsp>.UIsp__btn:last-of-type{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.UIsp.r-0>.UIsp__btn{border-radius:0}.UIsp.r-round>.UIsp__btn:first-of-type{border-radius:1.5rem 0 0 1.5rem}.UIsp.r-round>.UIsp__btn:last-of-type{border-radius:0 1.5rem 1.5rem 0}.UIsp.sm{width:10rem}.UIsp.sm>.UIsp-label{padding:0rem 0rem 0rem .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{font-size:1rem;height:2rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{font-size:2rem;height:3rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{border-color:var(--c-d-500)}.UIsp.danger>.UIsp__input{background-color:var(--c-d-50);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__input:focus{background-color:var(--c-d-50);color:var(--c-d-950)}.UIsp.danger>.UIsp__btn{background-color:var(--c-d-300);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__btn:hover{color:var(--c-d-100);background-color:var(--c-d-700)}.UIsp.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-50)}.UIsp.info{border-color:var(--c-i-500)}.UIsp.info>.UIsp__input{background-color:var(--c-i-50);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__input:focus{background-color:var(--c-i-50);color:var(--c-i-950)}.UIsp.info>.UIsp__btn{background-color:var(--c-i-300);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__btn:hover{color:var(--c-i-100);background-color:var(--c-i-700)}.UIsp.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-50)}.UIsp.primary{border-color:var(--c-p-500)}.UIsp.primary>.UIsp__input{background-color:var(--c-p-50);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__input:focus{background-color:var(--c-p-50);color:var(--c-p-950)}.UIsp.primary>.UIsp__btn{background-color:var(--c-p-300);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__btn:hover{color:var(--c-p-100);background-color:var(--c-p-700)}.UIsp.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-50)}.UIsp.success{border-color:var(--c-s-500)}.UIsp.success>.UIsp__input{background-color:var(--c-s-50);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__input:focus{background-color:var(--c-s-50);color:var(--c-s-950)}.UIsp.success>.UIsp__btn{background-color:var(--c-s-300);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__btn:hover{color:var(--c-s-100);background-color:var(--c-s-700)}.UIsp.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-50)}.UIsp.warning{border-color:var(--c-w-500)}.UIsp.warning>.UIsp__input{background-color:var(--c-w-50);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__input:focus{background-color:var(--c-w-50);color:var(--c-w-950)}.UIsp.warning>.UIsp__btn{background-color:var(--c-w-300);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__btn:hover{color:var(--c-w-300);background-color:var(--c-w-700)}.UIsp.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-50)}.UIselect{display:flex;align-self:end;background-color:var(--c-g-500);border-radius:.5rem;width:12rem;height:2.5rem;position:relative;cursor:pointer;box-sizing:border-box;white-space:nowrap;min-width:10rem}.UIselect-selected{display:flex;align-items:center;background-color:var(--c-g-100);border-radius:.5rem;padding:0 .5rem;margin:1px;height:calc(100% - 2px);width:100%}.UIselect-arrow{position:absolute;font-size:.8rem;justify-content:center;align-items:center;align-content:center;top:0;right:0;height:100%;width:1.5rem;background-color:transparent}.UIselect-options{list-style:none;margin:0;padding:0;border-radius:.5rem;position:absolute;width:inherit;background-color:var(--c-g-100);color:var(--c-g-950);z-index:2;overflow:hidden;left:0;box-sizing:border-box;border:1px solid var(--c-g-500)}.UIselect-options__search{position:sticky;top:1px;padding:1px 2px}.UIselect-options__search>input{width:100%;height:inherit;border:1px solid var(--c-g-300);border-radius:.5rem;box-shadow:none;font-size:1.5rem;background-color:var(--c-g-50);color:var(--c-g-950)}.UIselect-options__search>input:focus-visible{outline:none}.UIselect-options__items{max-height:20rem;overflow-y:auto}.UIselect-options__items>ul{padding:0;margin:0;list-style:none}.UIselect-options__items>ul>li{display:flex;align-items:center;padding:0 .5rem;margin:1px;border-radius:.5rem;height:2.5rem}.UIselect-options__items>ul>li:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-g-300);color:var(--c-g-950)}.UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-g-300);margin:0 .25rem}.UIselect.r-0{border-radius:0}.UIselect.r-0>.UIselect-selected{border-radius:0}.UIselect.r-0>.UIselect-options{border-radius:0}.UIselect.r-0>.UIselect-options>li.UIselect-options__search{border-radius:0}.UIselect.r-0>.UIselect-options>li.UIselect-options__search>input{border-radius:0}.UIselect.r-0>.UIselect-options>li>ul>li{border-radius:0}.UIselect.r-1{border-radius:1.5rem}.UIselect.r-1>.UIselect-selected{border-radius:1.5rem}.UIselect.lg{width:16rem;min-width:12rem;height:3rem;font-size:1.1rem}.UIselect.lg>.UIselect-selected{overflow:hidden}.UIselect.lg .UIselect-options__search>input{height:3rem;font-size:1.7rem}.UIselect.lg .UIselect-options__items{max-height:25rem}.UIselect.lg .UIselect-options__items>ul>li{height:3rem}.UIselect.lg .UIselect-options__items>ul>li.divider{height:1px;margin:0 .5rem}.UIselect.sm{width:10rem;min-width:8rem;height:2rem;font-size:.9rem}.UIselect.sm .UIselect-options__search>input{height:2rem;font-size:1rem}.UIselect.sm .UIselect-options__items{max-height:15rem}.UIselect.sm .UIselect-options__items>ul>li{height:2rem}.UIselect.sm .UIselect-options__items>ul>li.divider{height:1px;margin:0 .25rem}.UIselect.expand{width:100%}.UIselect.danger{background-color:var(--c-d-500)}.UIselect.danger>.UIselect-arrow{color:var(--c-d-700)}.UIselect.danger>.UIselect-selected{background-color:var(--c-d-100);color:var(--c-d-900)}.UIselect.danger .UIselect-options{background-color:var(--c-d-100);border-color:var(--c-d-500)}.UIselect.danger .UIselect-options__search>input{border-color:var(--c-d-300);background-color:var(--c-d-50)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li{color:var(--c-d-950)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-d-300);color:var(--c-d-950)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-d-300)}.UIselect.info{background-color:var(--c-i-500)}.UIselect.info>.UIselect-arrow{color:var(--c-i-700)}.UIselect.info>.UIselect-selected{background-color:var(--c-i-100);color:var(--c-i-900)}.UIselect.info .UIselect-options{background-color:var(--c-i-100);border-color:var(--c-i-500)}.UIselect.info .UIselect-options__search>input{border-color:var(--c-i-300);background-color:var(--c-i-50)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li{color:var(--c-i-950)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-i-300);color:var(--c-i-950)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-i-700);color:var(--c-i-50)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-i-300)}.UIselect.primary{background-color:var(--c-p-500)}.UIselect.primary>.UIselect-arrow{color:var(--c-p-700)}.UIselect.primary>.UIselect-selected{background-color:var(--c-p-100);color:var(--c-p-900)}.UIselect.primary .UIselect-options{background-color:var(--c-p-100);border-color:var(--c-p-500)}.UIselect.primary .UIselect-options__search>input{border-color:var(--c-p-300);background-color:var(--c-p-50)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li{color:var(--c-p-950)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-p-300);color:var(--c-p-950)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-p-300)}.UIselect.success{background-color:var(--c-s-500)}.UIselect.success>.UIselect-arrow{color:var(--c-s-700)}.UIselect.success>.UIselect-selected{background-color:var(--c-s-100);color:var(--c-s-900)}.UIselect.success .UIselect-options{background-color:var(--c-s-100);border-color:var(--c-s-500)}.UIselect.success .UIselect-options__search>input{border-color:var(--c-s-300);background-color:var(--c-s-50)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li{color:var(--c-s-950)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-s-300);color:var(--c-s-950)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-s-700);color:var(--c-s-50)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-s-300)}.UIselect.warning{background-color:var(--c-w-500)}.UIselect.warning>.UIselect-arrow{color:var(--c-w-700)}.UIselect.warning>.UIselect-selected{background-color:var(--c-w-100);color:var(--c-w-900)}.UIselect.warning .UIselect-options{background-color:var(--c-w-100);border-color:var(--c-w-500)}.UIselect.warning .UIselect-options__search>input{border-color:var(--c-w-300);background-color:var(--c-w-50)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li{color:var(--c-w-950)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-w-300);color:var(--c-w-950)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-w-300)}.UIsw{position:relative;display:inline-flex;align-items:center;gap:1.5rem}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none}.UIsw-label:hover{color:var(--c-g-500);color:var(--c-g-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{position:relative;width:5rem;height:2.5rem;background-color:var(--c-g-100);border-radius:1.5rem;transition:background-color .1s ease;cursor:pointer;border:1px solid var(--c-g-500)}.UIsw-slider:before{z-index:1;content:"";position:absolute;top:0;left:-1px;width:2.5rem;height:2.5rem;background-color:var(--c-g-500);border-radius:1.5rem;transition:transform .1s ease}.UIsw-slider__on,.UIsw-slider__off{position:absolute;top:.6rem;right:3.2rem;color:var(--c-g-950);cursor:pointer}.UIsw-slider__off{right:.7rem;color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-g-100);border-color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.6rem);background-color:var(--c-g-700)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{width:2rem;height:2rem;border-radius:1.5rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;top:.6rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.1rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{width:1rem;height:1rem;border-radius:1.5rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;top:.9rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.3rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1.1rem)}.UIsw.r-0>.UIsw-slider{border-radius:0}.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider{border-radius:.5rem}.UIsw.r-1>.UIsw-slider:before{border-radius:.5rem}.UIsw.danger>.UIsw-slider__on{color:var(--c-d-950)}.UIsw.danger>.UIsw-slider__off{color:var(--c-d-300)}.UIsw.danger>.UIsw-slider{background-color:var(--c-d-100);border:1px solid var(--c-d-300)}.UIsw.danger>.UIsw-slider:before{background-color:var(--c-d-300)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-d-100);border-color:var(--c-d-700)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-d-700)}.UIsw.info>.UIsw-slider__on{color:var(--c-i-950)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-300)}.UIsw.info>.UIsw-slider{background-color:var(--c-i-100);border:1px solid var(--c-i-300)}.UIsw.info>.UIsw-slider:before{background-color:var(--c-i-300)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-i-100);border-color:var(--c-i-700)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-i-700)}.UIsw.success>.UIsw-slider__on{color:var(--c-s-950)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-300)}.UIsw.success>.UIsw-slider{background-color:var(--c-s-100);border:1px solid var(--c-s-300)}.UIsw.success>.UIsw-slider:before{background-color:var(--c-s-300)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-s-100);border-color:var(--c-s-700)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-s-700)}.UIsw.primary>.UIsw-slider__on{color:var(--c-p-950)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-300)}.UIsw.primary>.UIsw-slider{background-color:var(--c-p-100);border:1px solid var(--c-p-300)}.UIsw.primary>.UIsw-slider:before{background-color:var(--c-p-300)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-p-100);border-color:var(--c-p-700)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-p-700)}.UIsw.warning>.UIsw-slider__on{color:var(--c-w-950)}.UIsw.warning>.UIsw-slider__off{color:var(--c-w-300)}.UIsw.warning>.UIsw-slider{background-color:var(--c-w-100);border:1px solid var(--c-w-300)}.UIsw.warning>.UIsw-slider:before{background-color:var(--c-w-300)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-w-100);border-color:var(--c-w-700)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-w-700)}:root{--g-50: hsl(0, 0%, 95%);--g-100: hsl(0, 0%, 90%);--g-300: hsl(0, 0%, 70%);--g-500: hsl(0, 0%, 50%);--g-700: hsl(0, 0%, 30%);--g-900: hsl(0, 0%, 10%);--g-950: hsl(0, 0%, 5%);--d-50: hsl(350, 100%, 95%);--d-100: hsl(350, 100%, 90%);--d-300: hsl(350, 100%, 70%);--d-500: hsl(350, 100%, 50%);--d-700: hsl(350, 100%, 30%);--d-900: hsl(350, 100%, 10%);--d-950: hsl(350, 100%, 5%);--i-50: hsl(195, 90%, 95%);--i-100: hsl(195, 90%, 90%);--i-300: hsl(195, 90%, 70%);--i-500: hsl(195, 90%, 50%);--i-700: hsl(195, 90%, 30%);--i-900: hsl(195, 90%, 10%);--i-950: hsl(195, 90%, 5%);--p-50: hsl(240, 50%, 95%);--p-100: hsl(240, 50%, 90%);--p-300: hsl(240, 50%, 70%);--p-500: hsl(240, 50%, 50%);--p-700: hsl(240, 50%, 30%);--p-900: hsl(240, 50%, 10%);--p-950: hsl(240, 50%, 5%);--s-50: hsl(150, 70%, 95%);--s-100: hsl(150, 70%, 90%);--s-300: hsl(150, 70%, 70%);--s-500: hsl(150, 70%, 50%);--s-700: hsl(150, 70%, 30%);--s-900: hsl(150, 70%, 10%);--s-950: hsl(150, 70%, 5%);--w-50: hsl(45, 75%, 95%);--w-100: hsl(45, 75%, 90%);--w-300: hsl(45, 75%, 70%);--w-500: hsl(45, 75%, 50%);--w-700: hsl(45, 75%, 30%);--w-900: hsl(45, 75%, 10%);--w-950: hsl(45, 75%, 5%);--c-d-50: var(--d-50);--c-d-100: var(--d-100);--c-d-300: var(--d-300);--c-d-500: var(--d-500);--c-d-700: var(--d-700);--c-d-900: var(--d-900);--c-d-950: var(--d-950);--c-i-50: var(--i-50);--c-i-100: var(--i-100);--c-i-300: var(--i-300);--c-i-500: var(--i-500);--c-i-700: var(--i-700);--c-i-900: var(--i-900);--c-i-950: var(--i-950);--c-p-50: var(--p-50);--c-p-100: var(--p-100);--c-p-300: var(--p-300);--c-p-500: var(--p-500);--c-p-700: var(--p-700);--c-p-900: var(--p-900);--c-p-950: var(--p-950);--c-s-50: var(--s-50);--c-s-100: var(--s-100);--c-s-300: var(--s-300);--c-s-500: var(--s-500);--c-s-700: var(--s-700);--c-s-900: var(--s-900);--c-s-950: var(--s-950);--c-g-50: var(--g-50);--c-g-100: var(--g-100);--c-g-300: var(--g-300);--c-g-500: var(--g-500);--c-g-700: var(--g-700);--c-g-900: var(--g-900);--c-g-950: var(--g-950);--c-w-50: var(--w-50);--c-w-100: var(--w-100);--c-w-300: var(--w-300);--c-w-500: var(--w-500);--c-w-700: var(--w-700);--c-w-900: var(--w-900);--c-w-950: var(--w-950)}[data-theme=dark]{--c-d-50: var(--d-950);--c-d-100: var(--d-900);--c-d-300: var(--d-700);--c-d-500: var(--d-500);--c-d-700: var(--d-300);--c-d-900: var(--d-100);--c-d-950: var(--d-50);--c-i-50: var(--i-950);--c-i-100: var(--i-900);--c-i-300: var(--i-700);--c-i-500: var(--i-500);--c-i-700: var(--i-300);--c-i-900: var(--i-100);--c-i-950: var(--i-50);--c-p-50: var(--p-950);--c-p-100: var(--p-900);--c-p-300: var(--p-700);--c-p-500: var(--p-500);--c-p-700: var(--p-300);--c-p-900: var(--p-100);--c-p-950: var(--p-50);--c-s-50: var(--s-950);--c-s-100: var(--s-900);--c-s-300: var(--s-700);--c-s-500: var(--s-500);--c-s-700: var(--s-300);--c-s-900: var(--s-100);--c-s-950: var(--s-50);--c-g-50: var(--g-950);--c-g-100: var(--g-900);--c-g-300: var(--g-700);--c-g-500: var(--g-500);--c-g-700: var(--g-300);--c-g-900: var(--g-100);--c-g-950: var(--g-50);--c-w-50: var(--w-950);--c-w-100: var(--w-900);--c-w-300: var(--w-700);--c-w-500: var(--w-500);--c-w-700: var(--w-300);--c-w-900: var(--w-100);--c-w-950: var(--w-50)}body{padding:0;background-color:var(--c-g-50);color:var(--c-g-950);transition:background .4s ease}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;text-decoration:none;color:inherit}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{padding:.35em .75em .625em;margin:0;border:1px solid #c0c0c0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}table{border-collapse:collapse;border-spacing:0}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "Andrii Popov",
3
3
  "name": "@popovandrii/ui-elements",
4
4
  "description": "UI elements. Color scheme. Elements with complex logic Java Script. SpinBox, Select+search, Switch, Button Group (radio)",
5
- "version": "0.0.23",
5
+ "version": "0.0.24",
6
6
  "license": "MIT",
7
7
  "keywords": [
8
8
  "spinbox",