smart-webcomponents-react
Version:
[](https://jqwidgets.com/license/)
6 lines (4 loc) • 4.79 kB
JavaScript
/* Smart UI v23.0.8 (2025-05-13)
Copyright (c) 2011-2024 jQWidgets.
License: https://htmlelements.com/license/ */ //
Smart("smart-check-input",class extends Smart.MultiInput{static get properties(){return{inverted:{type:"boolean",value:!1}}}uncheckAll(){this.selectedValues=[]}checkAll(){const e=this;let t=[];for(let l=0;l<e.dataSource.length;l++){const s=e.dataSource[l].value||e.dataSource[l].label;t.push(s)}e.selectedValues=t}_performSelect(e){const t=this;if(!e)return void t.close();const l=e.target?e.target.closest("li"):e;if(!l)return;t._selectedItems||(t._selectedItems=[]),l.classList.toggle("selected");const s=l.classList.contains("selected"),a={label:l.getAttribute("data-label"),value:l.getAttribute("value")},i=t.$.menu.children;for(let e=0;e<i.length;e++)i[e].classList.remove("active");if(s)t._selectedItems.push(a),t._setActiveDescendant(l),l.classList.add("active"),l.setAttribute("aria-selected",!0);else{const e=t._selectedItems.findIndex((e=>e.label===a.label&&e.value===a.value));e>-1&&t._selectedItems.splice(e,1),l.classList.remove("active"),l.setAttribute("aria-selected",!1)}l.setAttribute("aria-selected",s);const c=t._selectedItems,n=t.value,r=t.$.input.dataValue;let[u,d]=[[],[]];for(let e=0;e<c.length;e++){const t=c[e];u.push(t.label),d.push(t.value)}t.set("selectedValues",c.map((e=>e.value))),u=u.join(", "),t.set("value",u),t.$.input.dataValue=d=d.join(", "),u===n&&d===r||t.$.fireEvent("change",{value:d,label:u,oldValue:r,oldLabel:n})}_render(e){const t=this,l=e.map((function(e){let l=e,s=e;"object"==typeof e&&(l=e.label,s=e.value||l);const a=document.createElement("li"),i=document.createElement("a");return i.href="#",a.id=t.id+"Item"+Math.floor(65536*(1+Math.random())).toString(16).substring(1),a.setAttribute("data-label",l),a.setAttribute("value",s),a.setAttribute("role","option"),a.setAttribute("aria-selected",!1),a.setAttribute("aria-label",l),i.innerHTML=t.highlighter?t.highlighter(l):t._highlighter(l),i.setAttribute("aria-hidden",!0),e.color&&(a.classList.add("color"),a.style.setProperty("--smart-primary",e.color)),e.icon&&(i.classList.add("icon"),i.classList.add(e.icon)),a.appendChild(i),a}));t.$.menu.innerHTML="";let s=[],a=[],i=t._selectedItems;i||(i=t._selectedItems=[]);const c=i.length;i.length&&i.forEach((e=>{a.push(e.label),s.push(e.value)})),s=s.concat((t.$.input.dataValue||t.$.input.value).split(",").map((e=>e.trim()))),a=a.concat(t.$.input.value.split(",").map((e=>e.trim())));for(let e=0;e<l.length;e++){const n=l[e],r=n.getAttribute("value"),u=n.getAttribute("data-label"),d=c?s.indexOf(r):a.indexOf(u);d>-1&&a[d]===u&&(n.classList.add("selected"),n.setAttribute("aria-selected",!0),t._setActiveDescendant(n),i.findIndex((e=>e.label===u&&e.value===r))<0&&i.push({label:n.getAttribute("data-label"),value:n.getAttribute("value")})),t.$.menu.appendChild(n)}t.set("selectedValues",i.map((e=>e.value)))}_next(){const e=this;let t=e._selectedItems?e._selectedItems[e._selectedItems.length-1]:void 0;t&&(t=e.$.menu.querySelector(`.active[data-label="${t.label}"][value="${t.value}"]`));const l=t||e.$.menu.querySelector(".active");if(!l){const t=e.$.menu.firstElementChild;return t.classList.add("active","focused"),void e._setActiveDescendant(t)}const s=e.$.menu.children;for(let e=0;e<s.length;e++)s[e].classList.remove("active","focused");e._setActiveDescendant();let a=l.nextElementSibling;a||(a=e.$.menu.firstElementChild),a.classList.add("active","focused"),e._setActiveDescendant(a),e.ensureVisible()}_prev(){const e=this;let t=e._selectedItems?e._selectedItems[e._selectedItems.length-1]:void 0;t&&(t=e.$.menu.querySelector(`.active[data-label="${t.label}"][value="${t.value}"]`));const l=t||e.$.menu.querySelector(".active");if(!l){const t=e.$.menu.firstElementChild;return t.classList.add("active","focused"),void e._setActiveDescendant(t)}const s=e.$.menu.children;for(let e=0;e<s.length;e++)s[e].classList.remove("active","focused");e._setActiveDescendant();let a=l.previousElementSibling;a||(a=e.$.menu.lastElementChild),a.classList.add("active","focused"),e._setActiveDescendant(a),e.ensureVisible()}_keyUpHandler(e){const t=this;if(!e.shiftKey)switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:40===e.keyCode&&e.altKey&&t.open(),38===e.keyCode&&e.altKey&&t.close();break;case 9:case 13:if(!t.opened)return;t._performSelect(t.$.menu.querySelector(".active")),e.stopPropagation(),e.preventDefault();break;case 27:if(!t.opened)return;t.close(),e.stopPropagation(),e.preventDefault();break;default:t._lookup(e),!t.opened||e.ctrlKey||e.shiftKey||(e.stopPropagation(),e.preventDefault()),t.readonly||(t.$.input.dataValue=t.$.input.value)}}_createElement(){super._createElement(),this.$.menu.setAttribute("aria-multiselectable",!0),this.$.scrollView.classList.add("smart-check-input-drop-down-menu")}});