UNPKG

smart-webcomponents-react

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-00JS8f7.svg)](https://jqwidgets.com/license/)

www.htmlelements.com

6 lines (4 loc) • 31.3 kB
1
2
3
4
5
6
/* Smart UI v23.0.8 (2025-05-13) Copyright (c) 2011-2024 jQWidgets. License: https://htmlelements.com/license/ */ // Smart("smart-multi-combo-input",class extends Smart.CheckInput{static get properties(){return{allowItemsAdd:{value:!1,type:"boolean"},allowItemsRemove:{value:!1,type:"boolean"},autoAddNewTags:{value:!0,type:"boolean"},colorItems:{value:!0,type:"boolean"},inputTagsMode:{allowedValues:["one","many"],value:"many",type:"string"},hideInputTagsCloseButton:{value:!1,type:"boolean"},messages:{value:{en:{newItem:"Find...",tagLabelOne:"{{value}} item selected",tagLabel:"{{value}} items selected",selectAll:"Select All",unselectAll:"Unselect All"}},type:"object",extend:!0},pills:{value:!1,type:"boolean"},dots:{value:!1,type:"boolean"},singleSelect:{value:!1,type:"boolean"},selectAll:{value:!1,type:"boolean"}}}template(){return'<div id="inputContainer" role="presentation"><div id="optionsContainer" inner-h-t-m-l=\'{{innerHTML}}\' class="smart-hidden"></div><div class="smart-action-button" role="presentation" id="actionButton"> <input class="smart-input" id=\'input\' readonly=\'[[readonly]]\' placeholder=\'[[placeholder]]\' type=\'[[type]]\' name=\'[[name]]\' disabled=\'[[disabled]]\' aria-label="[[placeholder]]" /></div><span class="smart-hidden smart-hint" id="span">[[hint]]</span><div id="dropDownButton" tabindex=-1 class="smart-drop-down-button" role="button" aria-label="Toggle popup"><div id="arrow" class="arrow" aria-hidden="true"></div></div></div>'}_downHandler(e){const t=this,o=e.originalEvent.target;t.readonly&&o&&o.classList&&!o.classList.contains("smart-drop-down-list-unselect-button")?t._dropDownButtonDownHandler(e):t._tokenCloseButtonClick!==o.closest(".smart-drop-down-list-unselect-button")&&(t._tokenCloseButtonClick=o.closest(".smart-drop-down-list-unselect-button"),t.readonly&&!t._tokenCloseButtonClick&&t._dropDownButtonDownHandler(e))}focus(){const e=this;e.readonly?HTMLElement.prototype.focus.apply(e,[]):e.$.input.focus()}_setFocusable(){const e=this;if(e.readonly){if(e.disabled||e.unfocusable)return void e.removeAttribute("tabindex");e.tabIndex=e.tabIndex>0?e.tabIndex:0,e.$.listen("keydown",e._keyDownHandler),e.$.listen("keyup",e._keyUpHandler)}}_documentUpHandler(e){const t=this,o=t.shadowRoot||t.isInShadowDOM?e.originalEvent.composedPath()[0]:e.originalEvent.target;if(o!==t&&o!==t.$.dropDownButton&&o!==t.$.input&&o!==t.$.arrow){if(t._tokenCloseButtonClick&&t._tokenCloseButtonClick===o.closest(".smart-drop-down-list-unselect-button")){const e=o.closest(".smart-token"),[l,n]=[e.getAttribute("data-label"),e.getAttribute("value")];let s,a,i=t._selectedItems.findIndex((e=>l===e.label&&n===e.value)),[r,d]=[t.value,t.$.input.dataValue];return-1===i&&l===n&&(i=t._selectedItems.findIndex((e=>l===e))),i>-1&&t._selectedItems.splice(i,1),t.set("value",a=t._selectedItems.map((e=>e.label)).join(t.separator)),t.$.input.dataValue=s=t._selectedItems.map((e=>e.value)).join(t.separator),t._updateValue(),t.$.actionButton.contains(e)&&t.$.actionButton.removeChild(e),t.close(),void(a===r&&s===d||(t.$.fireEvent("change",{value:s,label:a,oldValue:d,oldLabel:r}),t._updateTargetValue()))}if(!t.contains(o))if(t.$.dropDownContainer.contains(o.shadowParent||o)){if(t._isPointerDown){if(t._isPointerDown=!1,t.opened&&(t._preventLookup=!0),o.hasAttribute("add-new"))return;t.focus()}}else t.opened&&(t._preventLookup=!0),t._isPointerDown||t.close(),t._isPointerDown=!1}else t._isPointerDown=!1}get selectedItems(){return this._selectedItems?this._selectedItems:[]}set selectedItems(e){this._selectedItems=e,this._updateValue()}_performSelect(e,t){const o=this;if(!e)return void o.close();const l=e.target?e.target.closest("li"):e;if(!l)return;o._selectedItems||(o._selectedItems=[]),l.classList.toggle("selected"),o.singleSelect&&(o._selectedItems=[],l.classList.add("selected"));const n=l.classList.contains("selected"),s={label:l.getAttribute("data-label"),value:l.getAttribute("value"),color:l.getAttribute("color"),image:l.getAttribute("image")},a=o.$.menu.children;for(let e=0;e<a.length;e++)o.singleSelect&&a[e]!==l&&a[e].classList.remove("selected"),a[e].classList.remove("active"),a[e].setAttribute("aria-selected",!1);if(n){if(o.dataSource&&o.dataSource[0]&&"string"==typeof o.dataSource[0])o._selectedItems.push(s);else{const e=o.dataSource.findIndex((e=>e.label===s.label&&""+e.value===s.value));o.dataSource&&e>=0?o._selectedItems.push(o.dataSource[e]):o._selectedItems.push(s)}if(e.noActiveState||(o._setActiveDescendant(l),l.classList.add("active")),o.dataSource)if(o.dataSource[0]&&"string"==typeof o.dataSource[0]){const e=o.dataSource.findIndex((e=>e===s.label));o.set("selectedIndex",e)}else{const e=o.dataSource.findIndex((e=>e.label===s.label&&""+e.value===s.value));o.set("selectedIndex",e)}}else{if(o.dataSource&&o.dataSource[0]&&"string"==typeof o.dataSource[0]){const e=o.dataSource.findIndex((e=>e===s.label));if(e>-1){const e=o._selectedItems.findIndex((e=>e===s.label));o._selectedItems.splice(e,1),o.set("selectedIndex",-1)}else o.set("selectedIndex",e)}else{const e=o.dataSource.findIndex((e=>e.label===s.label&&""+e.value===s.value));if(o.dataSource)if(e>-1){const e=o._selectedItems.findIndex((e=>e.label===s.label&&""+e.value===s.value));o._selectedItems.splice(e,1),o.set("selectedIndex",-1)}else o.set("selectedIndex",e)}l.classList.remove("active")}l.setAttribute("aria-selected",n),o._updateValue(t),o.singleSelect&&o.close()}_updateValue(e){const t=this;if(!t.isInitialized)return;let o=t._selectedItems,l=t.value,n=t.$.input.dataValue,[s,a]=[[],[]];o||(o=[]);for(let e=0;e<o.length;e++){const t=o[e];t?"string"==typeof t?(s.push(t),a.push(t)):(s.push(t.label),a.push(t.value)):(s.push(""),a.push(""))}t._createTags();let i=[];for(let e=0;e<o.length;e++){const t=o[e];"string"==typeof t?i.push(t):void 0!==t.value&&i.push(t.value)}if(t.set("selectedValues",i),s=s.join(t.separator),t.set("value",s),t.$.input.dataValue=a=a.join(t.separator),t.$.input.value="",t.setAttribute("value",t.value),e||s===l&&a===n||(t.$.fireEvent("change",{value:a,label:s,oldValue:n,oldLabel:l}),t._updateTargetValue()),t.selectAll&&t._setSelectAllItemState(),!t.opened)return;const r=t.getBoundingClientRect(),d=window.scrollX,c=window.scrollY;t.$.dropDownContainer.style.left=-3+r.left+d+"px",t.$.dropDownContainer.style.top=r.bottom+c+1+"px",t._reposition()}_setSelection(){const e=this;super._setSelection(),e.singleSelect&&(e._selectedItems.length>0&&(e._selectedItems=[e._selectedItems[e._selectedItems.length-1]]),e.selectedValues.length>0&&(e.selectedValues=[e.selectedValues[e.selectedValues.length-1]])),this._createTags()}_createTags(){const e=this,t=e._selectedItems||[];let o,l=document.createDocumentFragment();const n=document.createElement("div");n.classList.add("smart-flex-wrap"),n.classList.add("smart-tokens-container"),l.appendChild(n);const s=e.$.actionButton.querySelector(".smart-tokens-container");if(s&&s.remove(),0===t.length&&"one"===e.inputTagsMode&&e.readonly){const l="one"===e.inputTagsMode?t.length>1?e.localize("tagLabel",{value:t.length,count:e.dataSource.length}):e.localize("tagLabelOne",{value:t.length,count:e.dataSource.length}):"";o=document.createElement("span"),o.classList.add("smart-token");const s=e.dots?" dots":"";o.innerHTML="<span class='smart-drop-down-list-selection-label "+s+'\' role="presentation">'+l+"</span>",n.appendChild(o)}for(let l=0;l<t.length;l++){const s=t[l];if("one"===e.inputTagsMode&&!o||"many"===e.inputTagsMode){let l="one"===e.inputTagsMode?t.length>1?e.localize("tagLabel",{value:t.length,count:e.dataSource.length}):e.localize("tagLabelOne",{value:t.length,count:e.dataSource.length}):"string"==typeof s?s:s.label;"many"===e.inputTagsMode&&void 0===l&&(l=""),o=document.createElement("span"),o.classList.add("smart-token");let a=null,i="";s.image&&"many"===e.inputTagsMode&&(a=document.createElement("span"),a.style.backgroundImage=`url('${s.image}')`,a.className="smart-drop-down-list-selection-image",i=a.outerHTML);const r=e.dots?" dots":"";if(o.innerHTML=i+"<span class='smart-drop-down-list-selection-label"+r+'\' role="presentation">'+l+"</span>",e.singleSelect||"one"===e.inputTagsMode||e.hideInputTagsCloseButton||(o.innerHTML+='<span class=\'smart-drop-down-list-unselect-button\' role="button" aria-label="Unselect"></span>'),"many"===e.inputTagsMode){s.label?(o.setAttribute("data-label",s.label),o.setAttribute("value",s.value)):"string"==typeof s&&s.length>0?(o.setAttribute("data-label",s),o.setAttribute("value",s)):(o.setAttribute("data-label",""),o.setAttribute("value","")),o.setAttribute("separator",e.separator);const t=s.color;if(t&&e.colorItems){o.setAttribute("color",t),o.style.setProperty("--smart-primary",t);const e=new Smart.Color(t).getInvertedColor();o.style.setProperty("--smart-primary-color",e)}}if(""===l&&e.singleSelect)continue;n.appendChild(o)}}e.$.actionButton.insertBefore(l,e.$.input);const a=e.getBoundingClientRect(),i=window.scrollX,r=window.scrollY;e.$.scrollView.style.left=-3+a.left+i+"px",e.$.scrollView.style.top=a.bottom+r+1+"px"}_render(e){const t=this,o=(e,o)=>{let l=e,n=e,s=e,a=null;"object"==typeof e&&(l=e.label,n=void 0!==e.value?e.value:l,a=void 0!==e.color?e.color:"",s=void 0!==e.id?e.id:o);const i=document.createElement("li"),r=document.createElement("a");if(r.href="javascript:void(0)",i.id=t.id+"Item"+Math.floor(65536*(1+Math.random())).toString(16).substring(1),i.setAttribute("data-label",l),i.setAttribute("value",n),i.setAttribute("role","option"),i.setAttribute("aria-selected",!1),i.setAttribute("aria-label",l),void 0!==s&&(i.id=s),a&&t.colorItems){i.setAttribute("color",a),i.style.setProperty("--smart-primary",a);const e=new Smart.Color(a).getInvertedColor();i.style.setProperty("--smart-primary-color",e)}if(r.innerHTML=t.highlighter?t.highlighter(l):t._highlighter(l),l||r.classList.add("smart-visibility-hidden"),r.setAttribute("aria-hidden",!0),e.icon&&(r.classList.add("icon"),r.classList.add(e.icon)),e.image){const t=document.createElement("span");t.style.backgroundImage=`url('${e.image}')`,t.className="smart-drop-down-list-selection-image",i.setAttribute("image",e.image),r.innerHTML=t.outerHTML+r.innerHTML}if(i.appendChild(r),t.allowItemsRemove){const o=document.createElement("span");o.classList.add("close-button"),e.image||(r.innerHTML="<span data-content>"+r.innerHTML+"</span>"),r.appendChild(o),o.onpointerdown=o=>{o.preventDefault(),o.stopPropagation();const s=t.dataSource.findIndex((t=>t.value===e.value));if(s>=0){if(t.dataSource.splice(s,1),i.remove(),t.$.scrollView.refresh&&t.$.scrollView.refresh(),"one"===t.inputTagsMode){const e=t._selectedItems.findIndex((e=>e.label===l&&e.value===n));e>=0&&t._selectedItems.splice(e,1),t._createTags()}t.$.fireEvent("remove",{index:s,label:e.label,value:e.value})}}}return(t.singleSelect&&""===e||t.singleSelect&&e&&""===e.label)&&(i.innerHTML=""),i},l=e.map((function(e,t){return o(e,t)}));delete t._customItem,t.$.menu.innerHTML="",0===l.length&&t.dropDownPlaceholder&&(t.$.menu.innerHTML='<div class="smart-flex smart-truncate smart-quiet" style="padding:10px; align-items: center;">'+t.dropDownPlaceholder+"</div>"),t._selectedItems||(t._selectedItems=[]);let n=t._selectedItems.map((e=>"string"==typeof e?e:e.value));n.length||(n=(t.$.input.dataValue||t.$.input.value).split(t.separator).map((e=>e.trim())));let s=Array.from(t.$.actionButton.getElementsByClassName("smart-token")).map((e=>e.textContent.trim()));if(t.allowItemsAdd){const e=document.createElement("div"),n=document.createElement("smart-button"),s=document.createElement("input");e.classList.add("add-new-item"),n.setAttribute("add-new",""),s.setAttribute("add-new",""),s.placeholder=t.localize("newItem"),s.classList.add("smart-input"),n.classList.add("smart-hidden");const a=()=>{const e=["#D50000","#F4511E","#F6BF26","#0B8043","#33B679","#3F51B5","#039BE5","#7986CB","#8C47FF","#8E24AA","#FF36C2","#949494","#FF9EB7","#FFCFC9","#FFD66D","#FFEBB6","#93DF89","#D1F7C4","#9DC7FF","#D0F0FD","#CDAFFF","#ECE1FD","#FA9DE2","#FFDAF6","#CBCBCB","#EDEDED","#000000"];return{label:s.value,value:s.value.trim().replace(/ /gi,""),color:e[Math.floor(Math.random()*e.length)]}},i=e=>{e.preventDefault(),e.stopPropagation(),t.dataSource||(t.dataSource=[]);const o=t.$.menu.querySelector(".active");if(!o&&t._customItem&&t._customItem.item||o&&!o.offsetHeight&&t._customItem&&t._customItem.item||o&&o.classList.contains("smart-custom-item")){const e=t._customItem.item;t.dataSource.push(e),t.$.scrollView.refresh&&t.$.scrollView.refresh(),t._selectedItems=[],t._selectedItems.push(e),t._updateValue(!0),t.$.fireEvent("add",{label:e.label,value:e.value,index:t.dataSource.length-1}),s.value="",t.close()}else o&&o.offsetHeight&&t._keyUpHandler(e)},r=()=>{const e=s.value.toLowerCase();t._visibleItems=[];let n=null,r=0;for(let o=0;o<l.length;o++){const s=l[o];s.getAttribute("data-label").trim().toLowerCase().indexOf(e)>=0?(s.classList.remove("smart-hidden"),t._visibleItems.push(s.getAttribute("data-value")),n=s):(s.classList.add("smart-hidden"),r++),s.classList.remove("focused"),s.classList.remove("active")}if(e.length&&r===l.length){if(t._customItem){let o=e;if(14*o.length*.52>t.$.menu.offsetWidth-40){let e=parseInt((t.$.menu.offsetWidth-40)/7.28);o.length>e&&(o=o.substring(0,e)+"...")}t._customItem.classList.remove("smart-hidden"),t._customItem.classList.add("smart-custom-item"),t._customItem.firstElementChild.textContent=o,t._customItem.item.label=t._customItem.item.value=e}else{const e=a(),l=o(e,t.dataSource.length-1);t.$.menu.appendChild(l),l.classList.add("smart-custom-item"),t._customItem=l,l.item=e,l.onpointerdown=e=>{i(e)}}n&&(n.classList.add("focused"),n.classList.add("active")),t.$.scrollView.refresh&&t.$.scrollView.refresh()}t.$.scrollView.refresh&&t.$.scrollView.refresh()};s.oninput=()=>{r()},n.onclick=()=>{if(!s.value)return;t.dataSource||(t.dataSource=[]);const e=a();t.dataSource.push(e);const l=o(e,t.dataSource.length-1);t.$.menu.appendChild(l),t.$.scrollView.refresh&&t.$.scrollView.refresh(),s.value="","one"===t.inputTagsMode&&t._createTags(),t.$.fireEvent("add",{label:e.label,value:e.value,index:t.dataSource.length-1})},s.onkeydown=e=>{"Enter"===e.key&&i(e),"Escape"===e.key&&t.close(),"ArrowUp"!==e.key&&"ArrowDown"!==e.key||(t._keyDownHandler(e),e.preventDefault(),e.stopPropagation())},e.appendChild(s),e.appendChild(n),t.$.menu.appendChild(e),t.$.menu.setAttribute("allow-add-new","")}for(let e=0;e<l.length;e++){const o=l[e],a=o.getAttribute("value"),i=o.getAttribute("data-label").trim(),r=n.findIndex((e=>""+e==""+a));r>-1&&("one"===t.inputTagsMode||s[r]&&"string"==typeof s[r]&&s[r].trim()===i)&&(o.classList.add("selected"),o.setAttribute("aria-selected",!0),t._setActiveDescendant(o),t._selectedItems.findIndex((e=>"string"==typeof e?e===i:e.label===i&&e.value===a))<0&&t._selectedItems.findIndex((e=>"string"==typeof e?e===a:""+e.value==""+a))<0&&t._selectedItems.push({label:o.getAttribute("data-label"),value:o.getAttribute("value")})),t._setSelectAllItemState(),t.$.menu.appendChild(o)}}_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 o=t||e.$.menu.querySelector(".active");if(!o){let t=e.$.menu.firstElementChild;for(;t&&(!t.offsetHeight||t.classList.contains("add-new-item"));)t=t.nextElementSibling;return t.classList.add("active","focused"),void e._setActiveDescendant(t)}const l=e.$.menu.children;for(let e=0;e<l.length;e++)l[e].classList.remove("active","focused");e._setActiveDescendant();let n=o.nextElementSibling;for(;n&&(!n.offsetHeight||n.classList.contains("add-new-item"));)n=n.nextElementSibling;if(!n)for(n=e.$.menu.firstElementChild;n&&(!n.offsetHeight||n.classList.contains("add-new-item"));)n=n.nextElementSibling;n.classList.add("active","focused"),e._setActiveDescendant(n),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 o=t||e.$.menu.querySelector(".active");if(!o){let t=e.$.menu.firstElementChild;for(;t&&(!t.offsetHeight||t.classList.contains("add-new-item"));)t=t.nextElementSibling;return t.classList.add("active","focused"),void e._setActiveDescendant(t)}const l=e.$.menu.children;for(let e=0;e<l.length;e++)l[e].classList.remove("active","focused");e._setActiveDescendant();let n=o.previousElementSibling;for(;n&&(!n.offsetHeight||n.classList.contains("add-new-item"));)n=n.previousElementSibling;n||(n=e.$.menu.lastElementChild),n.classList.add("active","focused"),e._setActiveDescendant(n),e.ensureVisible()}_keyDownHandler(e){const t=this;if(t._suppressKeyPressRepeat=![40,38,9,13,27,16,17,18].includes(e.keyCode),e.shiftKey||e.altKey||e.ctrlKey)delete t._inputValue;else{if(t.opened&&"Escape"===e.key)return t.close(),e.stopPropagation(),void e.preventDefault();t._move(e),t._inputValue=t.$.input.value}}_keyUpHandler(e){const t=this;let o=t.$.input.value;if(t._selectedItems&&(o=t._selectedItems.map((e=>"string"==typeof e?e:e.label)),t.$.input.value&&o.push(t.$.input.value),o=o.join(t.separator)),t.set("value",o),!e.shiftKey&&"F2"!==e.key)if(","!==e.key){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 8:{if(t.readonly)break;if(t.opened&&t.close(),t._inputValue&&t._inputValue.length)break;if(!t._selectedItems){t.readonly||(t.$.input.dataValue=t.$.input.value);break}const e=t._selectedItems[t._selectedItems.length-1];if(!e)break;(t.$.menu.querySelector(`li[data-label="${e.label}"][value="${e.value}"]`)||0===t.$.menu.offsetHeight)&&(t._selectedItems.pop(),t._updateValue());break}case 9:case 13:if(!t.opened)return void(t.autoAddNewTags&&13===e.keyCode&&"many"===t.inputTagsMode&&t._autoCreateTags());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())}delete t._inputValue}else t._autoCreateTags()}_blurHandler(){super._blurHandler(),this._autoCreateTags()}_autoCreateTags(){const e=this;if(!e.autoAddNewTags||"many"===!e.inputTagsMode)return;e.dataSource||(e.dataSource=[]);const t=e.$.input.value.trim();if(!e.dataSource.find((e=>"string"==typeof e?e===t:e.label===t))){e._tempItems||(e._tempItems=[]);let o=t.trim();if(t.indexOf(",")>=0){o=t.split(",");for(let t=0;t<o.length;t++){const l=o[t].trim();""!==l&&(e._tempItems.push(l),e._createTagsFromValue(l))}}else""!==o&&(e._tempItems.push(o),e._createTagsFromValue(o));e.query="",e._updateValue(!0)}}propertyChangedHandler(e,t,o){const l=this;if("disabled"===e&&l._setFocusable(),"value"===e){l.displayMember!==l.valueMember&&"string"!=typeof o?(l.value=o[l.displayMember],l.$.input.dataValue=o[l.valueMember]):l.$.input.dataValue="";const e=l.$.menu.children;for(let t=0;t<e.length;t++)e[t].classList.remove("selected"),e[t].setAttribute("aria-selected",!1);l._setActiveDescendant(l.$.menu.querySelector("active")),l._createTagsFromValue(o)}else if("separator"===e){const e=l.$.actionButton.children;for(let t=0;t<e.length;t++){const l=e[t];l.classList.contains("smart-token")&&l.setAttribute("separator",o)}}else if("inputTagsMode"===e)l._createTags();else if("theme"===e||"rightToLeft"===e)l.$.scrollView[e]=o,o?l.$.dropDownContainer.setAttribute(Smart.Utilities.Core.toDash(e),""):l.$.dropDownContainer.removeAttribute(Smart.Utilities.Core.toDash(e));else if("inverted"===e)o?l.$.dropDownContainer.setAttribute("inverted",""):l.$.dropDownContainer.removeAttribute("inverted");else if("selectAll"===e)l._handleSelectAllItem();else if("selectedIndex"===e){if(super.propertyChangedHandler(e,t,o),l._selectedItems=[],l.dataSource){const e=l.dataSource[o];e&&l._selectedItems.push(e),l._updateValue(!0)}}else if("selectedValues"===e){if(super.propertyChangedHandler(e,t,o),l.dataSource){l._selectedItems=[];const e=l.dataSource.filter((e=>{if("string"==typeof e){if(l.selectedValues.indexOf(e)>=0)return!0}else if(l.selectedValues.indexOf(e.value)>=0)return!0}));l._selectedItems=e,l._updateValue(!0)}}else super.propertyChangedHandler(e,t,o)}_createElement(){const e=this,t=document.createElement("ul"),o=document.createElement("smart-scroll-viewer"),l=document.createElement("div");if(o.rightToLeft=e.rightToLeft,o.theme=e.theme,o.horizontalScrollBarVisibility="hidden",o.classList.add("smart-multi-combo-input-scroll-viewer"),e.rightToLeft&&l.setAttribute("right-to-left",""),e.dataSource&&"string"==typeof e.dataSource&&(e.dataSource=e.$.deserialize(e.dataSource,"array")),l.setAttribute("theme",e.theme),l.classList.add("smart-multi-combo-input-drop-down-menu","smart-input-drop-down-menu","smart-check-input-drop-down-menu"),e.pills&&l.setAttribute("pills",""),e.dots&&l.setAttribute("dots",""),e.singleSelect&&l.setAttribute("single-select",""),e.inverted?l.setAttribute("inverted",""):l.removeAttribute("inverted"),e.classList.add("smart-input"),l.appendChild(o),t.setAttribute("aria-multiselectable",!0),e.$.scrollView=o,e.$.menu=t,e.$.dropDownContainer=l,e.$.menu.onpointerdown=function(t){const o=t.target.closest("li");t.target&&t.target.hasAttribute("add-new")||(t.stopPropagation(),t.preventDefault(),e._performSelect(t),o&&e.$.fireEvent("itemClick",{index:[...o.parentNode.children].indexOf(o),item:o,label:o.getAttribute("aria-label"),value:o.dataValue}),e.focus())},e.classList.add("smart-input"),e.$.input.value="",e.selectedValues&&e.selectedValues.length>0){const t=e.dataSource.filter((t=>{if("string"==typeof t){if(e.selectedValues.indexOf(t)>=0)return!0}else if(e.selectedValues.indexOf(t.value)>=0)return!0}));e.selectedItems=t}else{const t=e.value;t&&e._createTagsFromValue(t)}e.readonly?e.$.input.classList.add("smart-hidden"):e.$.input.classList.remove("smart-hidden"),e._handleSelectAllItem(),e._setFocusable()}_createTagsFromValue(e=""){const t=this;if(e){const e=t.value.split(",");for(t.$.input.value="",t._selectedItems=[];"SPAN"===t.$.actionButton.firstElementChild.nodeName;)t.$.actionButton.removeChild(t.$.actionButton.firstElementChild);for(let o=0,l=e.length;o<l;o+=1){const l=e[o].trim();if(l)if(t.dataSource){const e=t.dataSource.find((e=>{if("string"==typeof e){if(e===l)return e}else if(""+e.value===l)return e}));e&&e.label?e.color?t._selectedItems.push({color:e.color,label:e.label,value:e.value}):t._selectedItems.push({label:e.label,value:e.value}):t._selectedItems.push({label:l,value:l})}else t._selectedItems.push({label:l,value:l})}t._createTags()}else t.$.input.value="",t._selectedItems=[],t._createTags()}_handleSelectAllItem(){const e=this;if(e.selectAll){if(!e.$.selectAll){const t=document.createElement("ul"),o=document.createElement("li"),l=document.createElement("a");l.href="#",l.innerHTML=e.localize("selectAll"),l.setAttribute("aria-hidden",!0),o.id=e.id+"Item"+Math.floor(65536*(1+Math.random())).toString(16).substring(1),o.setAttribute("role","option"),o.setAttribute("value",e.localize("selectAll")),o.setAttribute("aria-label",e.localize("selectAll")),o.classList.add("smart-select-all"),o.appendChild(l),o.onclick=function(t){t.stopPropagation(),t.preventDefault(),Array.from(e.$.menu.children).find((e=>!e.classList.contains("selected")))?e._selectAll():e._clearSelection(),e._setSelectAllItemState(),o.classList.contains("selected")&&o.classList.add("active"),e.focus()},t.appendChild(o),e.$.selectAll=t}e._setSelectAllItemState(),e.$.dropDownContainer.insertBefore(e.$.selectAll,e.$.scrollView)}else e.$.selectAll&&e.$.selectAll.remove()}_setSelectAllItemState(){const e=this;if(!e.$.selectAll)return;const t=e.$.selectAll.firstElementChild,o=t.firstElementChild,l=!Array.from(e.$.menu.children).find((e=>!e.classList.contains("selected")));t.removeAttribute("indeterminate"),t.classList.remove("selected","active"),o.innerHTML=e.localize("selectAll"),e._selectedItems&&e._selectedItems.length>0&&(l?(t.classList.add("selected"),o.innerHTML=e.localize("unselectAll")):t.setAttribute("indeterminate",""))}_selectAll(){const e=this,t=e._selectedItems.length,o=e.$.input.dataValue,l=e.value;e._clearSelection(!0);const n=e.$.menu.children;for(let t=0;t<n.length;t++)n[t].classList.contains("selected")||e._performSelect({target:n[t],noActiveState:!0},!0);t!==e._selectedItems.length&&(e.$.fireEvent("change",{value:e.$.input.dataValue,label:e.value,oldValue:o,oldLabel:l}),e._updateTargetValue())}_clearSelection(e){const t=this;if(!t._selectedItems.length)return;const o=t.$.input.dataValue,l=t.value;for(t.$.input.dataValue="",t.value=t.$.input.value,t._selectedItems=[];"SPAN"===t.$.actionButton.firstElementChild.nodeName;)t.$.actionButton.removeChild(t.$.actionButton.firstElementChild);const n=t.$.menu.children;for(let e=0;e<n.length;e++)n[e].classList.remove("selected"),n[e].classList.remove("active"),n[e].setAttribute("aria-selected",!1);t._setActiveDescendant(t.$.menu.querySelector("active")),e||(t.$.fireEvent("change",{value:"",label:"",oldValue:o,oldLabel:l}),t._updateTargetValue());const s=t.getBoundingClientRect(),a=window.scrollX,i=window.scrollY;t.$.dropDownContainer.style.left=-3+s.left+a+"px",t.$.dropDownContainer.style.top=s.bottom+i+1+"px",t._reposition()}_reposition(){const e=this,t=e.getBoundingClientRect();e.getBoundingClientRect();let o=0,l=0;if("static"!==getComputedStyle(document.body).position){const e=document.body.getBoundingClientRect();o=e.left,l=e.top}if(!e.opening){const n=window.scrollX,s=window.scrollY;e.$.dropDownContainer.style.left=-3+t.left+n-o+"px","bottom"===e.dropDownOpenPosition?e.$.dropDownContainer.style.top=t.bottom+s-l+1+"px":"top"===e.dropDownOpenPosition?e.$.dropDownContainer.style.top=t.top-e.$.dropDownContainer.offsetHeight+s-l+1+"px":"auto"===e.dropDownOpenPosition&&(e.$.dropDownContainer.removeAttribute("top"),e.$.dropDownContainer.style.top=t.bottom+s-l+1+"px",window.innerHeight<parseInt(e.$.dropDownContainer.style.top)+e.$.dropDownContainer.offsetHeight-s?(e.$.dropDownContainer.style.top=t.top-e.$.dropDownContainer.offsetHeight+s-l+1+"px",e.$.dropDownContainer.setAttribute("top","")):e.$.dropDownContainer.style.top=t.bottom+s-l+1+"px")}}_open(){const e=this;let t=e.getBoundingClientRect(),o=window.scrollX,l=window.scrollY,n=0,s=0;if(!this.opened&&e.parentNode&&!e._preventOpen){if(e.timer&&clearTimeout(e.timer),e.$.scrollView.classList.remove("smart-input-drop-down-menu"),e.$.dropDownContainer.id=e.id+"_"+e.tagName.toLowerCase()+"_menu_"+Math.floor(65536*(1+Math.random())).toString(16).substring(1),document.body.appendChild(e.$.dropDownContainer),e.setAttribute("aria-owns",e.$.dropDownContainer.id),e.readonly||e.$.input.setAttribute("aria-controls",e.$.dropDownContainer.id),e.$.scrollView.enableShadowDOM&&!e._importedStyle&&(e.$.scrollView.importStyle(e._getStyleUrl("smart.textbox.css")),e._importedStyle=!0),"static"!==getComputedStyle(document.body).position){const e=document.body.getBoundingClientRect();n=e.left,s=e.top}if(e.$.dropDownContainer.style.setProperty("--smart-input-drop-down-menu-width",""),e.$.dropDownContainer.style.left=-3+t.left+o-n+"px",e.$.dropDownContainer.style.top=t.bottom+l-s+1+"px",e.$.dropDownContainer.classList.remove("open"),"bottom"===e.dropDownOpenPosition)e.$.dropDownContainer.style.top=t.bottom+l-s+1+"px";else if("top"===e.dropDownOpenPosition)e.$.dropDownContainer.style.top=t.top-e.$.dropDownContainer.offsetHeight+l-s-2+"px",e.$.dropDownContainer.setAttribute("top","");else if("auto"===e.dropDownOpenPosition)if(e.$.dropDownContainer.removeAttribute("top"),window.innerHeight<parseInt(e.$.dropDownContainer.style.top)+e.$.dropDownContainer.offsetHeight-l+16){const o=t.top-e.$.dropDownContainer.offsetHeight+l-s-2;o>=0&&(e.$.dropDownContainer.style.top=o+"px",e.$.dropDownContainer.setAttribute("top",""))}else e.$.dropDownContainer.style.top=t.bottom+l-s+1+"px";e._positionTimer&&clearInterval(e._positionTimer),e.dropDownAppendTo||(e._positionTimer=setInterval((()=>{const o=e.getBoundingClientRect();if(e.opening)e.opening=!1,t=o;else if(Math.abs(parseInt(o.top)-parseInt(t.top))>=10||Math.abs(parseInt(o.left)-parseInt(t.left))>=10){const t=window.scrollX,l=window.scrollY;return e.$.dropDownContainer.style.left=-3+o.left+t-n+"px",void("bottom"===e.dropDownOpenPosition?e.$.dropDownContainer.style.top=o.bottom+l-s+1+"px":"top"===e.dropDownOpenPosition?e.$.dropDownContainer.style.top=o.top-e.$.dropDownContainer.offsetHeight+l-s+1+"px":"auto"===e.dropDownOpenPosition&&(e.$.dropDownContainer.removeAttribute("top"),e.$.dropDownContainer.style.top=o.bottom+l-s+1+"px",window.innerHeight<parseInt(e.$.dropDownContainer.style.top)+e.$.dropDownContainer.offsetHeight-l?(e.$.dropDownContainer.style.top=o.top-e.$.dropDownContainer.offsetHeight+l-s+1+"px",e.$.dropDownContainer.setAttribute("top","")):e.$.dropDownContainer.style.top=o.bottom+l-s+1+"px"))}}),50)),e.$.dropDownContainer.onpointerdown=function(){e._isPointerDown=!0},requestAnimationFrame((function(){const t=e.dropDownWidth;if(e.$.scrollView.refresh&&e.$.scrollView.refresh(),e._refreshMenu(),e.$.dropDownContainer.setAttribute("open",""),e.setAttribute("open",""),e.$.dropDownButton.setAttribute("open",""),e.$.input.setAttribute("open",""),t&&"string"==typeof t&&-1!==t.indexOf("%")){const o=parseFloat(t)/100;e.$.dropDownContainer.style.setProperty("--smart-input-drop-down-menu-width",e.offsetWidth*o+"px")}else if("auto"!==t&&t)e.$.dropDownContainer.style.setProperty("--smart-input-drop-down-menu-width",parseFloat(t)+"px");else if("auto"===t){if(e.$.dropDownContainer.style.setProperty("--smart-input-drop-down-menu-width",""),e.$.scrollView.$.scrollViewerContainer.classList.contains("vscroll")){const t=e.$.scrollView.offsetWidth+parseFloat(getComputedStyle(e.$.scrollView).getPropertyValue("--smart-scroll-bar-size"));e.$.dropDownContainer.style.setProperty("--smart-input-drop-down-menu-width",t+"px")}}else{e.$.menu.style.width="auto";let t=e.$.menu.offsetWidth;const o=e.$.menu.querySelectorAll("li");for(let t=0;t<o.length;t++)e._maxDropDownWidth=Math.max((o[t].firstElementChild||o[t]).offsetWidth,e._maxDropDownWidth);e.$.scrollView.computedVerticalScrollBarVisibility&&(t+=e.$.scrollView.$&&e.$.scrollView.$.verticalScrollBar?e.$.scrollView.$.verticalScrollBar.offsetWidth:30),e.$.dropDownContainer.style.setProperty("--smart-input-drop-down-menu-width",Math.max(t,e.offsetWidth-8)+"px"),e.$.menu.style.width=""}(e.shadowRoot||e.isInShadowDOM)&&e.$.scrollView._scrollView&&Smart.ScrollBar&&requestAnimationFrame((()=>e.$.scrollView._scrollView.vScrollBar.refresh()))})),e.$.scrollView.refresh&&e.$.scrollView.refresh(),e._refreshMenu(),e.allowItemsAdd&&setTimeout((()=>{e.$.scrollView.querySelector("input").focus()}),100),this.opened=!0,e.setAttribute("aria-expanded",!0)}}close(){const e=this;return!!e.opened&&(e.timer&&clearTimeout(e.timer),e._positionTimer&&clearInterval(e._positionTimer),e.timer=setTimeout((function(){e.$.dropDownContainer.parentNode&&!e.opened&&(document.body.removeChild(e.$.dropDownContainer),e.removeAttribute("aria-owns"),e.readonly||e.$.input.removeAttribute("aria-controls"))}),1e3),e.$.dropDownContainer.removeAttribute("open"),e.$.dropDownButton.removeAttribute("open"),e.$.input.removeAttribute("open"),e.removeAttribute("open"),e.opened=!1,e.setAttribute("aria-expanded",!1),e.focus(),e.$.fireEvent("close"),!0)}});