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