@smart-webcomponents-angular/kanban
Version:
[](https://jqwidgets.com/license/)
6 lines (4 loc) • 5.21 kB
JavaScript
/* Smart UI v24.0.16 (2025-09-03)
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},checked:{type:"boolean",value:!1}}}uncheckAll(){this.selectedValues=[]}checkAll(){const e=this;let t=[];for(let l=0;l<e.dataSource.length;l++){const a=e.dataSource[l].value||e.dataSource[l].label;t.push(a)}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 a=l.classList.contains("selected"),s={label:l.getAttribute("data-label"),value:l.getAttribute("value")},c=t.$.menu.children;for(let e=0;e<c.length;e++)c[e].classList.remove("active");if(a)t._selectedItems.push(s),t._setActiveDescendant(l),l.classList.add("active"),l.setAttribute("aria-selected",!0);else{const e=t._selectedItems.findIndex((e=>e.label===s.label&&e.value===s.value));e>-1&&t._selectedItems.splice(e,1),l.classList.remove("active"),l.setAttribute("aria-selected",!1)}l.setAttribute("aria-selected",a);const i=t._selectedItems,n=t.value,r=t.$.input.dataValue;let[u,o]=[[],[]];for(let e=0;e<i.length;e++){const t=i[e];u.push(t.label),o.push(t.value)}t.set("selectedValues",i.map((e=>e.value))),u=u.join(", "),t.set("value",u),t.$.input.dataValue=o=o.join(", "),u===n&&o===r||t.$.fireEvent("change",{value:o,label:u,oldValue:r,oldLabel:n})}_render(e){const t=this,l=e.map((function(e){let l=e,a=e;"object"==typeof e&&(l=e.label,a=e.value||l);const s=document.createElement("li"),c=document.createElement("a");return c.href="#",s.id=t.id+"Item"+Math.floor(65536*(1+Math.random())).toString(16).substring(1),s.setAttribute("data-label",l),s.setAttribute("value",a),s.setAttribute("role","option"),s.setAttribute("aria-selected",!1),s.setAttribute("aria-label",l),c.innerHTML=t.highlighter?t.highlighter(l):t._highlighter(l),c.setAttribute("aria-hidden",!0),e.color&&(s.classList.add("color"),s.style.setProperty("--smart-primary",e.color)),e.icon&&(c.classList.add("icon"),c.classList.add(e.icon)),s.appendChild(c),s}));t.$.menu.innerHTML="";let a=[],s=[],c=t._selectedItems;c||(c=t._selectedItems=[]);const i=c.length;c.length&&c.forEach((e=>{s.push(e.label),a.push(e.value)})),a=a.concat((t.$.input.dataValue||t.$.input.value).split(",").map((e=>e.trim()))),s=s.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"),o=i?a.indexOf(r):s.indexOf(u);o>-1&&s[o]===u&&(n.classList.add("selected"),n.setAttribute("aria-selected",!0),t._setActiveDescendant(n),c.findIndex((e=>e.label===u&&e.value===r))<0&&c.push({label:n.getAttribute("data-label"),value:n.getAttribute("value")})),t.$.menu.appendChild(n)}t.set("selectedValues",c.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 a=e.$.menu.children;for(let e=0;e<a.length;e++)a[e].classList.remove("active","focused");e._setActiveDescendant();let s=l.nextElementSibling;s||(s=e.$.menu.firstElementChild),s.classList.add("active","focused"),e._setActiveDescendant(s),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 a=e.$.menu.children;for(let e=0;e<a.length;e++)a[e].classList.remove("active","focused");e._setActiveDescendant();let s=l.previousElementSibling;s||(s=e.$.menu.lastElementChild),s.classList.add("active","focused"),e._setActiveDescendant(s),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(){const e=this;super._createElement(),e.checked&&("string"==typeof e.dataSource&&e.dataSource.startsWith("[")&&e.dataSource.endsWith("]")&&(e.dataSource=JSON.parse(e.dataSource).map((e=>"string"==typeof e?{label:e,value:e}:"object"==typeof e?{label:e.label||e.value,value:e.value||e.label}:{label:e,value:e}))),e.checkAll(),e.$.input.value=e.selectedValues.toString()),e.$.menu.setAttribute("aria-multiselectable",!0),e.$.scrollView.classList.add("smart-check-input-drop-down-menu"),e.opened&&setTimeout((()=>{e.open()}),100)}});