@popovandrii/ui-elements 0.0.22 → 0.0.23
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.
- package/dist/Button.d.ts +2 -1
- package/dist/Select.d.ts +2 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +225 -209
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
package/dist/Button.d.ts
CHANGED
|
@@ -6,7 +6,8 @@ export declare class Button {
|
|
|
6
6
|
private selectors;
|
|
7
7
|
private buttons;
|
|
8
8
|
private abortController;
|
|
9
|
-
|
|
9
|
+
private dbug;
|
|
10
|
+
constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
|
|
10
11
|
destroy(): void;
|
|
11
12
|
private costomEvent;
|
|
12
13
|
}
|
package/dist/Select.d.ts
CHANGED
|
@@ -13,7 +13,8 @@ export declare class Select {
|
|
|
13
13
|
private main;
|
|
14
14
|
private itemArrowInitialized;
|
|
15
15
|
private abortController;
|
|
16
|
-
|
|
16
|
+
private dbug;
|
|
17
|
+
constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
|
|
17
18
|
private filterExcluded;
|
|
18
19
|
private filterSearch;
|
|
19
20
|
destroy(): void;
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var T=Object.defineProperty;var B=d=>{throw TypeError(d)};var _=(d,e,s)=>e in d?T(d,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):d[e]=s;var f=(d,e,s)=>_(d,typeof e!="symbol"?e+"":e,s),F=(d,e,s)=>e.has(d)||B("Cannot "+s);var E=(d,e,s)=>(F(d,e,"read from private field"),s?s.call(d):e.get(d)),p=(d,e,s)=>e.has(d)?B("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(d):e.set(d,s);var g=(d,e,s)=>(F(d,e,"access private method"),s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var A,w,K;class G{constructor(e={}){p(this,w);f(this,"selectors");f(this,"spinBoxes");p(this,A,(e,s,r,a=0,t=0)=>{e==a||e<a?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1),t!==0&&(e==t||e>t?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))});f(this,"getValidDataNumber",(e,s)=>{const r=e.getAttribute(`data-${s}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)});const s={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...s,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),g(this,w,K).call(this)}}A=new WeakMap,w=new WeakSet,K=function(){this.spinBoxes.forEach(e=>{const s=e.querySelectorAll(`.${this.selectors.btn}`),r=s[0],a=s[1],t=e.querySelector(`.${this.selectors.input}`),l=this.getValidDataNumber(e,"step"),i=this.getValidDataNumber(e,"min"),o=this.getValidDataNumber(e,"max"),h=u=>{e.setAttribute("aria-valuenow",String(u)),e.setAttribute("aria-valuetext",`${u} items`)};Number(t.value)<=i&&(t.value=i.toFixed(l)),o!==0?(Number(t.value)>=o&&(t.value=o.toFixed(l)),o&&e.setAttribute("aria-valuemax",o.toFixed(l))):t.value=Number(t.value).toFixed(l),i&&e.setAttribute("aria-valuemin",i.toFixed(l)),E(this,A).call(this,Number(t.value),r,a,i,o),h(t.value);let c=null;const m=(u=1)=>{t.value=String(Math.abs(Number(t.value)));let n=parseFloat(t.value)||0;n=n+1*u/Math.pow(10,l),n>o&&o!==0&&(n=o),t.value=n.toFixed(l),E(this,A).call(this,Number(t.value),r,a,i,o),h(t.value)},v=(u=1)=>{t.value=String(Math.abs(Number(t.value)));let n=parseFloat(t.value)||0;n=n-1*u/Math.pow(10,l),n<i&&(n=i),t.value=n.toFixed(l),E(this,A).call(this,Number(t.value),r,a,i,o),h(t.value)},b=(u,n=150)=>{c===null&&(c=window.setInterval(u,n))},L=()=>{c!==null&&(clearInterval(c),c=null)};a.addEventListener("mousedown",u=>{const n=u.shiftKey?3:1;b(()=>m(n))}),a.addEventListener("touchstart",()=>b(m)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{a.addEventListener(u,L)}),a.addEventListener("click",u=>{const n=u.shiftKey?3:1;c===null&&m(n)}),r.addEventListener("click",u=>{const n=u.shiftKey?3:1;c===null&&v(n)}),r.addEventListener("mousedown",u=>{const n=u.shiftKey?3:1;b(()=>v(n),100)}),r.addEventListener("touchstart",()=>b(v,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{r.addEventListener(u,L)}),t.addEventListener("keydown",u=>{const n=u.key,y=u.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(n)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(n.toLowerCase()))return;if(["e","+","-"].includes(n)){u.preventDefault();return}if(n==="ArrowUp"||n==="ArrowDown"){u.preventDefault();const U=parseFloat(t.value)||0,D=1*y/Math.pow(10,l);let $=n==="ArrowUp"?U+D:U-D;$<i&&($=i),t.value=$.toFixed(l),Number(t.value)<i&&(t.value=i.toFixed(l)),Number(t.value)>o&&o!==0&&(t.value=o.toFixed(l)),E(this,A).call(this,Number(t.value),r,a,i,o),h(t.value);return}const I=n===","?".":n,q=/^[0-9]$/.test(I),N=I===".",z=t.value.includes(".");(l===0&&!q||l>0&&!(q||N)||N&&z)&&u.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<i&&(t.value=i.toFixed(l)),Number(t.value)>o&&o!==0?t.value=o.toFixed(l):t.value=Number(t.value).toFixed(l),E(this,A).call(this,Number(t.value),r,a,i,o)})})};var k,V;class R{constructor(e={}){p(this,k);f(this,"selectors");f(this,"main");const s={main:"UIsw",label:"UIsw-label"};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),g(this,k,V).call(this)}}k=new WeakSet,V=function(){this.main.forEach(e=>{const s=e.querySelector(`.${this.selectors.label}`),r=e.querySelector("input");s&&s.id&&e.setAttribute("aria-labelledby",s.id),r&&(r.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{r.checked=!r.checked,e.setAttribute("aria-checked",String(r.checked))}),e.addEventListener("keydown",t=>{t.key==="ArrowRight"?(r.checked=!0,a(String(r.checked)),t.preventDefault()):t.key==="ArrowLeft"&&(r.checked=!1,a(String(r.checked)),t.preventDefault())}));const a=t=>{e.setAttribute("aria-checked",String(t))}})};class x{constructor(e={}){f(this,"selectors");f(this,"main",null);f(this,"itemArrowInitialized",new WeakSet);f(this,"abortController",new AbortController);const s={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,s){return Array.from(e).filter(r=>!s.some(a=>typeof a=="string"?r.classList.contains(a)||r.id===a:r===a))}filterSearch(e,s){const r=s.trim().toLowerCase();return e.filter(a=>{var i,o;const t=((i=a.dataset.value)==null?void 0:i.toLowerCase())||"",l=((o=a.textContent)==null?void 0:o.toLowerCase())||"";return t.includes(r)||l.includes(r)})}destroy(){x.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var s;this.abortController=new AbortController;const e=this.abortController.signal;(s=this.main)==null||s.forEach(r=>{const a=r.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!a)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(b){return console.warn("Not found:",b.message)}const t=r.querySelector(`.${this.selectors.selected}`),l=r.querySelector(`.${this.selectors.arrow}`),i=r.querySelector(`.${this.selectors.optionsList}`),o=r.querySelector(`.${this.selectors.search} input`);l&&l.addEventListener("click",()=>{this.toggle(r,i)},{signal:e}),t.addEventListener("click",()=>{this.toggle(r,i)},{signal:e}),r.addEventListener("click",()=>{this.itemsPosition(i)},{signal:e});const h=i.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(h,this.selectors.excludedItems),m=r.querySelector("[aria-selected='true']");m&&this.defaultSelect(r,m,t,a);var v=[];o&&o.addEventListener("input",b=>{const u=b.target.value.trim();t&&(v=this.filterSearch(c,u),u?(h.forEach(n=>n.remove()),v.forEach(n=>{var y;(y=i.querySelector(`.${this.selectors.optionsList} ul`))==null||y.appendChild(n)})):h.forEach(n=>{var y;(y=i.querySelector(`.${this.selectors.optionsList} ul`))==null||y.appendChild(n)}),this.itemArrow(r,i,t,a))}),this.itemArrow(r,i,t,a),this.items(r,i,c,t,a)},{signal:e})}itemArrow(e,s,r,a){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let t=-1;const l=r.textContent?r.textContent:"",i=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",o=>{i&&i.focus();const h=Array.from(s.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(h,this.selectors.excludedItems),m=c.length;if(m!==0)if(o.key==="ArrowDown"){o.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,s),t=(t+1)%m,r.textContent=c[t].textContent,c.forEach(b=>b.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const v=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",v),c[t].scrollIntoView({block:"nearest"})}else if(o.key==="ArrowUp"){o.preventDefault(),t=(t-1+m)%m,r.textContent=c[t].textContent,c.forEach(b=>b.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const v=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",v),c[t].scrollIntoView({block:"nearest"})}else if(o.key==="Enter")if(o.preventDefault(),t>=0){r.textContent=c[t].textContent,c.forEach(b=>b.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const v=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",v),a.value=String(c[t].dataset.value),this.costomEvent(e,a.value),this.close(e,s)}else this.toggle(e,s);else o.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=l),this.close(e,s))})}itemsPosition(e){const s=e.querySelector('[aria-selected="true"]');s&&s.scrollIntoView({block:"nearest"})}items(e,s,r,a,t){r.forEach((l,i)=>{l.addEventListener("click",()=>{const o=r[i];if(o){a.textContent=o.textContent,r.forEach(c=>c.removeAttribute("aria-selected")),o.setAttribute("aria-selected","true");const h=o.id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),t.value=String(r[i].dataset.value),this.costomEvent(e,t.value),this.close(e,s)}})})}defaultSelect(e,s,r,a){s&&(a.setAttribute("value",s.dataset.value??""),r.textContent=s.textContent??"",e.setAttribute("aria-activedescendant",s.id||""))}costomEvent(e,s){e.dispatchEvent(new CustomEvent("change",{detail:{val:s},bubbles:!0}))}toggle(e,s){x.closeAll(this.selectors),s.hidden?(s.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,s)}close(e,s){s.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(s=>{const r=s.querySelector(`.${e.optionsList}`);r.hidden=!0,s.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",s=>{const r=s.target;[...document.querySelectorAll(`.${e.main}`)].some(t=>t.contains(r))||x.closeAll(e)},{signal:this.abortController.signal})}}var S,P;class H{constructor(e={}){p(this,S);f(this,"selectors");f(this,"groups");const s={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...s,...e},this.groups=document.querySelectorAll(`.${this.selectors.main}`),g(this,S,P).call(this)}}S=new WeakSet,P=function(){this.groups.forEach(e=>{const s=e.querySelectorAll(`.${this.selectors.btn}`);s.forEach(t=>{t.addEventListener("click",()=>{s.forEach(l=>{l.setAttribute("aria-checked","false"),l.setAttribute("tabindex","-1")}),t.setAttribute("aria-checked","true"),t.setAttribute("tabindex","0"),t.focus()}),t.addEventListener("keydown",l=>{let i=Array.from(s).indexOf(t);if(l.key==="ArrowRight"&&i++,l.key==="ArrowLeft"&&i--,i<0&&(i=s.length-1),i>=s.length&&(i=0),l.key==="Enter"){const h=r[i];h&&!h.disabled&&(r.forEach(c=>{c.checked=!1,c.removeAttribute("checked")}),h.checked=!0,h.setAttribute("checked",""),h.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:h.id,value:h.value},bubbles:!0}))),l.preventDefault();return}const o=s[i];o&&(s.forEach(h=>h.setAttribute("tabindex","-1")),o.setAttribute("tabindex","0"),o.focus())})});const r=e.querySelectorAll(`.${this.selectors.input}`);r.forEach((t,l)=>{const i=s[l];i&&(t.tabIndex=-1,i.setAttribute("role","radio"),i.setAttribute("aria-checked",String(t.checked)),i.setAttribute("tabindex",t.checked?"0":"-1"),t.disabled?i.setAttribute("aria-disabled","true"):i.removeAttribute("aria-disabled"),t.addEventListener("click",()=>{r.forEach(o=>{o.checked=!1,o.removeAttribute("checked")}),r[l].checked=!0,r[l].setAttribute("checked",""),t.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:t.id,value:t.value},bubbles:!0}))}),t.addEventListener("ui-button-group-change",o=>{console.log("detail:",o.detail)}))});const a=Array.from(r).find(t=>!t.checked&&!t.disabled);if(a){const t=e.querySelector(`label[for="${a.id}"]`);t&&t.setAttribute("tabindex","0")}})};var C,M;class O{constructor(e={}){p(this,C);f(this,"selectors");f(this,"buttons",null);f(this,"abortController",new AbortController);const s={main:"UIb"};this.selectors={...s,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),g(this,C,M).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}costomEvent(e,s){if(!s||s==="undefined"||s.trim()===""){console.log('Button data-value="" Not set!');return}console.log("dis"),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:s},bubbles:!0}))}}C=new WeakSet,M=function(){var s;this.abortController=new AbortController;const e=this.abortController.signal;(s=this.buttons)==null||s.forEach(r=>{r.addEventListener("click",()=>{this.costomEvent(r,String(r.dataset.value))},{signal:e})})};exports.Button=O;exports.ButtonGroup=H;exports.Select=x;exports.SpinBox=G;exports.Switch=R;
|
|
1
|
+
"use strict";var T=Object.defineProperty;var B=h=>{throw TypeError(h)};var _=(h,e,t)=>e in h?T(h,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):h[e]=t;var f=(h,e,t)=>_(h,typeof e!="symbol"?e+"":e,t),F=(h,e,t)=>e.has(h)||B("Cannot "+t);var y=(h,e,t)=>(F(h,e,"read from private field"),t?t.call(h):e.get(h)),p=(h,e,t)=>e.has(h)?B("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(h):e.set(h,t);var x=(h,e,t)=>(F(h,e,"access private method"),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var g,k,K;class G{constructor(e={}){p(this,k);f(this,"selectors");f(this,"spinBoxes");p(this,g,(e,t,r,a=0,s=0)=>{e==a||e<a?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),s!==0&&(e==s||e>s?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1))});f(this,"getValidDataNumber",(e,t)=>{const r=e.getAttribute(`data-${t}`);return r===null||r.trim()===""||isNaN(Number(r))?0:Number(r)});const t={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...t,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),x(this,k,K).call(this)}}g=new WeakMap,k=new WeakSet,K=function(){this.spinBoxes.forEach(e=>{const t=e.querySelectorAll(`.${this.selectors.btn}`),r=t[0],a=t[1],s=e.querySelector(`.${this.selectors.input}`),i=this.getValidDataNumber(e,"step"),o=this.getValidDataNumber(e,"min"),l=this.getValidDataNumber(e,"max"),c=u=>{e.setAttribute("aria-valuenow",String(u)),e.setAttribute("aria-valuetext",`${u} items`)};Number(s.value)<=o&&(s.value=o.toFixed(i)),l!==0?(Number(s.value)>=l&&(s.value=l.toFixed(i)),l&&e.setAttribute("aria-valuemax",l.toFixed(i))):s.value=Number(s.value).toFixed(i),o&&e.setAttribute("aria-valuemin",o.toFixed(i)),y(this,g).call(this,Number(s.value),r,a,o,l),c(s.value);let b=null;const d=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let n=parseFloat(s.value)||0;n=n+1*u/Math.pow(10,i),n>l&&l!==0&&(n=l),s.value=n.toFixed(i),y(this,g).call(this,Number(s.value),r,a,o,l),c(s.value)},m=(u=1)=>{s.value=String(Math.abs(Number(s.value)));let n=parseFloat(s.value)||0;n=n-1*u/Math.pow(10,i),n<o&&(n=o),s.value=n.toFixed(i),y(this,g).call(this,Number(s.value),r,a,o,l),c(s.value)},v=(u,n=150)=>{b===null&&(b=window.setInterval(u,n))},A=()=>{b!==null&&(clearInterval(b),b=null)};a.addEventListener("mousedown",u=>{const n=u.shiftKey?3:1;v(()=>d(n))}),a.addEventListener("touchstart",()=>v(d)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{a.addEventListener(u,A)}),a.addEventListener("click",u=>{const n=u.shiftKey?3:1;b===null&&d(n)}),r.addEventListener("click",u=>{const n=u.shiftKey?3:1;b===null&&m(n)}),r.addEventListener("mousedown",u=>{const n=u.shiftKey?3:1;v(()=>m(n),100)}),r.addEventListener("touchstart",()=>v(m,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{r.addEventListener(u,A)}),s.addEventListener("keydown",u=>{const n=u.key,E=u.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(n)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(n.toLowerCase()))return;if(["e","+","-"].includes(n)){u.preventDefault();return}if(n==="ArrowUp"||n==="ArrowDown"){u.preventDefault();const U=parseFloat(s.value)||0,D=1*E/Math.pow(10,i);let $=n==="ArrowUp"?U+D:U-D;$<o&&($=o),s.value=$.toFixed(i),Number(s.value)<o&&(s.value=o.toFixed(i)),Number(s.value)>l&&l!==0&&(s.value=l.toFixed(i)),y(this,g).call(this,Number(s.value),r,a,o,l),c(s.value);return}const I=n===","?".":n,q=/^[0-9]$/.test(I),N=I===".",z=s.value.includes(".");(i===0&&!q||i>0&&!(q||N)||N&&z)&&u.preventDefault()}),s.addEventListener("change",()=>{Number(s.value)<o&&(s.value=o.toFixed(i)),Number(s.value)>l&&l!==0?s.value=l.toFixed(i):s.value=Number(s.value).toFixed(i),y(this,g).call(this,Number(s.value),r,a,o,l)})})};var S,V;class R{constructor(e={}){p(this,S);f(this,"selectors");f(this,"main");const t={main:"UIsw",label:"UIsw-label"};this.selectors={...t,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),x(this,S,V).call(this)}}S=new WeakSet,V=function(){this.main.forEach(e=>{const t=e.querySelector(`.${this.selectors.label}`),r=e.querySelector("input");t&&t.id&&e.setAttribute("aria-labelledby",t.id),r&&(r.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{r.checked=!r.checked,e.setAttribute("aria-checked",String(r.checked))}),e.addEventListener("keydown",s=>{s.key==="ArrowRight"?(r.checked=!0,a(String(r.checked)),s.preventDefault()):s.key==="ArrowLeft"&&(r.checked=!1,a(String(r.checked)),s.preventDefault())}));const a=s=>{e.setAttribute("aria-checked",String(s))}})};class w{constructor(e={},t=!1){f(this,"selectors");f(this,"main",null);f(this,"itemArrowInitialized",new WeakSet);f(this,"abortController",new AbortController);f(this,"dbug");this.dbug=t;const r={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(r=>!t.some(a=>typeof a=="string"?r.classList.contains(a)||r.id===a:r===a))}filterSearch(e,t){const r=t.trim().toLowerCase();return e.filter(a=>{var o,l;const s=((o=a.dataset.value)==null?void 0:o.toLowerCase())||"",i=((l=a.textContent)==null?void 0:l.toLowerCase())||"";return s.includes(r)||i.includes(r)})}destroy(){w.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var t;this.abortController=new AbortController;const e=this.abortController.signal;(t=this.main)==null||t.forEach(r=>{const a=r.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!a)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(v){return console.warn("Not found:",v.message)}const s=r.querySelector(`.${this.selectors.selected}`),i=r.querySelector(`.${this.selectors.arrow}`),o=r.querySelector(`.${this.selectors.optionsList}`),l=r.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(r,o)},{signal:e}),s.addEventListener("click",()=>{this.toggle(r,o)},{signal:e}),r.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const c=o.querySelectorAll(`.${this.selectors.items} ul li`),b=this.filterExcluded(c,this.selectors.excludedItems),d=r.querySelector("[aria-selected='true']");d&&this.defaultSelect(r,d,s,a);var m=[];l&&l.addEventListener("input",v=>{const u=v.target.value.trim();s&&(m=this.filterSearch(b,u),u?(c.forEach(n=>n.remove()),m.forEach(n=>{var E;(E=o.querySelector(`.${this.selectors.optionsList} ul`))==null||E.appendChild(n)})):c.forEach(n=>{var E;(E=o.querySelector(`.${this.selectors.optionsList} ul`))==null||E.appendChild(n)}),this.itemArrow(r,o,s,a,e))},{signal:e}),this.itemArrow(r,o,s,a,e),this.items(r,o,b,s,a,e)},{signal:e})}itemArrow(e,t,r,a,s){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const o=r.textContent?r.textContent:"",l=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",c=>{l&&l.focus();const b=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),d=this.filterExcluded(b,this.selectors.excludedItems),m=d.length;if(m!==0)if(c.key==="ArrowDown"){c.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),i=(i+1)%m,r.textContent=d[i].textContent,d.forEach(A=>A.removeAttribute("aria-selected")),d[i].setAttribute("aria-selected","true");const v=d[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),d[i].scrollIntoView({block:"nearest"})}else if(c.key==="ArrowUp"){c.preventDefault(),i=(i-1+m)%m,r.textContent=d[i].textContent,d.forEach(A=>A.removeAttribute("aria-selected")),d[i].setAttribute("aria-selected","true");const v=d[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),d[i].scrollIntoView({block:"nearest"})}else if(c.key==="Enter")if(c.preventDefault(),i>=0){r.textContent=d[i].textContent,d.forEach(A=>A.removeAttribute("aria-selected")),d[i].setAttribute("aria-selected","true");const v=d[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",v),a.value=String(d[i].dataset.value),this.costomEvent(e,a.value),this.close(e,t)}else this.toggle(e,t);else c.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(r.textContent=o),this.close(e,t))},{signal:s})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,r,a,s,i){r.forEach((o,l)=>{o.addEventListener("click",()=>{const c=r[l];if(c){a.textContent=c.textContent,r.forEach(d=>d.removeAttribute("aria-selected")),c.setAttribute("aria-selected","true");const b=c.id||`${this.selectors.idPrefix}${l}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",b),s.value=String(r[l].dataset.value),this.costomEvent(e,s.value),this.close(e,t)}},{signal:i})})}defaultSelect(e,t,r,a){t&&(a.setAttribute("value",t.dataset.value??""),r.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){w.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const r=t.querySelector(`.${e.optionsList}`);r.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const r=t.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(r))||w.closeAll(e)},{signal:this.abortController.signal})}}var C,P;class H{constructor(e={}){p(this,C);f(this,"selectors");f(this,"groups");const t={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...t,...e},this.groups=document.querySelectorAll(`.${this.selectors.main}`),x(this,C,P).call(this)}}C=new WeakSet,P=function(){this.groups.forEach(e=>{const t=e.querySelectorAll(`.${this.selectors.btn}`);t.forEach(s=>{s.addEventListener("click",()=>{t.forEach(i=>{i.setAttribute("aria-checked","false"),i.setAttribute("tabindex","-1")}),s.setAttribute("aria-checked","true"),s.setAttribute("tabindex","0"),s.focus()}),s.addEventListener("keydown",i=>{let o=Array.from(t).indexOf(s);if(i.key==="ArrowRight"&&o++,i.key==="ArrowLeft"&&o--,o<0&&(o=t.length-1),o>=t.length&&(o=0),i.key==="Enter"){const c=r[o];c&&!c.disabled&&(r.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),c.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:c.id,value:c.value},bubbles:!0}))),i.preventDefault();return}const l=t[o];l&&(t.forEach(c=>c.setAttribute("tabindex","-1")),l.setAttribute("tabindex","0"),l.focus())})});const r=e.querySelectorAll(`.${this.selectors.input}`);r.forEach((s,i)=>{const o=t[i];o&&(s.tabIndex=-1,o.setAttribute("role","radio"),o.setAttribute("aria-checked",String(s.checked)),o.setAttribute("tabindex",s.checked?"0":"-1"),s.disabled?o.setAttribute("aria-disabled","true"):o.removeAttribute("aria-disabled"),s.addEventListener("click",()=>{r.forEach(l=>{l.checked=!1,l.removeAttribute("checked")}),r[i].checked=!0,r[i].setAttribute("checked",""),s.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:s.id,value:s.value},bubbles:!0}))}),s.addEventListener("ui-button-group-change",l=>{console.log("detail:",l.detail)}))});const a=Array.from(r).find(s=>!s.checked&&!s.disabled);if(a){const s=e.querySelector(`label[for="${a.id}"]`);s&&s.setAttribute("tabindex","0")}})};var L,M;class O{constructor(e={},t=!1){p(this,L);f(this,"selectors");f(this,"buttons",null);f(this,"abortController",new AbortController);f(this,"dbug");this.dbug=t;const r={main:"UIb"};this.selectors={...r,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),x(this,L,M).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}L=new WeakSet,M=function(){var t;this.abortController=new AbortController;const e=this.abortController.signal;(t=this.buttons)==null||t.forEach(r=>{r.addEventListener("click",()=>{this.costomEvent(r,String(r.dataset.value))},{signal:e})})};exports.Button=O;exports.ButtonGroup=H;exports.Select=w;exports.SpinBox=G;exports.Switch=R;
|
package/dist/index.es.js
CHANGED
|
@@ -1,81 +1,81 @@
|
|
|
1
1
|
var _ = Object.defineProperty;
|
|
2
|
-
var F = (
|
|
3
|
-
throw TypeError(
|
|
2
|
+
var F = (h) => {
|
|
3
|
+
throw TypeError(h);
|
|
4
4
|
};
|
|
5
|
-
var T = (
|
|
6
|
-
var f = (
|
|
7
|
-
var y = (
|
|
8
|
-
var
|
|
9
|
-
var
|
|
5
|
+
var T = (h, e, t) => e in h ? _(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
|
|
6
|
+
var f = (h, e, t) => T(h, typeof e != "symbol" ? e + "" : e, t), B = (h, e, t) => e.has(h) || F("Cannot " + t);
|
|
7
|
+
var y = (h, e, t) => (B(h, e, "read from private field"), t ? t.call(h) : e.get(h)), p = (h, e, t) => e.has(h) ? F("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(h) : e.set(h, t);
|
|
8
|
+
var x = (h, e, t) => (B(h, e, "access private method"), t);
|
|
9
|
+
var E, k, K;
|
|
10
10
|
class H {
|
|
11
11
|
constructor(e = {}) {
|
|
12
|
-
p(this,
|
|
12
|
+
p(this, k);
|
|
13
13
|
f(this, "selectors");
|
|
14
14
|
f(this, "spinBoxes");
|
|
15
|
-
p(this,
|
|
16
|
-
e == a || e < a ? (
|
|
15
|
+
p(this, E, (e, t, r, a = 0, s = 0) => {
|
|
16
|
+
e == a || e < a ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), s !== 0 && (e == s || e > s ? (r.classList.add(this.selectors.disabledBtn), r.disabled = !0) : (r.classList.remove(this.selectors.disabledBtn), r.disabled = !1));
|
|
17
17
|
});
|
|
18
|
-
f(this, "getValidDataNumber", (e,
|
|
19
|
-
const r = e.getAttribute(`data-${
|
|
18
|
+
f(this, "getValidDataNumber", (e, t) => {
|
|
19
|
+
const r = e.getAttribute(`data-${t}`);
|
|
20
20
|
return r === null || r.trim() === "" || isNaN(Number(r)) ? 0 : Number(r);
|
|
21
21
|
});
|
|
22
|
-
const
|
|
22
|
+
const t = {
|
|
23
23
|
main: "UIsp",
|
|
24
24
|
btn: "UIsp__btn",
|
|
25
25
|
input: "UIsp__input",
|
|
26
26
|
disabledBtn: "disabled"
|
|
27
27
|
};
|
|
28
|
-
this.selectors = { ...
|
|
28
|
+
this.selectors = { ...t, ...e }, this.spinBoxes = document.querySelectorAll(
|
|
29
29
|
`.${this.selectors.main}`
|
|
30
|
-
),
|
|
30
|
+
), x(this, k, K).call(this);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
|
|
33
|
+
E = new WeakMap(), k = new WeakSet(), K = function() {
|
|
34
34
|
this.spinBoxes.forEach((e) => {
|
|
35
|
-
const
|
|
35
|
+
const t = e.querySelectorAll(
|
|
36
36
|
`.${this.selectors.btn}`
|
|
37
|
-
), r =
|
|
37
|
+
), r = t[0], a = t[1], s = e.querySelector(
|
|
38
38
|
`.${this.selectors.input}`
|
|
39
|
-
),
|
|
39
|
+
), i = this.getValidDataNumber(e, "step"), o = this.getValidDataNumber(e, "min"), l = this.getValidDataNumber(e, "max"), c = (u) => {
|
|
40
40
|
e.setAttribute("aria-valuenow", String(u)), e.setAttribute("aria-valuetext", `${u} items`);
|
|
41
41
|
};
|
|
42
|
-
Number(
|
|
43
|
-
let
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
let n = parseFloat(
|
|
47
|
-
n = n + 1 * u / Math.pow(10,
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
let n = parseFloat(
|
|
51
|
-
n = n - 1 * u / Math.pow(10,
|
|
52
|
-
},
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
|
|
42
|
+
Number(s.value) <= o && (s.value = o.toFixed(i)), l !== 0 ? (Number(s.value) >= l && (s.value = l.toFixed(i)), l && e.setAttribute("aria-valuemax", l.toFixed(i))) : s.value = Number(s.value).toFixed(i), o && e.setAttribute("aria-valuemin", o.toFixed(i)), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
|
|
43
|
+
let b = null;
|
|
44
|
+
const d = (u = 1) => {
|
|
45
|
+
s.value = String(Math.abs(Number(s.value)));
|
|
46
|
+
let n = parseFloat(s.value) || 0;
|
|
47
|
+
n = n + 1 * u / Math.pow(10, i), n > l && l !== 0 && (n = l), s.value = n.toFixed(i), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
|
|
48
|
+
}, m = (u = 1) => {
|
|
49
|
+
s.value = String(Math.abs(Number(s.value)));
|
|
50
|
+
let n = parseFloat(s.value) || 0;
|
|
51
|
+
n = n - 1 * u / Math.pow(10, i), n < o && (n = o), s.value = n.toFixed(i), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
|
|
52
|
+
}, v = (u, n = 150) => {
|
|
53
|
+
b === null && (b = window.setInterval(u, n));
|
|
54
|
+
}, A = () => {
|
|
55
|
+
b !== null && (clearInterval(b), b = null);
|
|
56
56
|
};
|
|
57
57
|
a.addEventListener("mousedown", (u) => {
|
|
58
58
|
const n = u.shiftKey ? 3 : 1;
|
|
59
|
-
|
|
60
|
-
}), a.addEventListener("touchstart", () =>
|
|
59
|
+
v(() => d(n));
|
|
60
|
+
}), a.addEventListener("touchstart", () => v(d)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
61
61
|
(u) => {
|
|
62
|
-
a.addEventListener(u,
|
|
62
|
+
a.addEventListener(u, A);
|
|
63
63
|
}
|
|
64
64
|
), a.addEventListener("click", (u) => {
|
|
65
65
|
const n = u.shiftKey ? 3 : 1;
|
|
66
|
-
|
|
66
|
+
b === null && d(n);
|
|
67
67
|
}), r.addEventListener("click", (u) => {
|
|
68
68
|
const n = u.shiftKey ? 3 : 1;
|
|
69
|
-
|
|
69
|
+
b === null && m(n);
|
|
70
70
|
}), r.addEventListener("mousedown", (u) => {
|
|
71
71
|
const n = u.shiftKey ? 3 : 1;
|
|
72
|
-
|
|
73
|
-
}), r.addEventListener("touchstart", () =>
|
|
72
|
+
v(() => m(n), 100);
|
|
73
|
+
}), r.addEventListener("touchstart", () => v(m, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
74
74
|
(u) => {
|
|
75
|
-
r.addEventListener(u,
|
|
75
|
+
r.addEventListener(u, A);
|
|
76
76
|
}
|
|
77
|
-
),
|
|
78
|
-
const n = u.key,
|
|
77
|
+
), s.addEventListener("keydown", (u) => {
|
|
78
|
+
const n = u.key, g = u.shiftKey ? 3 : 1;
|
|
79
79
|
if ([
|
|
80
80
|
"Backspace",
|
|
81
81
|
"Delete",
|
|
@@ -93,53 +93,55 @@ A = new WeakMap(), w = new WeakSet(), K = function() {
|
|
|
93
93
|
}
|
|
94
94
|
if (n === "ArrowUp" || n === "ArrowDown") {
|
|
95
95
|
u.preventDefault();
|
|
96
|
-
const U = parseFloat(
|
|
96
|
+
const U = parseFloat(s.value) || 0, D = 1 * g / Math.pow(10, i);
|
|
97
97
|
let $ = n === "ArrowUp" ? U + D : U - D;
|
|
98
|
-
$ <
|
|
98
|
+
$ < o && ($ = o), s.value = $.toFixed(i), Number(s.value) < o && (s.value = o.toFixed(i)), Number(s.value) > l && l !== 0 && (s.value = l.toFixed(i)), y(this, E).call(this, Number(s.value), r, a, o, l), c(s.value);
|
|
99
99
|
return;
|
|
100
100
|
}
|
|
101
|
-
const I = n === "," ? "." : n, q = /^[0-9]$/.test(I), N = I === ".", M =
|
|
102
|
-
(
|
|
103
|
-
}),
|
|
104
|
-
Number(
|
|
101
|
+
const I = n === "," ? "." : n, q = /^[0-9]$/.test(I), N = I === ".", M = s.value.includes(".");
|
|
102
|
+
(i === 0 && !q || i > 0 && !(q || N) || N && M) && u.preventDefault();
|
|
103
|
+
}), s.addEventListener("change", () => {
|
|
104
|
+
Number(s.value) < o && (s.value = o.toFixed(i)), Number(s.value) > l && l !== 0 ? s.value = l.toFixed(i) : s.value = Number(s.value).toFixed(i), y(this, E).call(this, Number(s.value), r, a, o, l);
|
|
105
105
|
});
|
|
106
106
|
});
|
|
107
107
|
};
|
|
108
|
-
var
|
|
108
|
+
var S, V;
|
|
109
109
|
class O {
|
|
110
110
|
constructor(e = {}) {
|
|
111
|
-
p(this,
|
|
111
|
+
p(this, S);
|
|
112
112
|
f(this, "selectors");
|
|
113
113
|
f(this, "main");
|
|
114
|
-
const
|
|
114
|
+
const t = {
|
|
115
115
|
main: "UIsw",
|
|
116
116
|
label: "UIsw-label"
|
|
117
117
|
};
|
|
118
|
-
this.selectors = { ...
|
|
118
|
+
this.selectors = { ...t, ...e }, this.main = document.querySelectorAll(
|
|
119
119
|
`.${this.selectors.main}`
|
|
120
|
-
),
|
|
120
|
+
), x(this, S, V).call(this);
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
|
-
|
|
123
|
+
S = new WeakSet(), V = function() {
|
|
124
124
|
this.main.forEach((e) => {
|
|
125
|
-
const
|
|
126
|
-
|
|
125
|
+
const t = e.querySelector(`.${this.selectors.label}`), r = e.querySelector("input");
|
|
126
|
+
t && t.id && e.setAttribute("aria-labelledby", t.id), r && (r.checked ? e.setAttribute("aria-checked", "true") : e.setAttribute("aria-checked", "false"), e.addEventListener("click", () => {
|
|
127
127
|
r.checked = !r.checked, e.setAttribute("aria-checked", String(r.checked));
|
|
128
|
-
}), e.addEventListener("keydown", (
|
|
129
|
-
|
|
128
|
+
}), e.addEventListener("keydown", (s) => {
|
|
129
|
+
s.key === "ArrowRight" ? (r.checked = !0, a(String(r.checked)), s.preventDefault()) : s.key === "ArrowLeft" && (r.checked = !1, a(String(r.checked)), s.preventDefault());
|
|
130
130
|
}));
|
|
131
|
-
const a = (
|
|
132
|
-
e.setAttribute("aria-checked", String(
|
|
131
|
+
const a = (s) => {
|
|
132
|
+
e.setAttribute("aria-checked", String(s));
|
|
133
133
|
};
|
|
134
134
|
});
|
|
135
135
|
};
|
|
136
|
-
class
|
|
137
|
-
constructor(e = {}) {
|
|
136
|
+
class w {
|
|
137
|
+
constructor(e = {}, t = !1) {
|
|
138
138
|
f(this, "selectors");
|
|
139
139
|
f(this, "main", null);
|
|
140
140
|
f(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
|
|
141
141
|
f(this, "abortController", new AbortController());
|
|
142
|
-
|
|
142
|
+
f(this, "dbug");
|
|
143
|
+
this.dbug = t;
|
|
144
|
+
const r = {
|
|
143
145
|
idPrefix: "UI-option-",
|
|
144
146
|
main: "UIselect",
|
|
145
147
|
selected: "UIselect-selected",
|
|
@@ -150,29 +152,29 @@ class x {
|
|
|
150
152
|
excludedItems: ["divider", "test"]
|
|
151
153
|
// class=""
|
|
152
154
|
};
|
|
153
|
-
this.selectors = { ...
|
|
155
|
+
this.selectors = { ...r, ...e }, this.main = document.querySelectorAll(
|
|
154
156
|
`.${this.selectors.main}`
|
|
155
157
|
), this.event(), this.initGlobalListener(this.selectors);
|
|
156
158
|
}
|
|
157
|
-
filterExcluded(e,
|
|
158
|
-
return Array.from(e).filter((r) => !
|
|
159
|
+
filterExcluded(e, t) {
|
|
160
|
+
return Array.from(e).filter((r) => !t.some((a) => typeof a == "string" ? r.classList.contains(a) || r.id === a : r === a));
|
|
159
161
|
}
|
|
160
|
-
filterSearch(e,
|
|
161
|
-
const r =
|
|
162
|
+
filterSearch(e, t) {
|
|
163
|
+
const r = t.trim().toLowerCase();
|
|
162
164
|
return e.filter((a) => {
|
|
163
|
-
var
|
|
164
|
-
const
|
|
165
|
-
return
|
|
165
|
+
var o, l;
|
|
166
|
+
const s = ((o = a.dataset.value) == null ? void 0 : o.toLowerCase()) || "", i = ((l = a.textContent) == null ? void 0 : l.toLowerCase()) || "";
|
|
167
|
+
return s.includes(r) || i.includes(r);
|
|
166
168
|
});
|
|
167
169
|
}
|
|
168
170
|
destroy() {
|
|
169
|
-
|
|
171
|
+
w.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
|
|
170
172
|
}
|
|
171
173
|
event() {
|
|
172
|
-
var
|
|
174
|
+
var t;
|
|
173
175
|
this.abortController = new AbortController();
|
|
174
176
|
const e = this.abortController.signal;
|
|
175
|
-
(
|
|
177
|
+
(t = this.main) == null || t.forEach(
|
|
176
178
|
(r) => {
|
|
177
179
|
const a = r.querySelector(
|
|
178
180
|
`.${this.selectors.main} input[type='hidden']`
|
|
@@ -180,257 +182,271 @@ class x {
|
|
|
180
182
|
try {
|
|
181
183
|
if (!a)
|
|
182
184
|
throw new Error('<input type="hidden" name="YouUniqueId">');
|
|
183
|
-
} catch (
|
|
184
|
-
return console.warn("Not found:",
|
|
185
|
+
} catch (v) {
|
|
186
|
+
return console.warn("Not found:", v.message);
|
|
185
187
|
}
|
|
186
|
-
const
|
|
188
|
+
const s = r.querySelector(
|
|
187
189
|
`.${this.selectors.selected}`
|
|
188
|
-
), l = r.querySelector(
|
|
189
|
-
`.${this.selectors.arrow}`
|
|
190
190
|
), i = r.querySelector(
|
|
191
|
-
`.${this.selectors.
|
|
191
|
+
`.${this.selectors.arrow}`
|
|
192
192
|
), o = r.querySelector(
|
|
193
|
+
`.${this.selectors.optionsList}`
|
|
194
|
+
), l = r.querySelector(
|
|
193
195
|
`.${this.selectors.search} input`
|
|
194
196
|
);
|
|
195
|
-
|
|
197
|
+
i && i.addEventListener(
|
|
196
198
|
"click",
|
|
197
199
|
() => {
|
|
198
|
-
this.toggle(r,
|
|
200
|
+
this.toggle(r, o);
|
|
199
201
|
},
|
|
200
202
|
{ signal: e }
|
|
201
|
-
),
|
|
203
|
+
), s.addEventListener(
|
|
202
204
|
"click",
|
|
203
205
|
() => {
|
|
204
|
-
this.toggle(r,
|
|
206
|
+
this.toggle(r, o);
|
|
205
207
|
},
|
|
206
208
|
{ signal: e }
|
|
207
209
|
), r.addEventListener(
|
|
208
210
|
"click",
|
|
209
211
|
() => {
|
|
210
|
-
this.itemsPosition(
|
|
212
|
+
this.itemsPosition(o);
|
|
211
213
|
},
|
|
212
214
|
{ signal: e }
|
|
213
215
|
);
|
|
214
|
-
const
|
|
216
|
+
const c = o.querySelectorAll(
|
|
215
217
|
`.${this.selectors.items} ul li`
|
|
216
|
-
),
|
|
217
|
-
|
|
218
|
+
), b = this.filterExcluded(
|
|
219
|
+
c,
|
|
218
220
|
this.selectors.excludedItems
|
|
219
|
-
),
|
|
221
|
+
), d = r.querySelector(
|
|
220
222
|
"[aria-selected='true']"
|
|
221
223
|
);
|
|
222
|
-
|
|
223
|
-
var
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
(
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
224
|
+
d && this.defaultSelect(r, d, s, a);
|
|
225
|
+
var m = [];
|
|
226
|
+
l && l.addEventListener(
|
|
227
|
+
"input",
|
|
228
|
+
(v) => {
|
|
229
|
+
const u = v.target.value.trim();
|
|
230
|
+
s && (m = this.filterSearch(b, u), u ? (c.forEach((n) => n.remove()), m.forEach((n) => {
|
|
231
|
+
var g;
|
|
232
|
+
(g = o.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(n);
|
|
233
|
+
})) : c.forEach((n) => {
|
|
234
|
+
var g;
|
|
235
|
+
(g = o.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(n);
|
|
236
|
+
}), this.itemArrow(r, o, s, a, e));
|
|
237
|
+
},
|
|
238
|
+
{ signal: e }
|
|
239
|
+
), this.itemArrow(r, o, s, a, e), this.items(r, o, b, s, a, e);
|
|
234
240
|
},
|
|
235
241
|
{ signal: e }
|
|
236
242
|
);
|
|
237
243
|
}
|
|
238
|
-
itemArrow(e,
|
|
244
|
+
itemArrow(e, t, r, a, s) {
|
|
239
245
|
if (this.itemArrowInitialized.has(e)) return;
|
|
240
246
|
this.itemArrowInitialized.add(e);
|
|
241
|
-
let
|
|
242
|
-
const
|
|
247
|
+
let i = -1;
|
|
248
|
+
const o = r.textContent ? r.textContent : "", l = e.querySelector(
|
|
243
249
|
`.${this.selectors.search} input`
|
|
244
250
|
);
|
|
245
|
-
e.addEventListener(
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
this.
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
251
|
+
e.addEventListener(
|
|
252
|
+
"keydown",
|
|
253
|
+
(c) => {
|
|
254
|
+
l && l.focus();
|
|
255
|
+
const b = Array.from(
|
|
256
|
+
t.querySelectorAll(`.${this.selectors.optionsList} ul li`)
|
|
257
|
+
), d = this.filterExcluded(
|
|
258
|
+
b,
|
|
259
|
+
this.selectors.excludedItems
|
|
260
|
+
), m = d.length;
|
|
261
|
+
if (m !== 0)
|
|
262
|
+
if (c.key === "ArrowDown") {
|
|
263
|
+
c.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), i = (i + 1) % m, r.textContent = d[i].textContent, d.forEach((A) => A.removeAttribute("aria-selected")), d[i].setAttribute("aria-selected", "true");
|
|
264
|
+
const v = d[i].id || `${this.selectors.idPrefix}${i}`;
|
|
265
|
+
e.setAttribute("aria-activedescendant", v), d[i].scrollIntoView({ block: "nearest" });
|
|
266
|
+
} else if (c.key === "ArrowUp") {
|
|
267
|
+
c.preventDefault(), i = (i - 1 + m) % m, r.textContent = d[i].textContent, d.forEach((A) => A.removeAttribute("aria-selected")), d[i].setAttribute("aria-selected", "true");
|
|
268
|
+
const v = d[i].id || `${this.selectors.idPrefix}${i}`;
|
|
269
|
+
e.setAttribute("aria-activedescendant", v), d[i].scrollIntoView({ block: "nearest" });
|
|
270
|
+
} else if (c.key === "Enter")
|
|
271
|
+
if (c.preventDefault(), i >= 0) {
|
|
272
|
+
r.textContent = d[i].textContent, d.forEach((A) => A.removeAttribute("aria-selected")), d[i].setAttribute("aria-selected", "true");
|
|
273
|
+
const v = d[i].id || `${this.selectors.idPrefix}${i}`;
|
|
274
|
+
e.setAttribute("aria-activedescendant", v), a.value = String(d[i].dataset.value), this.costomEvent(e, a.value), this.close(e, t);
|
|
275
|
+
} else
|
|
276
|
+
this.toggle(e, t);
|
|
277
|
+
else c.key === "Escape" && (e.getAttribute("aria-activedescendant") || (r.textContent = o), this.close(e, t));
|
|
278
|
+
},
|
|
279
|
+
{ signal: s }
|
|
280
|
+
);
|
|
271
281
|
}
|
|
272
282
|
itemsPosition(e) {
|
|
273
|
-
const
|
|
283
|
+
const t = e.querySelector(
|
|
274
284
|
'[aria-selected="true"]'
|
|
275
285
|
);
|
|
276
|
-
|
|
286
|
+
t && t.scrollIntoView({ block: "nearest" });
|
|
277
287
|
}
|
|
278
|
-
items(e,
|
|
279
|
-
r.forEach((
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
+
items(e, t, r, a, s, i) {
|
|
289
|
+
r.forEach((o, l) => {
|
|
290
|
+
o.addEventListener(
|
|
291
|
+
"click",
|
|
292
|
+
() => {
|
|
293
|
+
const c = r[l];
|
|
294
|
+
if (c) {
|
|
295
|
+
a.textContent = c.textContent, r.forEach((d) => d.removeAttribute("aria-selected")), c.setAttribute("aria-selected", "true");
|
|
296
|
+
const b = c.id || `${this.selectors.idPrefix}${l}`;
|
|
297
|
+
e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", b), s.value = String(r[l].dataset.value), this.costomEvent(e, s.value), this.close(e, t);
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
{ signal: i }
|
|
301
|
+
);
|
|
288
302
|
});
|
|
289
303
|
}
|
|
290
|
-
defaultSelect(e,
|
|
291
|
-
|
|
304
|
+
defaultSelect(e, t, r, a) {
|
|
305
|
+
t && (a.setAttribute("value", t.dataset.value ?? ""), r.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
|
|
292
306
|
}
|
|
293
|
-
costomEvent(e,
|
|
294
|
-
e.dispatchEvent(
|
|
295
|
-
new CustomEvent("change", {
|
|
296
|
-
detail: { val:
|
|
307
|
+
costomEvent(e, t) {
|
|
308
|
+
this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
|
|
309
|
+
new CustomEvent("ui-select-change", {
|
|
310
|
+
detail: { val: t },
|
|
297
311
|
bubbles: !0
|
|
298
312
|
})
|
|
299
313
|
);
|
|
300
314
|
}
|
|
301
|
-
toggle(e,
|
|
302
|
-
|
|
315
|
+
toggle(e, t) {
|
|
316
|
+
w.closeAll(this.selectors), t.hidden ? (t.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, t);
|
|
303
317
|
}
|
|
304
|
-
close(e,
|
|
305
|
-
|
|
318
|
+
close(e, t) {
|
|
319
|
+
t.hidden = !0, e.setAttribute("aria-expanded", "false");
|
|
306
320
|
}
|
|
307
321
|
static closeAll(e) {
|
|
308
|
-
document.querySelectorAll(`.${e.main}`).forEach((
|
|
309
|
-
const r =
|
|
310
|
-
r.hidden = !0,
|
|
322
|
+
document.querySelectorAll(`.${e.main}`).forEach((t) => {
|
|
323
|
+
const r = t.querySelector(`.${e.optionsList}`);
|
|
324
|
+
r.hidden = !0, t.setAttribute("aria-expanded", "false");
|
|
311
325
|
});
|
|
312
326
|
}
|
|
313
327
|
initGlobalListener(e) {
|
|
314
328
|
document.addEventListener(
|
|
315
329
|
"click",
|
|
316
|
-
(
|
|
317
|
-
const r =
|
|
330
|
+
(t) => {
|
|
331
|
+
const r = t.target;
|
|
318
332
|
[...document.querySelectorAll(`.${e.main}`)].some(
|
|
319
|
-
(
|
|
320
|
-
) ||
|
|
333
|
+
(s) => s.contains(r)
|
|
334
|
+
) || w.closeAll(e);
|
|
321
335
|
},
|
|
322
336
|
{ signal: this.abortController.signal }
|
|
323
337
|
);
|
|
324
338
|
}
|
|
325
339
|
}
|
|
326
|
-
var
|
|
340
|
+
var C, P;
|
|
327
341
|
class Q {
|
|
328
342
|
constructor(e = {}) {
|
|
329
|
-
p(this,
|
|
343
|
+
p(this, C);
|
|
330
344
|
f(this, "selectors");
|
|
331
345
|
f(this, "groups");
|
|
332
|
-
const
|
|
346
|
+
const t = {
|
|
333
347
|
main: "UIbg",
|
|
334
348
|
btn: "UIbg-btn",
|
|
335
349
|
input: "UIbg-input"
|
|
336
350
|
};
|
|
337
|
-
this.selectors = { ...
|
|
351
|
+
this.selectors = { ...t, ...e }, this.groups = document.querySelectorAll(
|
|
338
352
|
`.${this.selectors.main}`
|
|
339
|
-
),
|
|
353
|
+
), x(this, C, P).call(this);
|
|
340
354
|
}
|
|
341
355
|
}
|
|
342
|
-
|
|
356
|
+
C = new WeakSet(), P = function() {
|
|
343
357
|
this.groups.forEach((e) => {
|
|
344
|
-
const
|
|
358
|
+
const t = e.querySelectorAll(
|
|
345
359
|
`.${this.selectors.btn}`
|
|
346
360
|
);
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
}),
|
|
352
|
-
}),
|
|
353
|
-
let
|
|
354
|
-
if (
|
|
355
|
-
const
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
}),
|
|
361
|
+
t.forEach((s) => {
|
|
362
|
+
s.addEventListener("click", () => {
|
|
363
|
+
t.forEach((i) => {
|
|
364
|
+
i.setAttribute("aria-checked", "false"), i.setAttribute("tabindex", "-1");
|
|
365
|
+
}), s.setAttribute("aria-checked", "true"), s.setAttribute("tabindex", "0"), s.focus();
|
|
366
|
+
}), s.addEventListener("keydown", (i) => {
|
|
367
|
+
let o = Array.from(t).indexOf(s);
|
|
368
|
+
if (i.key === "ArrowRight" && o++, i.key === "ArrowLeft" && o--, o < 0 && (o = t.length - 1), o >= t.length && (o = 0), i.key === "Enter") {
|
|
369
|
+
const c = r[o];
|
|
370
|
+
c && !c.disabled && (r.forEach((b) => {
|
|
371
|
+
b.checked = !1, b.removeAttribute("checked");
|
|
372
|
+
}), c.checked = !0, c.setAttribute("checked", ""), c.dispatchEvent(
|
|
359
373
|
new CustomEvent("ui-button-group-change", {
|
|
360
|
-
detail: { id:
|
|
374
|
+
detail: { id: c.id, value: c.value },
|
|
361
375
|
bubbles: !0
|
|
362
376
|
})
|
|
363
|
-
)),
|
|
377
|
+
)), i.preventDefault();
|
|
364
378
|
return;
|
|
365
379
|
}
|
|
366
|
-
const
|
|
367
|
-
|
|
380
|
+
const l = t[o];
|
|
381
|
+
l && (t.forEach((c) => c.setAttribute("tabindex", "-1")), l.setAttribute("tabindex", "0"), l.focus());
|
|
368
382
|
});
|
|
369
383
|
});
|
|
370
384
|
const r = e.querySelectorAll(
|
|
371
385
|
`.${this.selectors.input}`
|
|
372
386
|
);
|
|
373
|
-
r.forEach((
|
|
374
|
-
const
|
|
375
|
-
|
|
376
|
-
r.forEach((
|
|
377
|
-
|
|
378
|
-
}), r[
|
|
387
|
+
r.forEach((s, i) => {
|
|
388
|
+
const o = t[i];
|
|
389
|
+
o && (s.tabIndex = -1, o.setAttribute("role", "radio"), o.setAttribute("aria-checked", String(s.checked)), o.setAttribute("tabindex", s.checked ? "0" : "-1"), s.disabled ? o.setAttribute("aria-disabled", "true") : o.removeAttribute("aria-disabled"), s.addEventListener("click", () => {
|
|
390
|
+
r.forEach((l) => {
|
|
391
|
+
l.checked = !1, l.removeAttribute("checked");
|
|
392
|
+
}), r[i].checked = !0, r[i].setAttribute("checked", ""), s.dispatchEvent(
|
|
379
393
|
new CustomEvent("ui-button-group-change", {
|
|
380
|
-
detail: { id:
|
|
394
|
+
detail: { id: s.id, value: s.value },
|
|
381
395
|
bubbles: !0
|
|
382
396
|
})
|
|
383
397
|
);
|
|
384
|
-
}),
|
|
385
|
-
console.log("detail:",
|
|
398
|
+
}), s.addEventListener("ui-button-group-change", (l) => {
|
|
399
|
+
console.log("detail:", l.detail);
|
|
386
400
|
}));
|
|
387
401
|
});
|
|
388
402
|
const a = Array.from(r).find(
|
|
389
|
-
(
|
|
403
|
+
(s) => !s.checked && !s.disabled
|
|
390
404
|
);
|
|
391
405
|
if (a) {
|
|
392
|
-
const
|
|
406
|
+
const s = e.querySelector(
|
|
393
407
|
`label[for="${a.id}"]`
|
|
394
408
|
);
|
|
395
|
-
|
|
409
|
+
s && s.setAttribute("tabindex", "0");
|
|
396
410
|
}
|
|
397
411
|
});
|
|
398
412
|
};
|
|
399
|
-
var
|
|
413
|
+
var L, z;
|
|
400
414
|
class W {
|
|
401
|
-
constructor(e = {}) {
|
|
402
|
-
p(this,
|
|
415
|
+
constructor(e = {}, t = !1) {
|
|
416
|
+
p(this, L);
|
|
403
417
|
f(this, "selectors");
|
|
404
418
|
f(this, "buttons", null);
|
|
405
419
|
f(this, "abortController", new AbortController());
|
|
406
|
-
|
|
420
|
+
f(this, "dbug");
|
|
421
|
+
this.dbug = t;
|
|
422
|
+
const r = {
|
|
407
423
|
main: "UIb"
|
|
408
424
|
};
|
|
409
|
-
this.selectors = { ...
|
|
425
|
+
this.selectors = { ...r, ...e }, this.buttons = document.querySelectorAll(
|
|
410
426
|
`.${this.selectors.main}`
|
|
411
|
-
),
|
|
427
|
+
), x(this, L, z).call(this);
|
|
412
428
|
}
|
|
413
429
|
destroy() {
|
|
414
430
|
this.abortController && this.abortController.abort(), this.buttons = null;
|
|
415
431
|
}
|
|
416
|
-
costomEvent(e,
|
|
417
|
-
if (!
|
|
432
|
+
costomEvent(e, t) {
|
|
433
|
+
if (!t || t === "undefined" || t.trim() === "") {
|
|
418
434
|
console.log('Button data-value="" Not set!');
|
|
419
435
|
return;
|
|
420
436
|
}
|
|
421
|
-
console.log(
|
|
437
|
+
this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
|
|
422
438
|
new CustomEvent("ui-button-change", {
|
|
423
|
-
detail: { val:
|
|
439
|
+
detail: { val: t },
|
|
424
440
|
bubbles: !0
|
|
425
441
|
})
|
|
426
442
|
);
|
|
427
443
|
}
|
|
428
444
|
}
|
|
429
|
-
|
|
430
|
-
var
|
|
445
|
+
L = new WeakSet(), z = function() {
|
|
446
|
+
var t;
|
|
431
447
|
this.abortController = new AbortController();
|
|
432
448
|
const e = this.abortController.signal;
|
|
433
|
-
(
|
|
449
|
+
(t = this.buttons) == null || t.forEach((r) => {
|
|
434
450
|
r.addEventListener(
|
|
435
451
|
"click",
|
|
436
452
|
() => {
|
|
@@ -443,7 +459,7 @@ C = new WeakSet(), z = function() {
|
|
|
443
459
|
export {
|
|
444
460
|
W as Button,
|
|
445
461
|
Q as ButtonGroup,
|
|
446
|
-
|
|
462
|
+
w as Select,
|
|
447
463
|
H as SpinBox,
|
|
448
464
|
O as Switch
|
|
449
465
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.UiElements={}))})(this,function(d){"use strict";var H=Object.defineProperty;var V=d=>{throw TypeError(d)};var O=(d,h,b)=>h in d?H(d,h,{enumerable:!0,configurable:!0,writable:!0,value:b}):d[h]=b;var v=(d,h,b)=>O(d,typeof h!="symbol"?h+"":h,b),P=(d,h,b)=>h.has(d)||V("Cannot "+b);var g=(d,h,b)=>(P(d,h,"read from private field"),b?b.call(d):h.get(d)),w=(d,h,b)=>h.has(d)?V("Cannot add the same private member more than once"):h instanceof WeakSet?h.add(d):h.set(d,b);var k=(d,h,b)=>(P(d,h,"access private method"),b);var E,S,T,C,M,L,z,$,_;class h{constructor(t={}){w(this,S);v(this,"selectors");v(this,"spinBoxes");w(this,E,(t,r,s,n=0,e=0)=>{t==n||t<n?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1),e!==0&&(t==e||t>e?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))});v(this,"getValidDataNumber",(t,r)=>{const s=t.getAttribute(`data-${r}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)});const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),k(this,S,T).call(this)}}E=new WeakMap,S=new WeakSet,T=function(){this.spinBoxes.forEach(t=>{const r=t.querySelectorAll(`.${this.selectors.btn}`),s=r[0],n=r[1],e=t.querySelector(`.${this.selectors.input}`),l=this.getValidDataNumber(t,"step"),i=this.getValidDataNumber(t,"min"),o=this.getValidDataNumber(t,"max"),f=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(e.value)<=i&&(e.value=i.toFixed(l)),o!==0?(Number(e.value)>=o&&(e.value=o.toFixed(l)),o&&t.setAttribute("aria-valuemax",o.toFixed(l))):e.value=Number(e.value).toFixed(l),i&&t.setAttribute("aria-valuemin",i.toFixed(l)),g(this,E).call(this,Number(e.value),s,n,i,o),f(e.value);let c=null;const y=(u=1)=>{e.value=String(Math.abs(Number(e.value)));let a=parseFloat(e.value)||0;a=a+1*u/Math.pow(10,l),a>o&&o!==0&&(a=o),e.value=a.toFixed(l),g(this,E).call(this,Number(e.value),s,n,i,o),f(e.value)},A=(u=1)=>{e.value=String(Math.abs(Number(e.value)));let a=parseFloat(e.value)||0;a=a-1*u/Math.pow(10,l),a<i&&(a=i),e.value=a.toFixed(l),g(this,E).call(this,Number(e.value),s,n,i,o),f(e.value)},m=(u,a=150)=>{c===null&&(c=window.setInterval(u,a))},q=()=>{c!==null&&(clearInterval(c),c=null)};n.addEventListener("mousedown",u=>{const a=u.shiftKey?3:1;m(()=>y(a))}),n.addEventListener("touchstart",()=>m(y)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{n.addEventListener(u,q)}),n.addEventListener("click",u=>{const a=u.shiftKey?3:1;c===null&&y(a)}),s.addEventListener("click",u=>{const a=u.shiftKey?3:1;c===null&&A(a)}),s.addEventListener("mousedown",u=>{const a=u.shiftKey?3:1;m(()=>A(a),100)}),s.addEventListener("touchstart",()=>m(A,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{s.addEventListener(u,q)}),e.addEventListener("keydown",u=>{const a=u.key,p=u.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(a)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(a.toLowerCase()))return;if(["e","+","-"].includes(a)){u.preventDefault();return}if(a==="ArrowUp"||a==="ArrowDown"){u.preventDefault();const F=parseFloat(e.value)||0,K=1*p/Math.pow(10,l);let N=a==="ArrowUp"?F+K:F-K;N<i&&(N=i),e.value=N.toFixed(l),Number(e.value)<i&&(e.value=i.toFixed(l)),Number(e.value)>o&&o!==0&&(e.value=o.toFixed(l)),g(this,E).call(this,Number(e.value),s,n,i,o),f(e.value);return}const U=a===","?".":a,D=/^[0-9]$/.test(U),B=U===".",j=e.value.includes(".");(l===0&&!D||l>0&&!(D||B)||B&&j)&&u.preventDefault()}),e.addEventListener("change",()=>{Number(e.value)<i&&(e.value=i.toFixed(l)),Number(e.value)>o&&o!==0?e.value=o.toFixed(l):e.value=Number(e.value).toFixed(l),g(this,E).call(this,Number(e.value),s,n,i,o)})})};class b{constructor(t={}){w(this,C);v(this,"selectors");v(this,"main");const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),k(this,C,M).call(this)}}C=new WeakSet,M=function(){this.main.forEach(t=>{const r=t.querySelector(`.${this.selectors.label}`),s=t.querySelector("input");r&&r.id&&t.setAttribute("aria-labelledby",r.id),s&&(s.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{s.checked=!s.checked,t.setAttribute("aria-checked",String(s.checked))}),t.addEventListener("keydown",e=>{e.key==="ArrowRight"?(s.checked=!0,n(String(s.checked)),e.preventDefault()):e.key==="ArrowLeft"&&(s.checked=!1,n(String(s.checked)),e.preventDefault())}));const n=e=>{t.setAttribute("aria-checked",String(e))}})};class x{constructor(t={}){v(this,"selectors");v(this,"main",null);v(this,"itemArrowInitialized",new WeakSet);v(this,"abortController",new AbortController);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,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(t,r){return Array.from(t).filter(s=>!r.some(n=>typeof n=="string"?s.classList.contains(n)||s.id===n:s===n))}filterSearch(t,r){const s=r.trim().toLowerCase();return t.filter(n=>{var i,o;const e=((i=n.dataset.value)==null?void 0:i.toLowerCase())||"",l=((o=n.textContent)==null?void 0:o.toLowerCase())||"";return e.includes(s)||l.includes(s)})}destroy(){x.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var r;this.abortController=new AbortController;const t=this.abortController.signal;(r=this.main)==null||r.forEach(s=>{const n=s.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!n)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(m){return console.warn("Not found:",m.message)}const e=s.querySelector(`.${this.selectors.selected}`),l=s.querySelector(`.${this.selectors.arrow}`),i=s.querySelector(`.${this.selectors.optionsList}`),o=s.querySelector(`.${this.selectors.search} input`);l&&l.addEventListener("click",()=>{this.toggle(s,i)},{signal:t}),e.addEventListener("click",()=>{this.toggle(s,i)},{signal:t}),s.addEventListener("click",()=>{this.itemsPosition(i)},{signal:t});const f=i.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(f,this.selectors.excludedItems),y=s.querySelector("[aria-selected='true']");y&&this.defaultSelect(s,y,e,n);var A=[];o&&o.addEventListener("input",m=>{const u=m.target.value.trim();e&&(A=this.filterSearch(c,u),u?(f.forEach(a=>a.remove()),A.forEach(a=>{var p;(p=i.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(a)})):f.forEach(a=>{var p;(p=i.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(a)}),this.itemArrow(s,i,e,n))}),this.itemArrow(s,i,e,n),this.items(s,i,c,e,n)},{signal:t})}itemArrow(t,r,s,n){if(this.itemArrowInitialized.has(t))return;this.itemArrowInitialized.add(t);let e=-1;const l=s.textContent?s.textContent:"",i=t.querySelector(`.${this.selectors.search} input`);t.addEventListener("keydown",o=>{i&&i.focus();const f=Array.from(r.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(f,this.selectors.excludedItems),y=c.length;if(y!==0)if(o.key==="ArrowDown"){o.preventDefault(),t.getAttribute("aria-expanded")==="false"&&this.toggle(t,r),e=(e+1)%y,s.textContent=c[e].textContent,c.forEach(m=>m.removeAttribute("aria-selected")),c[e].setAttribute("aria-selected","true");const A=c[e].id||`${this.selectors.idPrefix}${e}`;t.setAttribute("aria-activedescendant",A),c[e].scrollIntoView({block:"nearest"})}else if(o.key==="ArrowUp"){o.preventDefault(),e=(e-1+y)%y,s.textContent=c[e].textContent,c.forEach(m=>m.removeAttribute("aria-selected")),c[e].setAttribute("aria-selected","true");const A=c[e].id||`${this.selectors.idPrefix}${e}`;t.setAttribute("aria-activedescendant",A),c[e].scrollIntoView({block:"nearest"})}else if(o.key==="Enter")if(o.preventDefault(),e>=0){s.textContent=c[e].textContent,c.forEach(m=>m.removeAttribute("aria-selected")),c[e].setAttribute("aria-selected","true");const A=c[e].id||`${this.selectors.idPrefix}${e}`;t.setAttribute("aria-activedescendant",A),n.value=String(c[e].dataset.value),this.costomEvent(t,n.value),this.close(t,r)}else this.toggle(t,r);else o.key==="Escape"&&(t.getAttribute("aria-activedescendant")||(s.textContent=l),this.close(t,r))})}itemsPosition(t){const r=t.querySelector('[aria-selected="true"]');r&&r.scrollIntoView({block:"nearest"})}items(t,r,s,n,e){s.forEach((l,i)=>{l.addEventListener("click",()=>{const o=s[i];if(o){n.textContent=o.textContent,s.forEach(c=>c.removeAttribute("aria-selected")),o.setAttribute("aria-selected","true");const f=o.id||`${this.selectors.idPrefix}${i}`;t.setAttribute("aria-expanded","false"),t.setAttribute("aria-activedescendant",f),e.value=String(s[i].dataset.value),this.costomEvent(t,e.value),this.close(t,r)}})})}defaultSelect(t,r,s,n){r&&(n.setAttribute("value",r.dataset.value??""),s.textContent=r.textContent??"",t.setAttribute("aria-activedescendant",r.id||""))}costomEvent(t,r){t.dispatchEvent(new CustomEvent("change",{detail:{val:r},bubbles:!0}))}toggle(t,r){x.closeAll(this.selectors),r.hidden?(r.hidden=!1,t.setAttribute("aria-expanded","true")):this.close(t,r)}close(t,r){r.hidden=!0,t.setAttribute("aria-expanded","false")}static closeAll(t){document.querySelectorAll(`.${t.main}`).forEach(r=>{const s=r.querySelector(`.${t.optionsList}`);s.hidden=!0,r.setAttribute("aria-expanded","false")})}initGlobalListener(t){document.addEventListener("click",r=>{const s=r.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(s))||x.closeAll(t)},{signal:this.abortController.signal})}}class G{constructor(t={}){w(this,L);v(this,"selectors");v(this,"groups");const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...t},this.groups=document.querySelectorAll(`.${this.selectors.main}`),k(this,L,z).call(this)}}L=new WeakSet,z=function(){this.groups.forEach(t=>{const r=t.querySelectorAll(`.${this.selectors.btn}`);r.forEach(e=>{e.addEventListener("click",()=>{r.forEach(l=>{l.setAttribute("aria-checked","false"),l.setAttribute("tabindex","-1")}),e.setAttribute("aria-checked","true"),e.setAttribute("tabindex","0"),e.focus()}),e.addEventListener("keydown",l=>{let i=Array.from(r).indexOf(e);if(l.key==="ArrowRight"&&i++,l.key==="ArrowLeft"&&i--,i<0&&(i=r.length-1),i>=r.length&&(i=0),l.key==="Enter"){const f=s[i];f&&!f.disabled&&(s.forEach(c=>{c.checked=!1,c.removeAttribute("checked")}),f.checked=!0,f.setAttribute("checked",""),f.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:f.id,value:f.value},bubbles:!0}))),l.preventDefault();return}const o=r[i];o&&(r.forEach(f=>f.setAttribute("tabindex","-1")),o.setAttribute("tabindex","0"),o.focus())})});const s=t.querySelectorAll(`.${this.selectors.input}`);s.forEach((e,l)=>{const i=r[l];i&&(e.tabIndex=-1,i.setAttribute("role","radio"),i.setAttribute("aria-checked",String(e.checked)),i.setAttribute("tabindex",e.checked?"0":"-1"),e.disabled?i.setAttribute("aria-disabled","true"):i.removeAttribute("aria-disabled"),e.addEventListener("click",()=>{s.forEach(o=>{o.checked=!1,o.removeAttribute("checked")}),s[l].checked=!0,s[l].setAttribute("checked",""),e.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:e.id,value:e.value},bubbles:!0}))}),e.addEventListener("ui-button-group-change",o=>{console.log("detail:",o.detail)}))});const n=Array.from(s).find(e=>!e.checked&&!e.disabled);if(n){const e=t.querySelector(`label[for="${n.id}"]`);e&&e.setAttribute("tabindex","0")}})};class R{constructor(t={}){w(this,$);v(this,"selectors");v(this,"buttons",null);v(this,"abortController",new AbortController);const r={main:"UIb"};this.selectors={...r,...t},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),k(this,$,_).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}costomEvent(t,r){if(!r||r==="undefined"||r.trim()===""){console.log('Button data-value="" Not set!');return}console.log("dis"),t.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:r},bubbles:!0}))}}$=new WeakSet,_=function(){var r;this.abortController=new AbortController;const t=this.abortController.signal;(r=this.buttons)==null||r.forEach(s=>{s.addEventListener("click",()=>{this.costomEvent(s,String(s.dataset.value))},{signal:t})})},d.Button=R,d.ButtonGroup=G,d.Select=x,d.SpinBox=h,d.Switch=b,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.UiElements={}))})(this,function(d){"use strict";var H=Object.defineProperty;var V=d=>{throw TypeError(d)};var O=(d,h,m)=>h in d?H(d,h,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[h]=m;var v=(d,h,m)=>O(d,typeof h!="symbol"?h+"":h,m),P=(d,h,m)=>h.has(d)||V("Cannot "+m);var w=(d,h,m)=>(P(d,h,"read from private field"),m?m.call(d):h.get(d)),x=(d,h,m)=>h.has(d)?V("Cannot add the same private member more than once"):h instanceof WeakSet?h.add(d):h.set(d,m);var S=(d,h,m)=>(P(d,h,"access private method"),m);var E,C,T,L,M,$,z,I,_;class h{constructor(e={}){x(this,C);v(this,"selectors");v(this,"spinBoxes");x(this,E,(e,r,s,n=0,t=0)=>{e==n||e<n?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1),t!==0&&(e==t||e>t?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))});v(this,"getValidDataNumber",(e,r)=>{const s=e.getAttribute(`data-${r}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)});const r={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...r,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),S(this,C,T).call(this)}}E=new WeakMap,C=new WeakSet,T=function(){this.spinBoxes.forEach(e=>{const r=e.querySelectorAll(`.${this.selectors.btn}`),s=r[0],n=r[1],t=e.querySelector(`.${this.selectors.input}`),i=this.getValidDataNumber(e,"step"),o=this.getValidDataNumber(e,"min"),l=this.getValidDataNumber(e,"max"),c=u=>{e.setAttribute("aria-valuenow",String(u)),e.setAttribute("aria-valuetext",`${u} items`)};Number(t.value)<=o&&(t.value=o.toFixed(i)),l!==0?(Number(t.value)>=l&&(t.value=l.toFixed(i)),l&&e.setAttribute("aria-valuemax",l.toFixed(i))):t.value=Number(t.value).toFixed(i),o&&e.setAttribute("aria-valuemin",o.toFixed(i)),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value);let b=null;const f=(u=1)=>{t.value=String(Math.abs(Number(t.value)));let a=parseFloat(t.value)||0;a=a+1*u/Math.pow(10,i),a>l&&l!==0&&(a=l),t.value=a.toFixed(i),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value)},g=(u=1)=>{t.value=String(Math.abs(Number(t.value)));let a=parseFloat(t.value)||0;a=a-1*u/Math.pow(10,i),a<o&&(a=o),t.value=a.toFixed(i),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value)},A=(u,a=150)=>{b===null&&(b=window.setInterval(u,a))},y=()=>{b!==null&&(clearInterval(b),b=null)};n.addEventListener("mousedown",u=>{const a=u.shiftKey?3:1;A(()=>f(a))}),n.addEventListener("touchstart",()=>A(f)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{n.addEventListener(u,y)}),n.addEventListener("click",u=>{const a=u.shiftKey?3:1;b===null&&f(a)}),s.addEventListener("click",u=>{const a=u.shiftKey?3:1;b===null&&g(a)}),s.addEventListener("mousedown",u=>{const a=u.shiftKey?3:1;A(()=>g(a),100)}),s.addEventListener("touchstart",()=>A(g,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{s.addEventListener(u,y)}),t.addEventListener("keydown",u=>{const a=u.key,p=u.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(a)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(a.toLowerCase()))return;if(["e","+","-"].includes(a)){u.preventDefault();return}if(a==="ArrowUp"||a==="ArrowDown"){u.preventDefault();const F=parseFloat(t.value)||0,K=1*p/Math.pow(10,i);let N=a==="ArrowUp"?F+K:F-K;N<o&&(N=o),t.value=N.toFixed(i),Number(t.value)<o&&(t.value=o.toFixed(i)),Number(t.value)>l&&l!==0&&(t.value=l.toFixed(i)),w(this,E).call(this,Number(t.value),s,n,o,l),c(t.value);return}const U=a===","?".":a,D=/^[0-9]$/.test(U),B=U===".",j=t.value.includes(".");(i===0&&!D||i>0&&!(D||B)||B&&j)&&u.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<o&&(t.value=o.toFixed(i)),Number(t.value)>l&&l!==0?t.value=l.toFixed(i):t.value=Number(t.value).toFixed(i),w(this,E).call(this,Number(t.value),s,n,o,l)})})};class m{constructor(e={}){x(this,L);v(this,"selectors");v(this,"main");const r={main:"UIsw",label:"UIsw-label"};this.selectors={...r,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),S(this,L,M).call(this)}}L=new WeakSet,M=function(){this.main.forEach(e=>{const r=e.querySelector(`.${this.selectors.label}`),s=e.querySelector("input");r&&r.id&&e.setAttribute("aria-labelledby",r.id),s&&(s.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{s.checked=!s.checked,e.setAttribute("aria-checked",String(s.checked))}),e.addEventListener("keydown",t=>{t.key==="ArrowRight"?(s.checked=!0,n(String(s.checked)),t.preventDefault()):t.key==="ArrowLeft"&&(s.checked=!1,n(String(s.checked)),t.preventDefault())}));const n=t=>{e.setAttribute("aria-checked",String(t))}})};class k{constructor(e={},r=!1){v(this,"selectors");v(this,"main",null);v(this,"itemArrowInitialized",new WeakSet);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=r;const s={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,r){return Array.from(e).filter(s=>!r.some(n=>typeof n=="string"?s.classList.contains(n)||s.id===n:s===n))}filterSearch(e,r){const s=r.trim().toLowerCase();return e.filter(n=>{var o,l;const t=((o=n.dataset.value)==null?void 0:o.toLowerCase())||"",i=((l=n.textContent)==null?void 0:l.toLowerCase())||"";return t.includes(s)||i.includes(s)})}destroy(){k.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){var r;this.abortController=new AbortController;const e=this.abortController.signal;(r=this.main)==null||r.forEach(s=>{const n=s.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!n)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(A){return console.warn("Not found:",A.message)}const t=s.querySelector(`.${this.selectors.selected}`),i=s.querySelector(`.${this.selectors.arrow}`),o=s.querySelector(`.${this.selectors.optionsList}`),l=s.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(s,o)},{signal:e}),t.addEventListener("click",()=>{this.toggle(s,o)},{signal:e}),s.addEventListener("click",()=>{this.itemsPosition(o)},{signal:e});const c=o.querySelectorAll(`.${this.selectors.items} ul li`),b=this.filterExcluded(c,this.selectors.excludedItems),f=s.querySelector("[aria-selected='true']");f&&this.defaultSelect(s,f,t,n);var g=[];l&&l.addEventListener("input",A=>{const u=A.target.value.trim();t&&(g=this.filterSearch(b,u),u?(c.forEach(a=>a.remove()),g.forEach(a=>{var p;(p=o.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(a)})):c.forEach(a=>{var p;(p=o.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(a)}),this.itemArrow(s,o,t,n,e))},{signal:e}),this.itemArrow(s,o,t,n,e),this.items(s,o,b,t,n,e)},{signal:e})}itemArrow(e,r,s,n,t){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const o=s.textContent?s.textContent:"",l=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",c=>{l&&l.focus();const b=Array.from(r.querySelectorAll(`.${this.selectors.optionsList} ul li`)),f=this.filterExcluded(b,this.selectors.excludedItems),g=f.length;if(g!==0)if(c.key==="ArrowDown"){c.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,r),i=(i+1)%g,s.textContent=f[i].textContent,f.forEach(y=>y.removeAttribute("aria-selected")),f[i].setAttribute("aria-selected","true");const A=f[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",A),f[i].scrollIntoView({block:"nearest"})}else if(c.key==="ArrowUp"){c.preventDefault(),i=(i-1+g)%g,s.textContent=f[i].textContent,f.forEach(y=>y.removeAttribute("aria-selected")),f[i].setAttribute("aria-selected","true");const A=f[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",A),f[i].scrollIntoView({block:"nearest"})}else if(c.key==="Enter")if(c.preventDefault(),i>=0){s.textContent=f[i].textContent,f.forEach(y=>y.removeAttribute("aria-selected")),f[i].setAttribute("aria-selected","true");const A=f[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",A),n.value=String(f[i].dataset.value),this.costomEvent(e,n.value),this.close(e,r)}else this.toggle(e,r);else c.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(s.textContent=o),this.close(e,r))},{signal:t})}itemsPosition(e){const r=e.querySelector('[aria-selected="true"]');r&&r.scrollIntoView({block:"nearest"})}items(e,r,s,n,t,i){s.forEach((o,l)=>{o.addEventListener("click",()=>{const c=s[l];if(c){n.textContent=c.textContent,s.forEach(f=>f.removeAttribute("aria-selected")),c.setAttribute("aria-selected","true");const b=c.id||`${this.selectors.idPrefix}${l}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",b),t.value=String(s[l].dataset.value),this.costomEvent(e,t.value),this.close(e,r)}},{signal:i})})}defaultSelect(e,r,s,n){r&&(n.setAttribute("value",r.dataset.value??""),s.textContent=r.textContent??"",e.setAttribute("aria-activedescendant",r.id||""))}costomEvent(e,r){this.dbug&&console.log(`CostomEvent: { detail: ${r}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:r},bubbles:!0}))}toggle(e,r){k.closeAll(this.selectors),r.hidden?(r.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,r)}close(e,r){r.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(r=>{const s=r.querySelector(`.${e.optionsList}`);s.hidden=!0,r.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",r=>{const s=r.target;[...document.querySelectorAll(`.${e.main}`)].some(t=>t.contains(s))||k.closeAll(e)},{signal:this.abortController.signal})}}class G{constructor(e={}){x(this,$);v(this,"selectors");v(this,"groups");const r={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...r,...e},this.groups=document.querySelectorAll(`.${this.selectors.main}`),S(this,$,z).call(this)}}$=new WeakSet,z=function(){this.groups.forEach(e=>{const r=e.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener("click",()=>{r.forEach(i=>{i.setAttribute("aria-checked","false"),i.setAttribute("tabindex","-1")}),t.setAttribute("aria-checked","true"),t.setAttribute("tabindex","0"),t.focus()}),t.addEventListener("keydown",i=>{let o=Array.from(r).indexOf(t);if(i.key==="ArrowRight"&&o++,i.key==="ArrowLeft"&&o--,o<0&&(o=r.length-1),o>=r.length&&(o=0),i.key==="Enter"){const c=s[o];c&&!c.disabled&&(s.forEach(b=>{b.checked=!1,b.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),c.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:c.id,value:c.value},bubbles:!0}))),i.preventDefault();return}const l=r[o];l&&(r.forEach(c=>c.setAttribute("tabindex","-1")),l.setAttribute("tabindex","0"),l.focus())})});const s=e.querySelectorAll(`.${this.selectors.input}`);s.forEach((t,i)=>{const o=r[i];o&&(t.tabIndex=-1,o.setAttribute("role","radio"),o.setAttribute("aria-checked",String(t.checked)),o.setAttribute("tabindex",t.checked?"0":"-1"),t.disabled?o.setAttribute("aria-disabled","true"):o.removeAttribute("aria-disabled"),t.addEventListener("click",()=>{s.forEach(l=>{l.checked=!1,l.removeAttribute("checked")}),s[i].checked=!0,s[i].setAttribute("checked",""),t.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:t.id,value:t.value},bubbles:!0}))}),t.addEventListener("ui-button-group-change",l=>{console.log("detail:",l.detail)}))});const n=Array.from(s).find(t=>!t.checked&&!t.disabled);if(n){const t=e.querySelector(`label[for="${n.id}"]`);t&&t.setAttribute("tabindex","0")}})};class R{constructor(e={},r=!1){x(this,I);v(this,"selectors");v(this,"buttons",null);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=r;const s={main:"UIb"};this.selectors={...s,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),S(this,I,_).call(this)}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}costomEvent(e,r){if(!r||r==="undefined"||r.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${r}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:r},bubbles:!0}))}}I=new WeakSet,_=function(){var r;this.abortController=new AbortController;const e=this.abortController.signal;(r=this.buttons)==null||r.forEach(s=>{s.addEventListener("click",()=>{this.costomEvent(s,String(s.dataset.value))},{signal:e})})},d.Button=R,d.ButtonGroup=G,d.Select=k,d.SpinBox=h,d.Switch=m,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"author": "Andrii Popov",
|
|
3
3
|
"name": "@popovandrii/ui-elements",
|
|
4
4
|
"description": "UI elements. Color scheme. Elements with complex logic Java Script. SpinBox, Select+search, Switch, Button Group (radio)",
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.23",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"spinbox",
|