smart.buttongroup.js

/* Smart UI v15.2.0 (2023-04-20) 
Copyright (c) 2011-2023 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart("smart-button-group",class extends Smart.ContentElement{static get properties(){return{dataSource:{type:"any",value:[],reflectToAttribute:!1},name:{value:"",type:"string"},selectionMode:{allowedValues:["none","one","zeroOrOne","zeroOrMany"],type:"string",value:"one"},selectedIndexes:{value:[],type:"array"},selectedValues:{value:[],type:"array"}}}static get styleUrls(){return["smart.buttongroup.css"]}template(){return"<div id='container' class='smart-container' role=\"presentation\">\n                    <div id=\"itemsContainer\" class=\"smart-button-group-items\" role=\"presentation\"></div>\n                    <input id='hiddenInput' type='hidden' name='[[name]]' value='[[value]]' class='smart-hidden-input'>\n                </div>"}static get listeners(){return{click:"_clickHandler",keydown:"_keyDownHandler",focus:"_focusHandler",blur:"_focusHandler"}}propertyChangedHandler(e,t,r){super.propertyChangedHandler(e,t,r);const s=this;switch(e){case"dataSource":s._handleDataSource();break;case"unfocusable":s._setFocusable();break;case"selectionMode":s._handleSelection();break;case"selectedValues":case"selectedIndexes":s._handleValue(e)}}render(){const e=this;e._handleDataSource(),e.setAttribute("role","group"),e._setFocusable(),e.enableShadowDOM&&e.$.hiddenInput&&e.appendChild(e.$.hiddenInput),super.render()}select(e){const t=this;if(null==e||"none"===t.selection)return;const r=t.$.itemsContainer.children;if("number"!=typeof e){e+="";for(let s=0;s<r.length;s++){const a=r[s];a.getAttribute("value")===e&&t._selectItem(a)}}else t._selectItem(r[e])}_clickHandler(e){const t=this,r=t.shadowRoot||t.isInShadowDOM?e.composedPath()[0]:e.target;e.stopPropagation(),t._selectItem(r)}_handleDataSource(){const e=this,t=e.$.itemsContainer,r=e.dataSource,s=e.selectedValues,a=e.selectedIndexes;let n="function"==typeof r?e.dataSource():r;if("string"==typeof n&&(n=JSON.parse(e.dataSource)),Array.isArray(n)||(n=Array.from(n)),t.innerHTML="",!n)return void e._updateValue();const i=document.createDocumentFragment();for(let t=0;t<n.length;t++){const r=n[t];let o,l=r,c=r;"object"==typeof r&&(l=r.label+""||"",c=r.value+""||l||"",o=r.disabled);const u=document.createElement("div");u.innerHTML=`<div>${l}</div>`,u.id=e.id+"Item"+Math.floor(65536*(1+Math.random())).toString(16).substring(1),u.classList.add("smart-button-group-item"),u.setAttribute("data-label",l),u.setAttribute("value",c),u.setAttribute("role","option"),u.setAttribute("aria-label",l),s.indexOf(c)>-1||a.indexOf("value")>-1?(u.setAttribute("active",""),u.setAttribute("aria-selected",!0)):u.setAttribute("aria-selected",!1),o&&u.setAttribute("disabled",""),i.appendChild(u)}t.appendChild(i),e._handleSelection()}_handleSelection(){const e=this,t=e.$.itemsContainer,r=Array.from(t.children);if(!r.length)return;const s=e.selectionMode;switch(t.setAttribute("aria-multiselectable",!1),s){case"none":r.forEach((e=>{e.removeAttribute("active"),e.removeAttribute("focus"),e.setAttribute("aria-selected",!1)}));break;case"one":case"zeroOrOne":{const e=r.filter((e=>e.hasAttribute("active"))),t=r[0];"one"===s&&!e.length&&t&&(t.setAttribute("active",""),t.setAttribute("aria-selected",!0));for(let t=0;t<e.length;t++){const r=e[t];0!==t&&(r.removeAttribute("active"),r.removeAttribute("focus"),r.setAttribute("aria-selected",!1))}break}case"zeroOrMany":t.setAttribute("aria-multiselectable",!0)}e._updateValue()}_handleValue(e){const t=this,r=t.$.itemsContainer.children,s=t.selectionMode;let a=t.selectedValues,n=t.selectedIndexes;"selectedValues"===e?n=[]:"selectedIndexes"===e&&(a=[]);for(let e=0;e<r.length;e++){const t=r[e];"none"!==s&&(a.indexOf(t.getAttribute("value"))>-1||n.indexOf(e)>-1)?(t.setAttribute("active",""),t.setAttribute("focus",""),t.setAttribute("aria-selected",!0)):(t.removeAttribute("active"),t.removeAttribute("focus"),t.setAttribute("aria-selected",!1))}t._handleSelection()}_keyDownHandler(e){const t=this;if(t.readonly)return;const r=t.$.itemsContainer.children;let s,a;for(let e=0;e<r.length;e++){const t=r[e];t.hasAttribute("focus")&&(s=t),t.hasAttribute("active")&&(a=t)}switch(s=s||a||r[0],e.key){case"ArrowLeft":case"ArrowRight":e.preventDefault(),s="ArrowLeft"===e.key?s.previousElementSibling:s.nextElementSibling;break;case"Enter":case" ":return e.preventDefault(),void t._selectItem(s);case"Home":case"End":e.preventDefault(),s="Home"===e.key?r[0]:r[r.length-1]}if(s)for(let e=0;e<r.length;e++)r[e]===s?s.setAttribute("focus",""):r[e].removeAttribute("focus")}_focusHandler(e){const t=this.$.itemsContainer;if("focus"!==e.type||this.readonly){const e=t.children;for(let t=0;t<e.length;t++)e[t].removeAttribute("focus")}else{const e=t.querySelector(".smart-button-group-item[active]")||t.children[0];e&&e.setAttribute("focus","")}}_setFocusable(){const e=this;if(e.disabled||e.unfocusable)return e.removeAttribute("tabindex"),void(e.tabIndex=-1);e.tabIndex=e.tabIndex>0?e.tabIndex:0}_selectItem(e){if(!e||!e.closest)return;const t=this,r=t.selectionMode;if(!(e=e.closest(".smart-button-group-item"))||"none"===r)return;const s=t.$.itemsContainer.children;if("one"!==r||!e.hasAttribute("active")){if(r.toLowerCase().indexOf("one")>-1){"zeroOrOne"===r&&e.hasAttribute("active")&&(e=void 0);for(let e=0;e<s.length;e++){const t=s[e];t.removeAttribute("active"),t.removeAttribute("focus"),t.setAttribute("aria-selected",!1)}}for(let t=0;t<s.length;t++){const r=s[t];r===e?(e.hasAttribute("active")?(e.removeAttribute("active"),e.setAttribute("aria-selected",!1)):(e.setAttribute("active",""),e.setAttribute("aria-selected",!0)),e.setAttribute("focus","")):r.removeAttribute("focus")}t._updateValue()}}_updateValue(){const e=this,t=Array.from(e.$.itemsContainer.children),r=t.filter((e=>e.hasAttribute("active"))),s=r.map((e=>e.getAttribute("value"))),a=e.selectedValues;if(a.length!==s.length||a.some((e=>s.indexOf(e)<0))){const n=r.map((e=>t.indexOf(e))),i=e.selectedIndexes;e.set("selectedValues",s),e.set("selectedIndexes",n),e.$.fireEvent("change",{oldValue:a,oldIndexes:i,values:s,indexes:n})}}});