@popovandrii/ui-elements 0.0.27 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs.js +1 -1
  2. package/dist/index.es.js +108 -107
  3. package/dist/index.umd.js +1 -1
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class x{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,r,i=0,s=0)=>{e==i||e<i?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),s!==0&&(e==s||e>s?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let r;const i=t.querySelectorAll(`.${this.selectors.btn}`),s=t.querySelector(`.${this.selectors.input}`);this.dbug&&(i||console.log(`Buttons (${this.selectors.btn}) not found in container`),s||console.log(`Input (${this.selectors.input}) not found in container`));const o=i[0],l=i[1],a=this.getValidDataNumber(t,"step"),n=this.getValidDataNumber(t,"min"),h=this.getValidDataNumber(t,"max"),c=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=n&&(s.value=n.toFixed(a)),h!==0?(Number(s.value)>=h&&(s.value=h.toFixed(a)),h&&t.setAttribute("aria-valuemax",h.toFixed(a))):s.value=Number(s.value).toFixed(a),n&&t.setAttribute("aria-valuemin",n.toFixed(a)),this.state(Number(s.value),o,l,n,h),c(s.value);let b=null;const v=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d+1*u/Math.pow(10,a),d>h&&h!==0&&(d=h),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},f=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d-1*u/Math.pow(10,a),d<n&&(d=n),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},m=(u,d=150)=>{b===null&&(b=window.setInterval(u,d))},E=()=>{b!==null&&(clearInterval(b),b=null)};l.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>v(d))},{signal:e}),l.addEventListener("touchstart",()=>m(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{l.addEventListener(u,E,{signal:e})}),l.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=v(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=f(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>f(d),100)},{signal:e}),o.addEventListener("touchstart",()=>m(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{o.addEventListener(u,E,{signal:e})}),s.addEventListener("keydown",u=>{const d=u.key,y=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?v(y):f(y);return}const p=d===","?".":d,w=/^[0-9]$/.test(p),C=p===".",k=s.value.includes(".");(a===0&&!w||a>0&&!(w||C)||C&&k)&&u.preventDefault()},{signal:e}),s.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(s,s.value)},{signal:e}),s.addEventListener("change",()=>{Number(s.value)<n&&(s.value=n.toFixed(a)),Number(s.value)>h&&h!==0?s.value=h.toFixed(a):s.value=Number(s.value).toFixed(a),this.state(Number(s.value),o,l,n,h),this.costomEvent(s,s.value)},{signal:e})})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",r.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",r))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.label}`),i=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),i&&(i.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{i.checked=!i.checked;const s=t.querySelector("input");this.costomEvent(t,String(s?.checked)),t.setAttribute("aria-checked",String(i.checked))},{signal:e}),t.addEventListener("keydown",s=>{s.key==="ArrowRight"?(i.checked=!0,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!0))):s.key==="ArrowLeft"&&(i.checked=!1,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!1)))},{signal:e}))})}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:t},bubbles:!0}))}}class A{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(r=>!t.some(i=>typeof i=="string"?r.classList.contains(i)||r.id===i:r===i))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(i=>{const s=i.dataset.value?.toLowerCase()||"",o=i.textContent?.toLowerCase()||"";return s.includes(r)||o.includes(r)})}destroy(){A.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!r)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const i=t.querySelector(`.${this.selectors.selected}`),s=t.querySelector(`.${this.selectors.arrow}`),o=t.querySelector(`.${this.selectors.optionsList}`),l=t.querySelector(`.${this.selectors.search} input`);s&&s.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),i.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const a=o.querySelectorAll(`.${this.selectors.items} ul li`),n=this.filterExcluded(a,this.selectors.excludedItems),h=t.querySelector("[aria-selected='true']");h&&this.defaultSelect(t,h,i,r);var c=[];l&&l.addEventListener("input",b=>{const f=b.target.value.trim();i&&(c=this.filterSearch(n,f),f?(a.forEach(m=>m.remove()),c.forEach(m=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)})):a.forEach(m=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)}),this.itemArrow(t,o,i,r,e))},{signal:e}),this.itemArrow(t,o,i,r,e),this.items(t,o,n,i,r,e)},{signal:e})}itemArrow(e,t,r,i,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let o=-1;const l=r.textContent?r.textContent:"",a=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",n=>{a&&a.focus();const h=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),b=c.length;if(b!==0)if(n.key==="ArrowDown"){n.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),o=(o+1)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),o=(o-1+b)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="Enter")if(n.preventDefault(),o>=0){r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),i.value=String(c[o].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}else this.toggle(e,t);else n.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=l),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,i,s,o){r.forEach((l,a)=>{l.addEventListener("click",()=>{const n=r[a];if(n){i.textContent=n.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const h=n.id||`${this.selectors.idPrefix}${a}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),s.value=String(r[a].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:o})})}defaultSelect(e,t,r,i){t&&(i.setAttribute("value",t.dataset.value??""),r.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){A.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const r=t.querySelector(`.${e.optionsList}`);r.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const r=t.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(r))||A.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!0){this.dbug=t;const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.costomEvent(r);const i=t.querySelectorAll(`.${this.selectors.btn}`);i.forEach(l=>{l.addEventListener("click",()=>{i.forEach(a=>{a.setAttribute("aria-checked","false"),a.setAttribute("tabindex","-1")}),l.setAttribute("aria-checked","true"),l.setAttribute("tabindex","0"),l.focus()},{signal:e}),l.addEventListener("keydown",a=>{let n=Array.from(i).indexOf(l);if(a.key==="ArrowRight"&&n++,a.key==="ArrowLeft"&&n--,n<0&&(n=i.length-1),n>=i.length&&(n=0),a.key==="Enter"){const c=s[n];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),a.preventDefault();return}const h=i[n];h&&(i.forEach(c=>c.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:e})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((l,a)=>{this.dbug&&(l.id||console.error(`Input #${a} in group has no ID!`),(!l.value||l.value==="on")&&console.warn(`Input #${l.id} does not have a value specified (currently "${l.value}")`));const n=i[a];n&&(l.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(l.checked)),n.setAttribute("tabindex",l.checked?"0":"-1"),l.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),l.addEventListener("click",()=>{s.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),s[a].checked=!0,s[a].setAttribute("checked",""),this.costomEvent(l)},{signal:e}))});const o=Array.from(s).find(l=>l.checked&&!l.disabled)||Array.from(s).find(l=>!l.disabled);if(o){const l=t.querySelector(`label[for="${o.id}"]`);l&&l.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t.detail),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class I{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}exports.Button=I;exports.ButtonGroup=$;exports.Select=A;exports.SpinBox=x;exports.Switch=S;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class x{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,r,o=0,s=0)=>{e==o||e<o?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),s!==0&&(e==s||e>s?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let r;const o=t.querySelectorAll(`.${this.selectors.btn}`),s=t.querySelector(`.${this.selectors.input}`);this.dbug&&(o||console.log(`Buttons (${this.selectors.btn}) not found in container`),s||console.log(`Input (${this.selectors.input}) not found in container`));const i=o[0],n=o[1],a=this.getValidDataNumber(t,"step"),l=this.getValidDataNumber(t,"min"),h=this.getValidDataNumber(t,"max"),c=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=l&&(s.value=l.toFixed(a)),h!==0?(Number(s.value)>=h&&(s.value=h.toFixed(a)),h&&t.setAttribute("aria-valuemax",h.toFixed(a))):s.value=Number(s.value).toFixed(a),l&&t.setAttribute("aria-valuemin",l.toFixed(a)),this.state(Number(s.value),i,n,l,h),c(s.value);let b=null;const v=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d+1*u/Math.pow(10,a),d>h&&h!==0&&(d=h),s.value=d.toFixed(a),this.state(Number(s.value),i,n,l,h),c(s.value),s.value},f=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d-1*u/Math.pow(10,a),d<l&&(d=l),s.value=d.toFixed(a),this.state(Number(s.value),i,n,l,h),c(s.value),s.value},m=(u,d=150)=>{b===null&&(b=window.setInterval(u,d))},E=()=>{b!==null&&(clearInterval(b),b=null)};n.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>v(d))},{signal:e}),n.addEventListener("touchstart",()=>m(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{n.addEventListener(u,E,{signal:e})}),n.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=v(d),this.costomEvent(s,r))},{signal:e}),i.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=f(d),this.costomEvent(s,r))},{signal:e}),i.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;m(()=>f(d),100)},{signal:e}),i.addEventListener("touchstart",()=>m(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{i.addEventListener(u,E,{signal:e})}),s.addEventListener("keydown",u=>{const d=u.key,y=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?v(y):f(y);return}const p=d===","?".":d,w=/^[0-9]$/.test(p),C=p===".",k=s.value.includes(".");(a===0&&!w||a>0&&!(w||C)||C&&k)&&u.preventDefault()},{signal:e}),s.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(s,s.value)},{signal:e}),s.addEventListener("change",()=>{Number(s.value)<l&&(s.value=l.toFixed(a)),Number(s.value)>h&&h!==0?s.value=h.toFixed(a):s.value=Number(s.value).toFixed(a),this.state(Number(s.value),i,n,l,h),this.costomEvent(s,s.value)},{signal:e})})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",r.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",r))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.label}`),o=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),o&&(o.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",s=>{if(s.target.tagName==="INPUT")return;s.target.closest("label")||(o.checked=!o.checked);const n=t.querySelector("input");this.costomEvent(n,String(n?.checked)),t.setAttribute("aria-checked",String(o.checked))},{signal:e}),t.addEventListener("keydown",s=>{const i=t.querySelector("input");s.key==="ArrowRight"?(o.checked=!0,t.setAttribute("aria-checked",String(o.checked)),s.preventDefault(),this.costomEvent(i,String(!0))):s.key==="ArrowLeft"&&(o.checked=!1,t.setAttribute("aria-checked",String(o.checked)),s.preventDefault(),this.costomEvent(i,String(!1)))},{signal:e}))})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent:",r.detail),e.dispatchEvent(new CustomEvent("ui-switch-change",r))}}class A{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(r=>!t.some(o=>typeof o=="string"?r.classList.contains(o)||r.id===o:r===o))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(o=>{const s=o.dataset.value?.toLowerCase()||"",i=o.textContent?.toLowerCase()||"";return s.includes(r)||i.includes(r)})}destroy(){A.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!r)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const o=t.querySelector(`.${this.selectors.selected}`),s=t.querySelector(`.${this.selectors.arrow}`),i=t.querySelector(`.${this.selectors.optionsList}`),n=t.querySelector(`.${this.selectors.search} input`);s&&s.addEventListener("click",()=>{this.toggle(t,i)},{signal:e}),o.addEventListener("click",()=>{this.toggle(t,i)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(i)},{signal:e});const a=i.querySelectorAll(`.${this.selectors.items} ul li`),l=this.filterExcluded(a,this.selectors.excludedItems),h=t.querySelector("[aria-selected='true']");h&&this.defaultSelect(t,h,o,r);var c=[];n&&n.addEventListener("input",b=>{const f=b.target.value.trim();o&&(c=this.filterSearch(l,f),f?(a.forEach(m=>m.remove()),c.forEach(m=>{i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)})):a.forEach(m=>{i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m)}),this.itemArrow(t,i,o,r,e))},{signal:e}),this.itemArrow(t,i,o,r,e),this.items(t,i,l,o,r,e)},{signal:e})}itemArrow(e,t,r,o,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const n=r.textContent?r.textContent:"",a=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",l=>{a&&a.focus();const h=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),b=c.length;if(b!==0)if(l.key==="ArrowDown"){l.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),i=(i+1)%b,r.textContent=c[i].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[i].setAttribute("aria-selected","true");const v=c[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),c[i].scrollIntoView({block:"nearest"})}else if(l.key==="ArrowUp"){l.preventDefault(),i=(i-1+b)%b,r.textContent=c[i].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[i].setAttribute("aria-selected","true");const v=c[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),c[i].scrollIntoView({block:"nearest"})}else if(l.key==="Enter")if(l.preventDefault(),i>=0){r.textContent=c[i].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[i].setAttribute("aria-selected","true");const v=c[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),o.value=String(c[i].dataset.value),this.costomEvent(e,o.value),this.close(e,t)}else this.toggle(e,t);else l.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=n),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,o,s,i){r.forEach((n,a)=>{n.addEventListener("click",()=>{const l=r[a];if(l){o.textContent=l.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),l.setAttribute("aria-selected","true");const h=l.id||`${this.selectors.idPrefix}${a}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),s.value=String(r[a].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:i})})}defaultSelect(e,t,r,o){t&&(o.setAttribute("value",t.dataset.value??""),r.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){A.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const r=t.querySelector(`.${e.optionsList}`);r.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const r=t.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(r))||A.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.costomEvent(r);const o=t.querySelectorAll(`.${this.selectors.btn}`);o.forEach(n=>{n.addEventListener("click",()=>{o.forEach(a=>{a.setAttribute("aria-checked","false"),a.setAttribute("tabindex","-1")}),n.setAttribute("aria-checked","true"),n.setAttribute("tabindex","0"),n.focus()},{signal:e}),n.addEventListener("keydown",a=>{let l=Array.from(o).indexOf(n);if(a.key==="ArrowRight"&&l++,a.key==="ArrowLeft"&&l--,l<0&&(l=o.length-1),l>=o.length&&(l=0),a.key==="Enter"){const c=s[l];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),a.preventDefault();return}const h=o[l];h&&(o.forEach(c=>c.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:e})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((n,a)=>{this.dbug&&(n.id||console.error(`Input #${a} in group has no ID!`),(!n.value||n.value==="on")&&console.warn(`Input #${n.id} does not have a value specified (currently "${n.value}")`));const l=o[a];l&&(n.tabIndex=-1,l.setAttribute("role","radio"),l.setAttribute("aria-checked",String(n.checked)),l.setAttribute("tabindex",n.checked?"0":"-1"),n.disabled?l.setAttribute("aria-disabled","true"):l.removeAttribute("aria-disabled"),n.addEventListener("click",()=>{s.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),s[a].checked=!0,s[a].setAttribute("checked",""),this.costomEvent(n)},{signal:e}))});const i=Array.from(s).find(n=>n.checked&&!n.disabled)||Array.from(s).find(n=>!n.disabled);if(i){const n=t.querySelector(`label[for="${i.id}"]`);n&&n.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t.detail),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class L{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}exports.Button=L;exports.ButtonGroup=$;exports.Select=A;exports.SpinBox=x;exports.Switch=S;
package/dist/index.es.js CHANGED
@@ -15,8 +15,8 @@ class S {
15
15
  `.${this.selectors.main}`
16
16
  ), this.event();
17
17
  }
18
- state = (e, t, r, i = 0, s = 0) => {
19
- e == i || e < i ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), s !== 0 && (e == s || e > s ? (r.classList.add(this.selectors.disabledBtn), r.disabled = !0) : (r.classList.remove(this.selectors.disabledBtn), r.disabled = !1));
18
+ state = (e, t, r, o = 0, s = 0) => {
19
+ e == o || e < o ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), s !== 0 && (e == s || e > s ? (r.classList.add(this.selectors.disabledBtn), r.disabled = !0) : (r.classList.remove(this.selectors.disabledBtn), r.disabled = !1));
20
20
  };
21
21
  destroy() {
22
22
  this.abortController && this.abortController.abort(), this.spinBoxes = null;
@@ -30,69 +30,69 @@ class S {
30
30
  const e = this.abortController.signal;
31
31
  this.spinBoxes?.forEach((t) => {
32
32
  let r;
33
- const i = t.querySelectorAll(
33
+ const o = t.querySelectorAll(
34
34
  `.${this.selectors.btn}`
35
35
  ), s = t.querySelector(
36
36
  `.${this.selectors.input}`
37
37
  );
38
- this.dbug && (i || console.log(`Buttons (${this.selectors.btn}) not found in container`), s || console.log(`Input (${this.selectors.input}) not found in container`));
39
- const o = i[0], l = i[1], a = this.getValidDataNumber(t, "step"), n = this.getValidDataNumber(t, "min"), h = this.getValidDataNumber(t, "max"), c = (u) => {
38
+ this.dbug && (o || console.log(`Buttons (${this.selectors.btn}) not found in container`), s || console.log(`Input (${this.selectors.input}) not found in container`));
39
+ const i = o[0], n = o[1], a = this.getValidDataNumber(t, "step"), l = this.getValidDataNumber(t, "min"), h = this.getValidDataNumber(t, "max"), c = (u) => {
40
40
  t.setAttribute("aria-valuenow", String(u)), t.setAttribute("aria-valuetext", `${u} items`);
41
41
  };
42
- Number(s.value) <= n && (s.value = n.toFixed(a)), h !== 0 ? (Number(s.value) >= h && (s.value = h.toFixed(a)), h && t.setAttribute("aria-valuemax", h.toFixed(a))) : s.value = Number(s.value).toFixed(a), n && t.setAttribute("aria-valuemin", n.toFixed(a)), this.state(Number(s.value), o, l, n, h), c(s.value);
42
+ Number(s.value) <= l && (s.value = l.toFixed(a)), h !== 0 ? (Number(s.value) >= h && (s.value = h.toFixed(a)), h && t.setAttribute("aria-valuemax", h.toFixed(a))) : s.value = Number(s.value).toFixed(a), l && t.setAttribute("aria-valuemin", l.toFixed(a)), this.state(Number(s.value), i, n, l, h), c(s.value);
43
43
  let b = null;
44
44
  const v = (u = 1) => {
45
45
  s.value = String(Math.abs(Number(s.value)));
46
46
  let d = parseFloat(s.value) || 0;
47
- return d = d + 1 * u / Math.pow(10, a), d > h && h !== 0 && (d = h), s.value = d.toFixed(a), this.state(Number(s.value), o, l, n, h), c(s.value), s.value;
47
+ return d = d + 1 * u / Math.pow(10, a), d > h && h !== 0 && (d = h), s.value = d.toFixed(a), this.state(Number(s.value), i, n, l, h), c(s.value), s.value;
48
48
  }, f = (u = 1) => {
49
49
  s.value = String(Math.abs(Number(s.value)));
50
50
  let d = parseFloat(s.value) || 0;
51
- return d = d - 1 * u / Math.pow(10, a), d < n && (d = n), s.value = d.toFixed(a), this.state(Number(s.value), o, l, n, h), c(s.value), s.value;
51
+ return d = d - 1 * u / Math.pow(10, a), d < l && (d = l), s.value = d.toFixed(a), this.state(Number(s.value), i, n, l, h), c(s.value), s.value;
52
52
  }, m = (u, d = 150) => {
53
53
  b === null && (b = window.setInterval(u, d));
54
54
  }, E = () => {
55
55
  b !== null && (clearInterval(b), b = null);
56
56
  };
57
- l.addEventListener(
57
+ n.addEventListener(
58
58
  "mousedown",
59
59
  (u) => {
60
60
  const d = u.shiftKey ? 3 : 1;
61
61
  m(() => v(d));
62
62
  },
63
63
  { signal: e }
64
- ), l.addEventListener("touchstart", () => m(v), {
64
+ ), n.addEventListener("touchstart", () => m(v), {
65
65
  signal: e
66
66
  }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
67
67
  (u) => {
68
- l.addEventListener(u, E, { signal: e });
68
+ n.addEventListener(u, E, { signal: e });
69
69
  }
70
- ), l.addEventListener(
70
+ ), n.addEventListener(
71
71
  "click",
72
72
  (u) => {
73
73
  const d = u.shiftKey ? 3 : 1;
74
74
  b === null && (r = v(d), this.costomEvent(s, r));
75
75
  },
76
76
  { signal: e }
77
- ), o.addEventListener(
77
+ ), i.addEventListener(
78
78
  "click",
79
79
  (u) => {
80
80
  const d = u.shiftKey ? 3 : 1;
81
81
  b === null && (r = f(d), this.costomEvent(s, r));
82
82
  },
83
83
  { signal: e }
84
- ), o.addEventListener(
84
+ ), i.addEventListener(
85
85
  "mousedown",
86
86
  (u) => {
87
87
  const d = u.shiftKey ? 3 : 1;
88
88
  m(() => f(d), 100);
89
89
  },
90
90
  { signal: e }
91
- ), o.addEventListener("touchstart", () => m(f, 100), {
91
+ ), i.addEventListener("touchstart", () => m(f, 100), {
92
92
  signal: e
93
93
  }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
94
94
  (u) => {
95
- o.addEventListener(u, E, { signal: e });
95
+ i.addEventListener(u, E, { signal: e });
96
96
  }
97
97
  ), s.addEventListener(
98
98
  "keydown",
@@ -117,8 +117,8 @@ class S {
117
117
  u.preventDefault(), d === "ArrowUp" ? v(y) : f(y);
118
118
  return;
119
119
  }
120
- const w = d === "," ? "." : d, p = /^[0-9]$/.test(w), C = w === ".", k = s.value.includes(".");
121
- (a === 0 && !p || a > 0 && !(p || C) || C && k) && u.preventDefault();
120
+ const p = d === "," ? "." : d, w = /^[0-9]$/.test(p), C = p === ".", k = s.value.includes(".");
121
+ (a === 0 && !w || a > 0 && !(w || C) || C && k) && u.preventDefault();
122
122
  },
123
123
  { signal: e }
124
124
  ), s.addEventListener(
@@ -130,7 +130,7 @@ class S {
130
130
  ), s.addEventListener(
131
131
  "change",
132
132
  () => {
133
- Number(s.value) < n && (s.value = n.toFixed(a)), Number(s.value) > h && h !== 0 ? s.value = h.toFixed(a) : s.value = Number(s.value).toFixed(a), this.state(Number(s.value), o, l, n, h), this.costomEvent(s, s.value);
133
+ Number(s.value) < l && (s.value = l.toFixed(a)), Number(s.value) > h && h !== 0 ? s.value = h.toFixed(a) : s.value = Number(s.value).toFixed(a), this.state(Number(s.value), i, n, l, h), this.costomEvent(s, s.value);
134
134
  },
135
135
  { signal: e }
136
136
  );
@@ -166,31 +166,32 @@ class $ {
166
166
  this.abortController = new AbortController();
167
167
  const e = this.abortController.signal;
168
168
  this.main?.forEach((t) => {
169
- const r = t.querySelector(`.${this.selectors.label}`), i = t.querySelector("input");
170
- r && r.id && t.setAttribute("aria-labelledby", r.id), i && (i.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener(
169
+ const r = t.querySelector(`.${this.selectors.label}`), o = t.querySelector("input");
170
+ r && r.id && t.setAttribute("aria-labelledby", r.id), o && (o.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener(
171
171
  "click",
172
- () => {
173
- i.checked = !i.checked;
174
- const s = t.querySelector("input");
175
- this.costomEvent(t, String(s?.checked)), t.setAttribute("aria-checked", String(i.checked));
172
+ (s) => {
173
+ if (s.target.tagName === "INPUT") return;
174
+ s.target.closest("label") || (o.checked = !o.checked);
175
+ const n = t.querySelector("input");
176
+ this.costomEvent(n, String(n?.checked)), t.setAttribute("aria-checked", String(o.checked));
176
177
  },
177
178
  { signal: e }
178
179
  ), t.addEventListener(
179
180
  "keydown",
180
181
  (s) => {
181
- s.key === "ArrowRight" ? (i.checked = !0, t.setAttribute("aria-checked", String(i.checked)), s.preventDefault(), this.costomEvent(t, String(!0))) : s.key === "ArrowLeft" && (i.checked = !1, t.setAttribute("aria-checked", String(i.checked)), s.preventDefault(), this.costomEvent(t, String(!1)));
182
+ const i = t.querySelector("input");
183
+ s.key === "ArrowRight" ? (o.checked = !0, t.setAttribute("aria-checked", String(o.checked)), s.preventDefault(), this.costomEvent(i, String(!0))) : s.key === "ArrowLeft" && (o.checked = !1, t.setAttribute("aria-checked", String(o.checked)), s.preventDefault(), this.costomEvent(i, String(!1)));
182
184
  },
183
185
  { signal: e }
184
186
  ));
185
187
  });
186
188
  }
187
189
  costomEvent(e, t) {
188
- this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
189
- new CustomEvent("ui-switch-change", {
190
- detail: { val: t },
191
- bubbles: !0
192
- })
193
- );
190
+ const r = {
191
+ detail: { id: e.id, value: t },
192
+ bubbles: !0
193
+ };
194
+ this.dbug && console.log("CostomEvent:", r.detail), e.dispatchEvent(new CustomEvent("ui-switch-change", r));
194
195
  }
195
196
  }
196
197
  class A {
@@ -217,13 +218,13 @@ class A {
217
218
  ), this.event(), this.initGlobalListener(this.selectors);
218
219
  }
219
220
  filterExcluded(e, t) {
220
- return Array.from(e).filter((r) => !t.some((i) => typeof i == "string" ? r.classList.contains(i) || r.id === i : r === i));
221
+ return Array.from(e).filter((r) => !t.some((o) => typeof o == "string" ? r.classList.contains(o) || r.id === o : r === o));
221
222
  }
222
223
  filterSearch(e, t) {
223
224
  const r = t.trim().toLowerCase();
224
- return e.filter((i) => {
225
- const s = i.dataset.value?.toLowerCase() || "", o = i.textContent?.toLowerCase() || "";
226
- return s.includes(r) || o.includes(r);
225
+ return e.filter((o) => {
226
+ const s = o.dataset.value?.toLowerCase() || "", i = o.textContent?.toLowerCase() || "";
227
+ return s.includes(r) || i.includes(r);
227
228
  });
228
229
  }
229
230
  destroy() {
@@ -243,70 +244,70 @@ class A {
243
244
  } catch (b) {
244
245
  return console.warn("Not found:", b.message);
245
246
  }
246
- const i = t.querySelector(
247
+ const o = t.querySelector(
247
248
  `.${this.selectors.selected}`
248
249
  ), s = t.querySelector(
249
250
  `.${this.selectors.arrow}`
250
- ), o = t.querySelector(
251
+ ), i = t.querySelector(
251
252
  `.${this.selectors.optionsList}`
252
- ), l = t.querySelector(
253
+ ), n = t.querySelector(
253
254
  `.${this.selectors.search} input`
254
255
  );
255
256
  s && s.addEventListener(
256
257
  "click",
257
258
  () => {
258
- this.toggle(t, o);
259
+ this.toggle(t, i);
259
260
  },
260
261
  { signal: e }
261
- ), i.addEventListener(
262
+ ), o.addEventListener(
262
263
  "click",
263
264
  () => {
264
- this.toggle(t, o);
265
+ this.toggle(t, i);
265
266
  },
266
267
  { signal: e }
267
268
  ), t.addEventListener(
268
269
  "click",
269
270
  () => {
270
- this.itemsPosition(o);
271
+ this.itemsPosition(i);
271
272
  },
272
273
  { signal: e }
273
274
  );
274
- const a = o.querySelectorAll(
275
+ const a = i.querySelectorAll(
275
276
  `.${this.selectors.items} ul li`
276
- ), n = this.filterExcluded(
277
+ ), l = this.filterExcluded(
277
278
  a,
278
279
  this.selectors.excludedItems
279
280
  ), h = t.querySelector(
280
281
  "[aria-selected='true']"
281
282
  );
282
- h && this.defaultSelect(t, h, i, r);
283
+ h && this.defaultSelect(t, h, o, r);
283
284
  var c = [];
284
- l && l.addEventListener(
285
+ n && n.addEventListener(
285
286
  "input",
286
287
  (b) => {
287
288
  const f = b.target.value.trim();
288
- i && (c = this.filterSearch(n, f), f ? (a.forEach((m) => m.remove()), c.forEach((m) => {
289
- o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
289
+ o && (c = this.filterSearch(l, f), f ? (a.forEach((m) => m.remove()), c.forEach((m) => {
290
+ i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
290
291
  })) : a.forEach((m) => {
291
- o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
292
- }), this.itemArrow(t, o, i, r, e));
292
+ i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
293
+ }), this.itemArrow(t, i, o, r, e));
293
294
  },
294
295
  { signal: e }
295
- ), this.itemArrow(t, o, i, r, e), this.items(t, o, n, i, r, e);
296
+ ), this.itemArrow(t, i, o, r, e), this.items(t, i, l, o, r, e);
296
297
  },
297
298
  { signal: e }
298
299
  );
299
300
  }
300
- itemArrow(e, t, r, i, s) {
301
+ itemArrow(e, t, r, o, s) {
301
302
  if (this.itemArrowInitialized.has(e)) return;
302
303
  this.itemArrowInitialized.add(e);
303
- let o = -1;
304
- const l = r.textContent ? r.textContent : "", a = e.querySelector(
304
+ let i = -1;
305
+ const n = r.textContent ? r.textContent : "", a = e.querySelector(
305
306
  `.${this.selectors.search} input`
306
307
  );
307
308
  e.addEventListener(
308
309
  "keydown",
309
- (n) => {
310
+ (l) => {
310
311
  a && a.focus();
311
312
  const h = Array.from(
312
313
  t.querySelectorAll(`.${this.selectors.optionsList} ul li`)
@@ -315,22 +316,22 @@ class A {
315
316
  this.selectors.excludedItems
316
317
  ), b = c.length;
317
318
  if (b !== 0)
318
- if (n.key === "ArrowDown") {
319
- n.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), o = (o + 1) % b, r.textContent = c[o].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[o].setAttribute("aria-selected", "true");
320
- const v = c[o].id || `${this.selectors.idPrefix}${o}`;
321
- e.setAttribute("aria-activedescendant", v), c[o].scrollIntoView({ block: "nearest" });
322
- } else if (n.key === "ArrowUp") {
323
- n.preventDefault(), o = (o - 1 + b) % b, r.textContent = c[o].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[o].setAttribute("aria-selected", "true");
324
- const v = c[o].id || `${this.selectors.idPrefix}${o}`;
325
- e.setAttribute("aria-activedescendant", v), c[o].scrollIntoView({ block: "nearest" });
326
- } else if (n.key === "Enter")
327
- if (n.preventDefault(), o >= 0) {
328
- r.textContent = c[o].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[o].setAttribute("aria-selected", "true");
329
- const v = c[o].id || `${this.selectors.idPrefix}${o}`;
330
- e.setAttribute("aria-activedescendant", v), i.value = String(c[o].dataset.value), this.costomEvent(e, i.value), this.close(e, t);
319
+ if (l.key === "ArrowDown") {
320
+ l.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), i = (i + 1) % b, r.textContent = c[i].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[i].setAttribute("aria-selected", "true");
321
+ const v = c[i].id || `${this.selectors.idPrefix}${i}`;
322
+ e.setAttribute("aria-activedescendant", v), c[i].scrollIntoView({ block: "nearest" });
323
+ } else if (l.key === "ArrowUp") {
324
+ l.preventDefault(), i = (i - 1 + b) % b, r.textContent = c[i].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[i].setAttribute("aria-selected", "true");
325
+ const v = c[i].id || `${this.selectors.idPrefix}${i}`;
326
+ e.setAttribute("aria-activedescendant", v), c[i].scrollIntoView({ block: "nearest" });
327
+ } else if (l.key === "Enter")
328
+ if (l.preventDefault(), i >= 0) {
329
+ r.textContent = c[i].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[i].setAttribute("aria-selected", "true");
330
+ const v = c[i].id || `${this.selectors.idPrefix}${i}`;
331
+ e.setAttribute("aria-activedescendant", v), o.value = String(c[i].dataset.value), this.costomEvent(e, o.value), this.close(e, t);
331
332
  } else
332
333
  this.toggle(e, t);
333
- else n.key === "Escape" && (e.getAttribute("aria-activedescendant") || (r.textContent = l), this.close(e, t));
334
+ else l.key === "Escape" && (e.getAttribute("aria-activedescendant") || (r.textContent = n), this.close(e, t));
334
335
  },
335
336
  { signal: s }
336
337
  );
@@ -341,24 +342,24 @@ class A {
341
342
  );
342
343
  t && t.scrollIntoView({ block: "nearest" });
343
344
  }
344
- items(e, t, r, i, s, o) {
345
- r.forEach((l, a) => {
346
- l.addEventListener(
345
+ items(e, t, r, o, s, i) {
346
+ r.forEach((n, a) => {
347
+ n.addEventListener(
347
348
  "click",
348
349
  () => {
349
- const n = r[a];
350
- if (n) {
351
- i.textContent = n.textContent, r.forEach((c) => c.removeAttribute("aria-selected")), n.setAttribute("aria-selected", "true");
352
- const h = n.id || `${this.selectors.idPrefix}${a}`;
350
+ const l = r[a];
351
+ if (l) {
352
+ o.textContent = l.textContent, r.forEach((c) => c.removeAttribute("aria-selected")), l.setAttribute("aria-selected", "true");
353
+ const h = l.id || `${this.selectors.idPrefix}${a}`;
353
354
  e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), s.value = String(r[a].dataset.value), this.costomEvent(e, s.value), this.close(e, t);
354
355
  }
355
356
  },
356
- { signal: o }
357
+ { signal: i }
357
358
  );
358
359
  });
359
360
  }
360
- defaultSelect(e, t, r, i) {
361
- t && (i.setAttribute("value", t.dataset.value ?? ""), r.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
361
+ defaultSelect(e, t, r, o) {
362
+ t && (o.setAttribute("value", t.dataset.value ?? ""), r.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
362
363
  }
363
364
  costomEvent(e, t) {
364
365
  this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
@@ -393,12 +394,12 @@ class A {
393
394
  );
394
395
  }
395
396
  }
396
- class I {
397
+ class L {
397
398
  selectors;
398
399
  main = null;
399
400
  abortController = new AbortController();
400
401
  dbug;
401
- constructor(e = {}, t = !0) {
402
+ constructor(e = {}, t = !1) {
402
403
  this.dbug = t;
403
404
  const r = {
404
405
  main: "UIbg",
@@ -420,31 +421,31 @@ class I {
420
421
  `.${this.selectors.input}:checked`
421
422
  );
422
423
  r && this.costomEvent(r);
423
- const i = t.querySelectorAll(
424
+ const o = t.querySelectorAll(
424
425
  `.${this.selectors.btn}`
425
426
  );
426
- i.forEach((l) => {
427
- l.addEventListener(
427
+ o.forEach((n) => {
428
+ n.addEventListener(
428
429
  "click",
429
430
  () => {
430
- i.forEach((a) => {
431
+ o.forEach((a) => {
431
432
  a.setAttribute("aria-checked", "false"), a.setAttribute("tabindex", "-1");
432
- }), l.setAttribute("aria-checked", "true"), l.setAttribute("tabindex", "0"), l.focus();
433
+ }), n.setAttribute("aria-checked", "true"), n.setAttribute("tabindex", "0"), n.focus();
433
434
  },
434
435
  { signal: e }
435
- ), l.addEventListener(
436
+ ), n.addEventListener(
436
437
  "keydown",
437
438
  (a) => {
438
- let n = Array.from(i).indexOf(l);
439
- if (a.key === "ArrowRight" && n++, a.key === "ArrowLeft" && n--, n < 0 && (n = i.length - 1), n >= i.length && (n = 0), a.key === "Enter") {
440
- const c = s[n];
439
+ let l = Array.from(o).indexOf(n);
440
+ if (a.key === "ArrowRight" && l++, a.key === "ArrowLeft" && l--, l < 0 && (l = o.length - 1), l >= o.length && (l = 0), a.key === "Enter") {
441
+ const c = s[l];
441
442
  c && !c.disabled && (s.forEach((b) => {
442
443
  b.checked = !1, b.removeAttribute("checked");
443
444
  }), c.checked = !0, c.setAttribute("checked", ""), this.costomEvent(c)), a.preventDefault();
444
445
  return;
445
446
  }
446
- const h = i[n];
447
- h && (i.forEach((c) => c.setAttribute("tabindex", "-1")), h.setAttribute("tabindex", "0"), h.focus());
447
+ const h = o[l];
448
+ h && (o.forEach((c) => c.setAttribute("tabindex", "-1")), h.setAttribute("tabindex", "0"), h.focus());
448
449
  },
449
450
  { signal: e }
450
451
  );
@@ -452,27 +453,27 @@ class I {
452
453
  const s = t.querySelectorAll(
453
454
  `.${this.selectors.input}`
454
455
  );
455
- s.forEach((l, a) => {
456
- this.dbug && (l.id || console.error(`Input #${a} in group has no ID!`), (!l.value || l.value === "on") && console.warn(
457
- `Input #${l.id} does not have a value specified (currently "${l.value}")`
456
+ s.forEach((n, a) => {
457
+ this.dbug && (n.id || console.error(`Input #${a} in group has no ID!`), (!n.value || n.value === "on") && console.warn(
458
+ `Input #${n.id} does not have a value specified (currently "${n.value}")`
458
459
  ));
459
- const n = i[a];
460
- n && (l.tabIndex = -1, n.setAttribute("role", "radio"), n.setAttribute("aria-checked", String(l.checked)), n.setAttribute("tabindex", l.checked ? "0" : "-1"), l.disabled ? n.setAttribute("aria-disabled", "true") : n.removeAttribute("aria-disabled"), l.addEventListener(
460
+ const l = o[a];
461
+ l && (n.tabIndex = -1, l.setAttribute("role", "radio"), l.setAttribute("aria-checked", String(n.checked)), l.setAttribute("tabindex", n.checked ? "0" : "-1"), n.disabled ? l.setAttribute("aria-disabled", "true") : l.removeAttribute("aria-disabled"), n.addEventListener(
461
462
  "click",
462
463
  () => {
463
464
  s.forEach((h) => {
464
465
  h.checked = !1, h.removeAttribute("checked");
465
- }), s[a].checked = !0, s[a].setAttribute("checked", ""), this.costomEvent(l);
466
+ }), s[a].checked = !0, s[a].setAttribute("checked", ""), this.costomEvent(n);
466
467
  },
467
468
  { signal: e }
468
469
  ));
469
470
  });
470
- const o = Array.from(s).find((l) => l.checked && !l.disabled) || Array.from(s).find((l) => !l.disabled);
471
- if (o) {
472
- const l = t.querySelector(
473
- `label[for="${o.id}"]`
471
+ const i = Array.from(s).find((n) => n.checked && !n.disabled) || Array.from(s).find((n) => !n.disabled);
472
+ if (i) {
473
+ const n = t.querySelector(
474
+ `label[for="${i.id}"]`
474
475
  );
475
- l && l.setAttribute("tabindex", "0");
476
+ n && n.setAttribute("tabindex", "0");
476
477
  }
477
478
  });
478
479
  }
@@ -484,7 +485,7 @@ class I {
484
485
  this.dbug && console.log("CostomEvent:", t.detail), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
485
486
  }
486
487
  }
487
- class L {
488
+ class I {
488
489
  selectors;
489
490
  buttons = null;
490
491
  abortController = new AbortController();
@@ -528,8 +529,8 @@ class L {
528
529
  }
529
530
  }
530
531
  export {
531
- L as Button,
532
- I as ButtonGroup,
532
+ I as Button,
533
+ L as ButtonGroup,
533
534
  A as Select,
534
535
  S as SpinBox,
535
536
  $ as Switch
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
1
- (function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.UiElements={}))})(this,(function(m){"use strict";class g{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,r,i=0,s=0)=>{e==i||e<i?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),s!==0&&(e==s||e>s?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let r;const i=t.querySelectorAll(`.${this.selectors.btn}`),s=t.querySelector(`.${this.selectors.input}`);this.dbug&&(i||console.log(`Buttons (${this.selectors.btn}) not found in container`),s||console.log(`Input (${this.selectors.input}) not found in container`));const o=i[0],l=i[1],a=this.getValidDataNumber(t,"step"),n=this.getValidDataNumber(t,"min"),h=this.getValidDataNumber(t,"max"),c=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=n&&(s.value=n.toFixed(a)),h!==0?(Number(s.value)>=h&&(s.value=h.toFixed(a)),h&&t.setAttribute("aria-valuemax",h.toFixed(a))):s.value=Number(s.value).toFixed(a),n&&t.setAttribute("aria-valuemin",n.toFixed(a)),this.state(Number(s.value),o,l,n,h),c(s.value);let b=null;const v=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d+1*u/Math.pow(10,a),d>h&&h!==0&&(d=h),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},f=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d-1*u/Math.pow(10,a),d<n&&(d=n),s.value=d.toFixed(a),this.state(Number(s.value),o,l,n,h),c(s.value),s.value},A=(u,d=150)=>{b===null&&(b=window.setInterval(u,d))},p=()=>{b!==null&&(clearInterval(b),b=null)};l.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;A(()=>v(d))},{signal:e}),l.addEventListener("touchstart",()=>A(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{l.addEventListener(u,p,{signal:e})}),l.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=v(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=f(d),this.costomEvent(s,r))},{signal:e}),o.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;A(()=>f(d),100)},{signal:e}),o.addEventListener("touchstart",()=>A(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{o.addEventListener(u,p,{signal:e})}),s.addEventListener("keydown",u=>{const d=u.key,w=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?v(w):f(w);return}const C=d===","?".":d,k=/^[0-9]$/.test(C),x=C===".",L=s.value.includes(".");(a===0&&!k||a>0&&!(k||x)||x&&L)&&u.preventDefault()},{signal:e}),s.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(s,s.value)},{signal:e}),s.addEventListener("change",()=>{Number(s.value)<n&&(s.value=n.toFixed(a)),Number(s.value)>h&&h!==0?s.value=h.toFixed(a):s.value=Number(s.value).toFixed(a),this.state(Number(s.value),o,l,n,h),this.costomEvent(s,s.value)},{signal:e})})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",r.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",r))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.label}`),i=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),i&&(i.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{i.checked=!i.checked;const s=t.querySelector("input");this.costomEvent(t,String(s?.checked)),t.setAttribute("aria-checked",String(i.checked))},{signal:e}),t.addEventListener("keydown",s=>{s.key==="ArrowRight"?(i.checked=!0,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!0))):s.key==="ArrowLeft"&&(i.checked=!1,t.setAttribute("aria-checked",String(i.checked)),s.preventDefault(),this.costomEvent(t,String(!1)))},{signal:e}))})}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:t},bubbles:!0}))}}class E{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(r=>!t.some(i=>typeof i=="string"?r.classList.contains(i)||r.id===i:r===i))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(i=>{const s=i.dataset.value?.toLowerCase()||"",o=i.textContent?.toLowerCase()||"";return s.includes(r)||o.includes(r)})}destroy(){E.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!r)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const i=t.querySelector(`.${this.selectors.selected}`),s=t.querySelector(`.${this.selectors.arrow}`),o=t.querySelector(`.${this.selectors.optionsList}`),l=t.querySelector(`.${this.selectors.search} input`);s&&s.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),i.addEventListener("click",()=>{this.toggle(t,o)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const a=o.querySelectorAll(`.${this.selectors.items} ul li`),n=this.filterExcluded(a,this.selectors.excludedItems),h=t.querySelector("[aria-selected='true']");h&&this.defaultSelect(t,h,i,r);var c=[];l&&l.addEventListener("input",b=>{const f=b.target.value.trim();i&&(c=this.filterSearch(n,f),f?(a.forEach(A=>A.remove()),c.forEach(A=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)})):a.forEach(A=>{o.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)}),this.itemArrow(t,o,i,r,e))},{signal:e}),this.itemArrow(t,o,i,r,e),this.items(t,o,n,i,r,e)},{signal:e})}itemArrow(e,t,r,i,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let o=-1;const l=r.textContent?r.textContent:"",a=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",n=>{a&&a.focus();const h=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),b=c.length;if(b!==0)if(n.key==="ArrowDown"){n.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),o=(o+1)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),o=(o-1+b)%b,r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),c[o].scrollIntoView({block:"nearest"})}else if(n.key==="Enter")if(n.preventDefault(),o>=0){r.textContent=c[o].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[o].setAttribute("aria-selected","true");const v=c[o].id||`${this.selectors.idPrefix}${o}`;e.setAttribute("aria-activedescendant",v),i.value=String(c[o].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}else this.toggle(e,t);else n.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=l),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,i,s,o){r.forEach((l,a)=>{l.addEventListener("click",()=>{const n=r[a];if(n){i.textContent=n.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const h=n.id||`${this.selectors.idPrefix}${a}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),s.value=String(r[a].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:o})})}defaultSelect(e,t,r,i){t&&(i.setAttribute("value",t.dataset.value??""),r.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){E.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const r=t.querySelector(`.${e.optionsList}`);r.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const r=t.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(r))||E.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!0){this.dbug=t;const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.costomEvent(r);const i=t.querySelectorAll(`.${this.selectors.btn}`);i.forEach(l=>{l.addEventListener("click",()=>{i.forEach(a=>{a.setAttribute("aria-checked","false"),a.setAttribute("tabindex","-1")}),l.setAttribute("aria-checked","true"),l.setAttribute("tabindex","0"),l.focus()},{signal:e}),l.addEventListener("keydown",a=>{let n=Array.from(i).indexOf(l);if(a.key==="ArrowRight"&&n++,a.key==="ArrowLeft"&&n--,n<0&&(n=i.length-1),n>=i.length&&(n=0),a.key==="Enter"){const c=s[n];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),a.preventDefault();return}const h=i[n];h&&(i.forEach(c=>c.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:e})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((l,a)=>{this.dbug&&(l.id||console.error(`Input #${a} in group has no ID!`),(!l.value||l.value==="on")&&console.warn(`Input #${l.id} does not have a value specified (currently "${l.value}")`));const n=i[a];n&&(l.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(l.checked)),n.setAttribute("tabindex",l.checked?"0":"-1"),l.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),l.addEventListener("click",()=>{s.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),s[a].checked=!0,s[a].setAttribute("checked",""),this.costomEvent(l)},{signal:e}))});const o=Array.from(s).find(l=>l.checked&&!l.disabled)||Array.from(s).find(l=>!l.disabled);if(o){const l=t.querySelector(`label[for="${o.id}"]`);l&&l.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t.detail),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class I{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}m.Button=I,m.ButtonGroup=$,m.Select=E,m.SpinBox=g,m.Switch=S,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.UiElements={}))})(this,(function(m){"use strict";class g{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,r,o=0,s=0)=>{e==o||e<o?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),s!==0&&(e==s||e>s?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let r;const o=t.querySelectorAll(`.${this.selectors.btn}`),s=t.querySelector(`.${this.selectors.input}`);this.dbug&&(o||console.log(`Buttons (${this.selectors.btn}) not found in container`),s||console.log(`Input (${this.selectors.input}) not found in container`));const i=o[0],n=o[1],a=this.getValidDataNumber(t,"step"),l=this.getValidDataNumber(t,"min"),h=this.getValidDataNumber(t,"max"),c=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=l&&(s.value=l.toFixed(a)),h!==0?(Number(s.value)>=h&&(s.value=h.toFixed(a)),h&&t.setAttribute("aria-valuemax",h.toFixed(a))):s.value=Number(s.value).toFixed(a),l&&t.setAttribute("aria-valuemin",l.toFixed(a)),this.state(Number(s.value),i,n,l,h),c(s.value);let b=null;const v=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d+1*u/Math.pow(10,a),d>h&&h!==0&&(d=h),s.value=d.toFixed(a),this.state(Number(s.value),i,n,l,h),c(s.value),s.value},f=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let d=parseFloat(s.value)||0;return d=d-1*u/Math.pow(10,a),d<l&&(d=l),s.value=d.toFixed(a),this.state(Number(s.value),i,n,l,h),c(s.value),s.value},A=(u,d=150)=>{b===null&&(b=window.setInterval(u,d))},p=()=>{b!==null&&(clearInterval(b),b=null)};n.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;A(()=>v(d))},{signal:e}),n.addEventListener("touchstart",()=>A(v),{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;b===null&&(r=v(d),this.costomEvent(s,r))},{signal:e}),i.addEventListener("click",u=>{const d=u.shiftKey?3:1;b===null&&(r=f(d),this.costomEvent(s,r))},{signal:e}),i.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;A(()=>f(d),100)},{signal:e}),i.addEventListener("touchstart",()=>A(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{i.addEventListener(u,p,{signal:e})}),s.addEventListener("keydown",u=>{const d=u.key,w=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?v(w):f(w);return}const C=d===","?".":d,k=/^[0-9]$/.test(C),x=C===".",I=s.value.includes(".");(a===0&&!k||a>0&&!(k||x)||x&&I)&&u.preventDefault()},{signal:e}),s.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(s,s.value)},{signal:e}),s.addEventListener("change",()=>{Number(s.value)<l&&(s.value=l.toFixed(a)),Number(s.value)>h&&h!==0?s.value=h.toFixed(a):s.value=Number(s.value).toFixed(a),this.state(Number(s.value),i,n,l,h),this.costomEvent(s,s.value)},{signal:e})})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",r.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",r))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.label}`),o=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),o&&(o.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",s=>{if(s.target.tagName==="INPUT")return;s.target.closest("label")||(o.checked=!o.checked);const n=t.querySelector("input");this.costomEvent(n,String(n?.checked)),t.setAttribute("aria-checked",String(o.checked))},{signal:e}),t.addEventListener("keydown",s=>{const i=t.querySelector("input");s.key==="ArrowRight"?(o.checked=!0,t.setAttribute("aria-checked",String(o.checked)),s.preventDefault(),this.costomEvent(i,String(!0))):s.key==="ArrowLeft"&&(o.checked=!1,t.setAttribute("aria-checked",String(o.checked)),s.preventDefault(),this.costomEvent(i,String(!1)))},{signal:e}))})}costomEvent(e,t){const r={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent:",r.detail),e.dispatchEvent(new CustomEvent("ui-switch-change",r))}}class E{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(r=>!t.some(o=>typeof o=="string"?r.classList.contains(o)||r.id===o:r===o))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(o=>{const s=o.dataset.value?.toLowerCase()||"",i=o.textContent?.toLowerCase()||"";return s.includes(r)||i.includes(r)})}destroy(){E.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!r)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const o=t.querySelector(`.${this.selectors.selected}`),s=t.querySelector(`.${this.selectors.arrow}`),i=t.querySelector(`.${this.selectors.optionsList}`),n=t.querySelector(`.${this.selectors.search} input`);s&&s.addEventListener("click",()=>{this.toggle(t,i)},{signal:e}),o.addEventListener("click",()=>{this.toggle(t,i)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(i)},{signal:e});const a=i.querySelectorAll(`.${this.selectors.items} ul li`),l=this.filterExcluded(a,this.selectors.excludedItems),h=t.querySelector("[aria-selected='true']");h&&this.defaultSelect(t,h,o,r);var c=[];n&&n.addEventListener("input",b=>{const f=b.target.value.trim();o&&(c=this.filterSearch(l,f),f?(a.forEach(A=>A.remove()),c.forEach(A=>{i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)})):a.forEach(A=>{i.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)}),this.itemArrow(t,i,o,r,e))},{signal:e}),this.itemArrow(t,i,o,r,e),this.items(t,i,l,o,r,e)},{signal:e})}itemArrow(e,t,r,o,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const n=r.textContent?r.textContent:"",a=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",l=>{a&&a.focus();const h=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),b=c.length;if(b!==0)if(l.key==="ArrowDown"){l.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),i=(i+1)%b,r.textContent=c[i].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[i].setAttribute("aria-selected","true");const v=c[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),c[i].scrollIntoView({block:"nearest"})}else if(l.key==="ArrowUp"){l.preventDefault(),i=(i-1+b)%b,r.textContent=c[i].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[i].setAttribute("aria-selected","true");const v=c[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),c[i].scrollIntoView({block:"nearest"})}else if(l.key==="Enter")if(l.preventDefault(),i>=0){r.textContent=c[i].textContent,c.forEach(f=>f.removeAttribute("aria-selected")),c[i].setAttribute("aria-selected","true");const v=c[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),o.value=String(c[i].dataset.value),this.costomEvent(e,o.value),this.close(e,t)}else this.toggle(e,t);else l.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=n),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,o,s,i){r.forEach((n,a)=>{n.addEventListener("click",()=>{const l=r[a];if(l){o.textContent=l.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),l.setAttribute("aria-selected","true");const h=l.id||`${this.selectors.idPrefix}${a}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),s.value=String(r[a].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:i})})}defaultSelect(e,t,r,o){t&&(o.setAttribute("value",t.dataset.value??""),r.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){E.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const r=t.querySelector(`.${e.optionsList}`);r.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const r=t.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(r))||E.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const r=t.querySelector(`.${this.selectors.input}:checked`);r&&this.costomEvent(r);const o=t.querySelectorAll(`.${this.selectors.btn}`);o.forEach(n=>{n.addEventListener("click",()=>{o.forEach(a=>{a.setAttribute("aria-checked","false"),a.setAttribute("tabindex","-1")}),n.setAttribute("aria-checked","true"),n.setAttribute("tabindex","0"),n.focus()},{signal:e}),n.addEventListener("keydown",a=>{let l=Array.from(o).indexOf(n);if(a.key==="ArrowRight"&&l++,a.key==="ArrowLeft"&&l--,l<0&&(l=o.length-1),l>=o.length&&(l=0),a.key==="Enter"){const c=s[l];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),a.preventDefault();return}const h=o[l];h&&(o.forEach(c=>c.setAttribute("tabindex","-1")),h.setAttribute("tabindex","0"),h.focus())},{signal:e})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((n,a)=>{this.dbug&&(n.id||console.error(`Input #${a} in group has no ID!`),(!n.value||n.value==="on")&&console.warn(`Input #${n.id} does not have a value specified (currently "${n.value}")`));const l=o[a];l&&(n.tabIndex=-1,l.setAttribute("role","radio"),l.setAttribute("aria-checked",String(n.checked)),l.setAttribute("tabindex",n.checked?"0":"-1"),n.disabled?l.setAttribute("aria-disabled","true"):l.removeAttribute("aria-disabled"),n.addEventListener("click",()=>{s.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),s[a].checked=!0,s[a].setAttribute("checked",""),this.costomEvent(n)},{signal:e}))});const i=Array.from(s).find(n=>n.checked&&!n.disabled)||Array.from(s).find(n=>!n.disabled);if(i){const n=t.querySelector(`label[for="${i.id}"]`);n&&n.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t.detail),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class L{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}m.Button=L,m.ButtonGroup=$,m.Select=E,m.SpinBox=g,m.Switch=S,Object.defineProperty(m,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);border-color:var(--c-g-950);color:var(--c-g-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--c-g-100);border-color:var(--c-g-100);color:var(--c-g-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--c-g-700);border-color:var(--c-g-700);color:var(--c-g-50)}.UIbg>.UIbg-btn{cursor:pointer;height:2.5rem;padding:.125rem;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:all .4s ease,color .4s ease}.UIbg>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-g-700);border-color:var(--c-g-700);color:var(--c-g-950)}.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-100);border-color:var(--c-d-500);color:var(--c-d-950)}.UIbg.danger>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-d-700);border-color:var(--c-d-700);color:var(--c-d-950)}.UIbg.danger>:checked+.UIbg-btn{background-color:var(--c-d-700);border-color:var(--c-d-950);color:var(--c-d-50)}.UIbg.danger>:disabled+.UIbg-btn{background-color:var(--c-d-100);border-color:var(--c-d-100);color:var(--c-d-300)}.UIbg.info>.UIbg-btn{background-color:var(--c-i-100);border-color:var(--c-i-500);color:var(--c-i-950)}.UIbg.info>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-i-700);border-color:var(--c-i-700);color:var(--c-i-950)}.UIbg.info>:checked+.UIbg-btn{background-color:var(--c-i-700);border-color:var(--c-i-950);color:var(--c-i-50)}.UIbg.info>:disabled+.UIbg-btn{background-color:var(--c-i-100);border-color:var(--c-i-100);color:var(--c-i-300)}.UIbg.primary>.UIbg-btn{background-color:var(--c-p-100);border-color:var(--c-p-500);color:var(--c-p-950)}.UIbg.primary>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-p-700);border-color:var(--c-p-700);color:var(--c-p-950)}.UIbg.primary>:checked+.UIbg-btn{background-color:var(--c-p-700);border-color:var(--c-p-950);color:var(--c-p-50)}.UIbg.primary>:disabled+.UIbg-btn{background-color:var(--c-p-100);border-color:var(--c-p-100);color:var(--c-p-300)}.UIbg.success>.UIbg-btn{background-color:var(--c-s-100);border-color:var(--c-s-500);color:var(--c-s-950)}.UIbg.success>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-s-700);border-color:var(--c-s-700);color:var(--c-s-950)}.UIbg.success>:checked+.UIbg-btn{background-color:var(--c-s-700);border-color:var(--c-s-950);color:var(--c-s-50)}.UIbg.success>:disabled+.UIbg-btn{background-color:var(--c-s-100);border-color:var(--c-s-100);color:var(--c-s-300)}.UIbg.warning>.UIbg-btn{background-color:var(--c-w-100);border-color:var(--c-w-500);color:var(--c-w-950)}.UIbg.warning>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-w-700);border-color:var(--c-w-700);color:var(--c-w-950)}.UIbg.warning>:checked+.UIbg-btn{background-color:var(--c-w-700);border-color:var(--c-w-950);color:var(--c-w-50)}.UIbg.warning>:disabled+.UIbg-btn{background-color:var(--c-w-100);border-color:var(--c-w-100);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:hover{background-color:var(--c-g-700)}.UIselect:hover .UIselect-selected,.UIselect:hover .UIselect-arrow{background-color:var(--c-g-700);color:var(--c-g-50)}.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%;overflow:hidden}.UIselect-selected>span{max-width:100%;overflow:hidden;white-space:nowrap;text-align:center;display:inline-block}.UIselect-selected.center>span{margin:0 auto;text-align:left;max-width:100%}.UIselect-arrow{position:absolute;font-size:.8rem;justify-content:center;align-items:center;align-content:center;top:0;right:0;border-radius:.5rem;margin:2px 5px;height:calc(100% - 4px);width:2rem;background-color:var(--c-g-100)}.UIselect-arrow>svg{display:flex;margin:0 auto}.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;padding:0 7px;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.r-1>.UIselect-arrow{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:hover{background-color:var(--c-d-700)}.UIselect.danger:hover .UIselect-selected,.UIselect.danger:hover .UIselect-arrow{background-color:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger>.UIselect-arrow{color:var(--c-d-700);background-color:var(--c-d-100)}.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:hover{background-color:var(--c-i-700)}.UIselect.info:hover .UIselect-selected,.UIselect.info:hover .UIselect-arrow{background-color:var(--c-i-700);color:var(--c-i-50)}.UIselect.info>.UIselect-arrow{color:var(--c-i-700);background-color:var(--c-i-100)}.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:hover{background-color:var(--c-p-700)}.UIselect.primary:hover .UIselect-selected,.UIselect.primary:hover .UIselect-arrow{background-color:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary>.UIselect-arrow{color:var(--c-p-700);background-color:var(--c-p-100)}.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:hover{background-color:var(--c-s-700)}.UIselect.success:hover .UIselect-selected,.UIselect.success:hover .UIselect-arrow{background-color:var(--c-s-700);color:var(--c-s-50)}.UIselect.success>.UIselect-arrow{color:var(--c-s-700);background-color:var(--c-s-100)}.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:hover{background-color:var(--c-w-700)}.UIselect.warning:hover .UIselect-selected,.UIselect.warning:hover .UIselect-arrow{background-color:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning>.UIselect-arrow{color:var(--c-w-700);background-color:var(--c-w-100)}.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}
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);border-color:var(--c-g-950);color:var(--c-g-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--c-g-100);border-color:var(--c-g-100);color:var(--c-g-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--c-g-700);border-color:var(--c-g-700);color:var(--c-g-50)}.UIbg>.UIbg-btn{cursor:pointer;height:2.5rem;padding:.125rem;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:all .4s ease,color .4s ease}.UIbg>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-g-700);border-color:var(--c-g-700);color:var(--c-g-950)}.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-100);border-color:var(--c-d-500);color:var(--c-d-950)}.UIbg.danger>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-d-700);border-color:var(--c-d-700);color:var(--c-d-950)}.UIbg.danger>:checked+.UIbg-btn{background-color:var(--c-d-700);border-color:var(--c-d-950);color:var(--c-d-50)}.UIbg.danger>:disabled+.UIbg-btn{background-color:var(--c-d-100);border-color:var(--c-d-100);color:var(--c-d-300)}.UIbg.info>.UIbg-btn{background-color:var(--c-i-100);border-color:var(--c-i-500);color:var(--c-i-950)}.UIbg.info>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-i-700);border-color:var(--c-i-700);color:var(--c-i-950)}.UIbg.info>:checked+.UIbg-btn{background-color:var(--c-i-700);border-color:var(--c-i-950);color:var(--c-i-50)}.UIbg.info>:disabled+.UIbg-btn{background-color:var(--c-i-100);border-color:var(--c-i-100);color:var(--c-i-300)}.UIbg.primary>.UIbg-btn{background-color:var(--c-p-100);border-color:var(--c-p-500);color:var(--c-p-950)}.UIbg.primary>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-p-700);border-color:var(--c-p-700);color:var(--c-p-950)}.UIbg.primary>:checked+.UIbg-btn{background-color:var(--c-p-700);border-color:var(--c-p-950);color:var(--c-p-50)}.UIbg.primary>:disabled+.UIbg-btn{background-color:var(--c-p-100);border-color:var(--c-p-100);color:var(--c-p-300)}.UIbg.success>.UIbg-btn{background-color:var(--c-s-100);border-color:var(--c-s-500);color:var(--c-s-950)}.UIbg.success>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-s-700);border-color:var(--c-s-700);color:var(--c-s-950)}.UIbg.success>:checked+.UIbg-btn{background-color:var(--c-s-700);border-color:var(--c-s-950);color:var(--c-s-50)}.UIbg.success>:disabled+.UIbg-btn{background-color:var(--c-s-100);border-color:var(--c-s-100);color:var(--c-s-300)}.UIbg.warning>.UIbg-btn{background-color:var(--c-w-100);border-color:var(--c-w-500);color:var(--c-w-950)}.UIbg.warning>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-w-700);border-color:var(--c-w-700);color:var(--c-w-950)}.UIbg.warning>:checked+.UIbg-btn{background-color:var(--c-w-700);border-color:var(--c-w-950);color:var(--c-w-50)}.UIbg.warning>:disabled+.UIbg-btn{background-color:var(--c-w-100);border-color:var(--c-w-100);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:hover{background-color:var(--c-g-700)}.UIselect:hover .UIselect-selected,.UIselect:hover .UIselect-arrow{background-color:var(--c-g-700);color:var(--c-g-50)}.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%;overflow:hidden}.UIselect-selected>span{max-width:100%;overflow:hidden;white-space:nowrap;text-align:center;display:inline-block}.UIselect-selected.center>span{margin:0 auto;text-align:left;max-width:100%}.UIselect-arrow{position:absolute;font-size:.8rem;justify-content:center;align-items:center;align-content:center;top:0;right:0;border-radius:.5rem;margin:2px 5px;height:calc(100% - 4px);width:2rem;background-color:var(--c-g-100)}.UIselect-arrow>svg{display:flex;margin:0 auto}.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;padding:0 7px;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.r-1>.UIselect-arrow{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:hover{background-color:var(--c-d-700)}.UIselect.danger:hover .UIselect-selected,.UIselect.danger:hover .UIselect-arrow{background-color:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger>.UIselect-arrow{color:var(--c-d-700);background-color:var(--c-d-100)}.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:hover{background-color:var(--c-i-700)}.UIselect.info:hover .UIselect-selected,.UIselect.info:hover .UIselect-arrow{background-color:var(--c-i-700);color:var(--c-i-50)}.UIselect.info>.UIselect-arrow{color:var(--c-i-700);background-color:var(--c-i-100)}.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:hover{background-color:var(--c-p-700)}.UIselect.primary:hover .UIselect-selected,.UIselect.primary:hover .UIselect-arrow{background-color:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary>.UIselect-arrow{color:var(--c-p-700);background-color:var(--c-p-100)}.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:hover{background-color:var(--c-s-700)}.UIselect.success:hover .UIselect-selected,.UIselect.success:hover .UIselect-arrow{background-color:var(--c-s-700);color:var(--c-s-50)}.UIselect.success>.UIselect-arrow{color:var(--c-s-700);background-color:var(--c-s-100)}.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:hover{background-color:var(--c-w-700)}.UIselect.warning:hover .UIselect-selected,.UIselect.warning:hover .UIselect-arrow{background-color:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning>.UIselect-arrow{color:var(--c-w-700);background-color:var(--c-w-100)}.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;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;right:3rem;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.lg>.UIsw-slider{width:6rem;height:3rem}.UIsw.lg>.UIsw-slider:before{width:3rem;height:3rem;border-radius:1.5rem}.UIsw.lg>.UIsw-slider__on{font-size:1.2rem;left:5rem}.UIsw.lg>.UIsw-slider__off{font-size:1.2rem;right:1rem}.UIsw.lg>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(3.1rem)}.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;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;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), Button",
5
- "version": "0.0.27",
5
+ "version": "0.0.28",
6
6
  "license": "MIT",
7
7
  "keywords": [
8
8
  "spinbox",