smart-webcomponents-angular/source/smart.gridpanel.js

[](https://jqwidgets.com/license/)

/* Smart UI v25.0.4 (2025-11-28) 
Copyright (c) 2011-2024 jQWidgets. 
License: https://htmlelements.com/license/ */ //

Smart("smart-grid-panel",class extends Smart.BaseElement{static get properties(){return{closeButtonPosition:{value:"left",allowedValues:["left","right"],type:"string"},dataSource:{value:[],type:"array",reflectToAttribute:!1},messages:{value:{en:{apply:"Ok",booleanFirst:"☐",booleanLast:"☑",cancel:"Cancel",dateFirst:"1",dateLast:"9",from:"from",numberFirst:"1",numberLast:"9",stringFirst:"A",stringLast:"Z",thenBy:"then by"}},type:"object",extend:!0}}}static get listeners(){return{change:"_changeHandler",click:"_clickHandler",keydown:"_keydownHandler","sortable.dragEnd":"_sortableDragEndHandler"}}static get requires(){return{"Smart.Input":"smart.input.js","Smart.Sortable":"smart.sortable.js"}}static get styleUrls(){return["smart.grid.anel.css"]}template(){return'<div id="container" role="presentation">\n                    <smart-sortable id="sortable" disable-mode="manual" animation="[[animation]]" disabled="[[readonly]]" right-to-left="[[rightToLeft]]"\n                            drag-mode="handle" handle-position="right" handle-visibility="visible" theme="[[theme]]">\n                    </smart-sortable>\n                    <div id="footer" class="smart-grid-panel-container-footer" role="presentation">\n                        <smart-input id="inputNotSorted" right-to-left="[[rightToLeft]]" animation="[[animation]]" readonly theme="[[theme]]"></smart-input>\n                        <div id="buttonsContainer" class="smart-grid-panel-buttons-container smart-unselectable" role="presentation">\n                            <span class="smart-grid-panel-cancel-button" role="button"></span>\n                            <span class="smart-grid-panel-apply-button primary" role="button"></span>\n                        </div>\n                    </div>\n                </div>'}ready(){super.ready()}render(){const e=this;e.setAttribute("role","dialog"),"right"===e.closeButtonPosition&&(e.$.sortable.handlePosition="left"),e._localize(),e._createSources(),super.render()}propertyChangedHandler(e,t,a){super.propertyChangedHandler(e,t,a);const n=this;switch(e){case"animation":case"theme":Array.from(n.$.sortable.getElementsByTagName("smart-input")).forEach((t=>t[e]=a));break;case"disabled":case"unfocusable":n._setFocusable();break;case"closeButtonPosition":"right"===n.closeButtonPosition?n.$.sortable.handlePosition="left":n.$.sortable.handlePosition="right";break;case"dataSource":n.$.sortable.$.container.innerHTML="",n._createSources();break;case"locale":case"messages":{const e=n.$.sortable._items;n._localize(),e.length&&(e[0].children[1].innerHTML=n.localize("firstBy"),e.forEach((function(e,t){0!==t&&(e.children[1].innerHTML=n.localize("thenBy"));const a=n._HTMLToSourceMap.get(e),l=n._ascDescTemplates[a.dataType]||n._ascDescTemplates.string;e.children[3].innerHTML=n.localize("from"),e.children[4].firstElementChild.innerHTML=l[0],e.children[4].children[1].innerHTML=l[1]})));break}case"maxLevel":if(null!=a)for(;n.$.sortable._items.length>0&&n.$.sortable._items.length>a;)n._interactionHandler(n.$.sortable._items[n.$.sortable._items.length-1].firstElementChild);n._disableItemAddition();break;case"rightToLeft":n.$.inputNotSorted.rightToLeft=a,n.$.inputNotSorted.dropDownButtonPosition=a?"left":"right",n.$.sortable._items.forEach((e=>{const t=e.querySelector("smart-input");t.rightToLeft=a,t.dropDownButtonPosition=a?"left":"right"}))}}_changeHandler(e){const t=this,a=t.shadowRoot||t.isInShadowDOM?e.composedPath()[0]:e.target;if(t.$.inputNotSorted.contains(a)){const e=t.$.inputNotSorted.value,a=t._labelToSourceMap.get(e);return t._createSortItem(a,t.$.sortable._items.length),t.$.sortable.updateItems(),t._visibleLabels.push(e),t._updateHiddenSource(),t._disableItemAddition(),void(t.$.inputNotSorted.value="")}const n=a.closest("smart-input");if(!n)return;const l=n.parentElement.parentElement,i=l.children[4].firstElementChild,o=l.children[4].children[1],r=n.value,s=t._HTMLToSourceMap.get(l).label,d=t._labelToSourceMap.get(r),c=t._ascDescTemplates[d.dataType]||t._ascDescTemplates.string;t._HTMLToSourceMap.set(l,d),t._visibleLabels.splice(t._visibleLabels.indexOf(s),1,r),t._updateHiddenSource(),i.innerHTML=c[0],o.innerHTML=c[1],d.sortDirection&&-1===d.sortDirection.indexOf("asc")?(o.classList.add("selected"),i.classList.remove("selected")):(i.classList.add("selected"),o.classList.remove("selected"))}_updateHiddenSource(){const e=this;e._hiddenSource=e.dataSource.map((e=>({label:e.label,value:e.dataField,icon:e.icon}))).filter((t=>-1===e._visibleLabels.indexOf(t.label)));const t=e.$.inputNotSorted.context;e.$.inputNotSorted.context=e.$.inputNotSorted,e.$.inputNotSorted.dataSource=e._hiddenSource,e.$.sortable._items.forEach((t=>{const a=t.getElementsByTagName("smart-input")[0],n=a.context;a.context=a,a.dataSource=e._hiddenSource,a.context=n})),e.$.inputNotSorted.context=t,e._disableItemAddition(),e.$.fireEvent("dataSourceChange")}_clickHandler(e){const t=this;t._interactionHandler(t.shadowRoot||t.isInShadowDOM?e.composedPath()[0]:e.target,e)}_interactionHandler(e,t){const a=this;if(a.disabled||a.readonly)return!0;const n=e.closest(".smart-grid-panel-item");if(n){if(e===n.firstElementChild){const e=a._HTMLToSourceMap.get(n).label;a.$.sortable.$.container.removeChild(n),a.$.sortable.updateItems(),a._visibleLabels.splice(a._visibleLabels.indexOf(e),1),a._updateHiddenSource(),a._disableItemAddition(),a.$.sortable._items.length&&(a.$.sortable._items[0].children[1].innerHTML=a.localize("firstBy")),a.$.fireEvent("remove")}else if(n.children[4].contains(e)){const l=n.children[4].firstElementChild,i=n.children[4].children[1];"click"===t.type?e.classList.contains("selected")||(e===l?(i.classList.remove("selected"),l.classList.add("selected"),a._HTMLToSourceMap.get(n).sortDirection="ascending"):e===i&&(l.classList.remove("selected"),i.classList.add("selected"),a._HTMLToSourceMap.get(n).sortDirection="descending")):(l.classList.toggle("selected"),i.classList.toggle("selected"),a._HTMLToSourceMap.get(n).sortDirection=l.classList.contains("selected")?"ascending":"descending")}return!0}if(e===a.$.buttonsContainer.firstElementChild)return a.$.fireEvent("cancel"),!0;if(e===a.$.buttonsContainer.children[1]){const e=[],t={dataFields:[],dataTypes:[],orderBy:[]},n={value:e};return a.$.sortable._items.forEach((n=>{const l=a._HTMLToSourceMap.get(n);e.push({dataField:l.dataField,sortDirection:l.sortDirection}),t.dataFields.push(l.dataField),t.dataTypes.push(l.dataType),t.orderBy.push(l.sortDirection)})),a instanceof Smart.SortPanel&&a.$.maintainSortContainer&&(t.maintainSort=a.$.maintainSortContainer.firstElementChild.hasAttribute("active")),(a instanceof Smart.SortPanel||a instanceof Smart.GroupPanel)&&(n.sortByInfo=t),a.$.fireEvent("apply",n),!0}}_keydownHandler(e){const t=this,a=e.key;" "!==a&&"Enter"!==a||(e.preventDefault(),t._interactionHandler((t.shadowRoot||t.getRootNode()).activeElement,e))}_sortableDragEndHandler(e){const t=this,a=e.detail.oldIndex,n=e.detail.newIndex,l=Math.max(a,n),i=t.$.sortable._items;0===(a&&n)&&(i[0].children[1].innerHTML=t.localize("firstBy"),i[1].children[1].innerHTML=t.localize("thenBy"),l>1&&(i[l].children[1].innerHTML=t.localize("thenBy")))}_localize(){const e=this;e.$.inputNotSorted.placeholder=e.localize("pickAnother"),e.$.buttonsContainer.firstElementChild.innerHTML=e.localize("cancel"),e.$.buttonsContainer.children[1].innerHTML=e.localize("apply"),e._ascDescTemplates={boolean:[e.localize("booleanFirst")+" → "+e.localize("booleanLast"),e.localize("booleanLast")+" → "+e.localize("booleanFirst")],date:[e.localize("dateFirst")+" → "+e.localize("dateLast"),e.localize("dateLast")+" → "+e.localize("dateFirst")],number:[e.localize("numberFirst")+" → "+e.localize("numberLast"),e.localize("numberLast")+" → "+e.localize("numberFirst")],string:[e.localize("stringFirst")+" → "+e.localize("stringLast"),e.localize("stringLast")+" → "+e.localize("stringFirst")]}}_createSources(){const e=this,t=(e instanceof Smart.SortPanel?"sort":"group")+"Index",a=[],n=[];if(e._HTMLToSourceMap=new Map,e._labelToSourceMap=new Map,e.dataSource.forEach((n=>{e._labelToSourceMap.set(n.label,n),-1!==n[t]&&void 0!==n[t]&&a.push(n)})),a.sort(((e,a)=>e[t]-a[t])),void 0!==e.maxLevel&&null!==e.maxLevel)for(;a.length>0&&a.length>e.maxLevel;)a.pop();e.$.inputNotSorted.dropDownButtonPosition=e.rightToLeft?"left":"right",e.$.inputNotSorted.dataSource&&e.$.inputNotSorted.dataSource.length<10&&e.$.inputNotSorted.dataSource.length>0?e.$.inputNotSorted.dropDownHeight="auto":e.$.inputNotSorted.dropDownHeight=250,a.forEach((e=>n.push(e.label))),e._visibleLabels=n,e._updateHiddenSource(),a.forEach(((t,a)=>{e._createSortItem(t,a)})),e.$.sortable.updateItems(),e._disableItemAddition(),e._setFocusable()}_createSortItem(e,t){const a=this,n=a.disabled||a.unfocusable?-1:0,l=document.createElement("div"),i=a._ascDescTemplates[e.dataType]||a._ascDescTemplates.string;l.className="smart-grid-panel-item",l.innerHTML=`<div class="smart-grid-panel-item-close-button" tabindex="${n}" role="button" aria-label="Close"></div>\n<div class="smart-grid-panel-label-by smart-unselectable" role="presentation">${a.localize(t>0?"thenBy":"firstBy")}</div>\n<div class="smart-grid-panel-field-container" role="presentation"><smart-input class="smart-grid-panel-field-selection" value="${e.label}" animation="${a.animation}" readonly theme="${a.theme}" aria-label="Field name"></smart-input></div>\n<div class="smart-grid-panel-from smart-unselectable" role="presentation">${a.localize("from")}</div >\n<div class="smart-grid-panel-direction smart-unselectable" tabindex="${n}" role="presentation">\n    <div class="smart-grid-panel-asc" role="button" aria-label="Ascending">${i[0]}</div >\n    <div class="smart-grid-panel-desc" role="button" aria-label="Descending">${i[1]}</div>\n</div>\n`;const o=l.querySelector("smart-input");o.dataSource=a._hiddenSource,o.rightToLeft=a.rightToLeft,o.dropDownButtonPosition=a.rightToLeft?"left":"right",o.dataSource&&o.dataSource.length<10?o.dropDownHeight="auto":o.dropDownHeight=250,a.$.sortable.$.container.appendChild(l),o.tabIndex=n,e.sortDirection&&-1===e.sortDirection.indexOf("asc")?l.children[4].children[1].classList.add("selected"):(e.sortDirection="ascending",l.children[4].firstElementChild.classList.add("selected")),a._HTMLToSourceMap.set(l,e)}_disableItemAddition(){const e=this,t=e.maxLevel,a=0===e._hiddenSource.length||null!=t&&Math.max(0,t)===e.$.sortable._items.length;e.$.inputNotSorted.disabled=a,a&&e.$.inputNotSorted.removeAttribute("focus")}_setFocusable(){const e=this,t=e.disabled||e.unfocusable?-1:0,a=Array.from(e.getElementsByClassName("smart-grid-panel-item-close-button")),n=Array.from(e.getElementsByClassName("smart-grid-panel-direction")),l=Array.from(e.getElementsByTagName("input")),i=a.concat(n).concat(l);e.$.buttonsContainer.firstElementChild.tabIndex=t,e.$.buttonsContainer.children[1].tabIndex=t,i.forEach((e=>e.tabIndex=t))}}),Smart("smart-sort-panel",class extends Smart.GridPanel{static get properties(){return{messages:{value:{en:{firstBy:"Sort by",noSorting:"No sorting applied",pickAnother:"Pick another field to sort by",maintainSort:"Maintain Sort",applyOnce:"Apply once"}},type:"object",extend:!0}}}template(){return'<div id="container" role="presentation">\n                    <smart-sortable disable-mode="manual" right-to-left="[[rightToLeft]]" id="sortable" animation="[[animation]]" disabled="[[readonly]]" drag-mode="handle" handle-position="right" handle-visibility="visible" theme="[[theme]]"></smart-sortable>\n                    <div id="footer" class="smart-grid-panel-container-footer" role="presentation">\n                        <div>\n                        <smart-input right-to-left="[[rightToLeft]]" id="inputNotSorted" animation="[[animation]]" readonly theme="[[theme]]"></smart-input>\n                        <div id="maintainSortContainer" class="smart-hidden smart-grid-panel-buttons-container smart-grid-panel-maintain-sort smart-unselectable" role="presentation">\n                        <span class="smart-grid-panel-maintain-sort-button" role="button"></span>\n                         </div>\n                    \n                        </div>\n                        <div id="buttonsContainer" class="smart-grid-panel-buttons-container smart-unselectable" role="presentation">\n                            <span class="smart-grid-panel-cancel-button" role="button"></span>\n                            <span class="smart-grid-panel-apply-button primary" role="button"></span>\n                        </div>\n                    </div>\n                </div>'}_changeApplyButtonText(e){const t=this,a=t.$.maintainSortContainer.firstElementChild,n=t.querySelector(".smart-grid-panel-apply-button");e?a.hasAttribute("active")?(a.removeAttribute("active"),n&&(n.innerHTML=t.localize("applyOnce"))):(a.setAttribute("active",""),n&&(n.innerHTML=t.localize("apply"))):a.hasAttribute("active")?n.innerHTML=t.localize("apply"):n.innerHTML=t.localize("applyOnce")}_interactionHandler(e,t){const a=this;super._interactionHandler(e,t)||e===a.$.maintainSortContainer.firstElementChild&&a._changeApplyButtonText(!0)}static get styleUrls(){return["smarttextbox.css"]}_localize(){super._localize();const e=this;e.$.sortable.$.container.setAttribute("no-sorting",e.localize("noSorting")),e.$.maintainSortContainer.firstElementChild.innerHTML=e.localize("maintainSort"),e._changeApplyButtonText()}}),Smart("smart-group-panel",class extends Smart.GridPanel{static get properties(){return{maxLevel:{value:8,type:"number?"},messages:{value:{en:{collapseAll:"Collapse all",expandAll:"Expand all",firstBy:"Group by",noGrouping:"No grouping",pickAnother:"Pick another field to group by"}},type:"object",extend:!0}}}template(){return'<div id="container" role="presentation">\n                    <smart-sortable disable-mode="manual" right-to-left="[[rightToLeft]]" id="sortable" animation="[[animation]]" disabled="[[readonly]]" drag-mode="handle" handle-position="right" handle-visibility="visible" theme="[[theme]]"></smart-sortable>\n                    <div id="expandCollapseContainer" class="smart-grid-panel-buttons-container smart-grid-panel-expand-collapse smart-unselectable" role="presentation">\n                        <span class="smart-group-panel-collapse-button" role="button"></span>\n                        <span class="smart-group-panel-expand-button" role="button"></span>\n                    </div>\n                    <div id="footer" class="smart-grid-panel-container-footer" role="presentation">\n                        <smart-input right-to-left="[[rightToLeft]]" id="inputNotSorted" animation="[[animation]]" readonly theme="[[theme]]"></smart-input>\n                        <div id="buttonsContainer" class="smart-grid-panel-buttons-container smart-unselectable" role="presentation">\n                            <span class="smart-grid-panel-cancel-button" role="button"></span>\n                            <span class="smart-grid-panel-apply-button primary" role="button"></span>\n                        </div>\n                    </div>\n                </div>'}_interactionHandler(e,t){const a=this;super._interactionHandler(e,t)||(e===a.$.expandCollapseContainer.firstElementChild?a.$.fireEvent("collapseAll"):e===a.$.expandCollapseContainer.children[1]&&a.$.fireEvent("expandAll"))}_localize(){super._localize();const e=this;e.$.expandCollapseContainer.firstElementChild.innerHTML=e.localize("collapseAll"),e.$.expandCollapseContainer.children[1].innerHTML=e.localize("expandAll"),e.$.sortable.$.container.setAttribute("no-grouping",e.localize("noGrouping"))}_setFocusable(){super._setFocusable();const e=this,t=e.disabled||e.unfocusable?-1:0;e.$.expandCollapseContainer.firstElementChild.tabIndex=t,e.$.expandCollapseContainer.children[1].tabIndex=t}}),Smart("smart-multi-column-filter-panel",class extends Smart.BaseElement{static get properties(){return{closeButtonPosition:{value:"left",allowedValues:["left","right"],type:"string"},dataSource:{value:[],type:"array",reflectToAttribute:!1},editorCallback:{value:null,type:"function?",reflectToAttribute:!1},editorPlaceholder:{value:"Value",type:"string"},messages:{value:{en:{addFilter:"+ Add filter",addAIFilter:"✨︎ Ask AI",and:"And",apply:"Ok",cancel:"Cancel",CONTAINS:"contains",CONTAINS_CASE_SENSITIVE:"contains (case sensitive)",DOES_NOT_CONTAIN:"does not contain",DOES_NOT_CONTAIN_CASE_SENSITIVE:"does not contain (case sensitive)",EMPTY:"empty",ENDS_WITH:"ends with",ENDS_WITH_CASE_SENSITIVE:"ends with (case sensitive)",EQUAL:"equal",EQUAL_CASE_SENSITIVE:"equal (case sensitive)",GREATER_THAN:"greater than",GREATER_THAN_OR_EQUAL:"greater than or equal",LESS_THAN:"less than",LESS_THAN_OR_EQUAL:"less than or equal",noFilters:"No filters applied",NOT_EMPTY:"not empty",NOT_EQUAL:"not equal",NOT_NULL:"not null",NULL:"null",or:"Or",STARTS_WITH:"starts with",STARTS_WITH_CASE_SENSITIVE:"starts with (case sensitive)",where:"Where",TOMORROW:"Tomorrow",TODAY:"Today",YESTERDAY:"Yesterday",NEXT_WEEK:"Next week",THIS_WEEK:"This week",LAST_WEEK:"Last week",NEXT_MONTH:"Next month",THIS_MONTH:"This month",LAST_MONTH:"Last month"}},type:"object",extend:!0},operator:{value:"and",allowedValues:["and","or"],type:"string"},value:{value:[],type:"array"}}}static get listeners(){return{change:"_changeHandler",click:"_interactionHandler",keydown:"_interactionHandler"}}static get requires(){return{"Smart.Button":"smart.button.js","Smart.CheckBox":"smart.checkbox.js","Smart.DateTimePicker":"smart.datetimepicker.js","Smart.FilterGroup":"smart.filter.js","Smart.Input":"smart.input.js","Smart.NumericTextBox":"smart.numerictextbox.js"}}static get styleUrls(){return["smart.grid.anel.css"]}template(){return'<div id="container" role="presentation">\n                    <div id="itemsContainer" class="smart-filter-panel-items-container smart-unselectable"></div>\n                    <smart-input class="underlined smart-hidden" id="aiFilterPrompt"></smart-input>\n                    <span class="smart-small smart-quiet smart-hidden" id="spinner"></span>\n                    </div>\n                    <div id="footer" class="smart-grid-panel-container-footer" role="presentation">\n                        <div class="smart-filter-panel-add-filter-buttons-container smart-flex">\n                            <div id="addFilterButton" class="smart-filter-panel-add-filter-button smart-unselectable" role="button"></div>\n                            <div id="addAIFilterButton" class="smart-hidden smart-filter-panel-add-filter-button smart-unselectable" role="button"></div>\n                        </div>\n                        <div id="buttonsContainer" class="smart-grid-panel-buttons-container smart-unselectable" role="presentation">\n                            <span class="smart-grid-panel-cancel-button" role="button"></span>\n                            <span class="smart-grid-panel-apply-button primary" role="button"></span>\n                        </div>\n                    </div>\n                </div>'}ready(){super.ready()}render(){const e=this;e.setAttribute("role","dialog"),e._setFocusable(),e._localize(),e._applyValue(),super.render()}propertyChangedHandler(e,t,a){super.propertyChangedHandler(e,t,a);const n=this;switch(e){case"animation":case"theme":case"rightToLeft":Array.from(n.$.itemsContainer.querySelectorAll("smart-date-time-picker, smart-numeric-text-box, smart-check-box, smart-input")).forEach((t=>{t[e]=a,"smart-input"===t.tagName.toLowerCase()&&"rightToLeft"===e&&"none"!==t.dropDownButtonPosition&&(t.dropDownButtonPosition=a?"left":"right")}));break;case"disabled":case"unfocusable":n._setFocusable(!0);break;case"dataSource":case"value":n._applyValue();break;case"editorPlaceholder":Array.from(n.$.itemsContainer.getElementsByClassName("editor")).forEach((e=>e.placeholder=a));break;case"locale":case"messages":n._localize(!0);break;case"operator":n._setOperator()}}_setOperator(){const e=this,t=e.localize(e.operator);for(let a=2;a<e._items.length;a++)e._items[a].children[1].innerHTML=t}_changeHandler(e){const t=this,a=t.shadowRoot||t.isInShadowDOM?e.composedPath()[0]:e.target;if(a instanceof Smart.Input==0)return;const n=a.parentElement,l=n.children;if(a===l[1])t.operator=a.$.input.dataValue,t._setOperator();else if(a===l[2]){let a,i,o=t.dataSource.find((t=>t.dataField===e.detail.oldValue)).dataType,r=t.dataSource.find((t=>t.dataField===e.detail.oldValue)),s=t.dataSource.find((t=>t.dataField===e.detail.value)),d=s.dataType,c=[];if(s.options&&(d="enum",c=s.options.map((e=>{const t=e.color||"var(--smart-primary)";return e.prefix='<span style="background: '+t+'; width: 14px; height: 14px; display: inline-block; border-radius: 50%; margin-left:-4px; margin-right: 8px; top: 2px; position: relative;"></span>',""===e.label&&(e.label=" "),e}))),r&&r.options&&(o="enum"),"enum"!==d&&d===o)return void(t.editorCallback&&t.editorCallback(l[4],s));let u=l[3].value;switch(d){case"date":a=t._dateConditions,i=document.createElement("smart-date-time-picker"),i.calendarButton=!0,i.dropDownAppendTo="body",i.dropDownDisplayMode="auto",i.formatString="M/d/yy H:mm",u="";break;case"number":a=t._numberAndDateConditions,i=document.createElement("smart-numeric-text-box"),u="";break;case"boolean":a=t._booleanConditions,i=document.createElement("smart-check-box"),u="";break;case"enum":a=t._enumConditions,i=document.createElement("smart-input"),i.dataSource=c.length?c:s.options,i.readonly=!0,i.dropDownButtonPosition="right",u=a[0];break;default:a=t._stringConditions,u=t._stringConditions.find((e=>"CONTAINS"===e.value)),i=document.createElement("smart-input")}a.forEach((e=>{delete e.selected})),i.rightToLeft=t.rightToLeft,i.animation=t.animation,i.theme=t.theme,i.unfocusable=t.disabled||t.unfocusable,i.classList.add("underlined"),i.dataSource&&i.dataSource.length<10?i.dropDownHeight="auto":i.dropDownHeight=250,"boolean"!==d&&(i.placeholder=t.editorPlaceholder),t.editorCallback&&t.editorCallback(i,s),l[4]&&l[4].remove(),n.appendChild(i),""===u||a.find((e=>e.label===u))||(u.value?(l[3].value=u.label,l[3].selectedValue=u.value):(l[3].value="",l[3].selectedValue="")),l[3].dataSource=a,""===u&&(l[3].value=a[0].label,l[3].selectedValue=a[0].value),a.length>=10?l[3].dropDownHeight=250:l[3].dropDownHeight="auto",n.dataType=d}else if(a===l[3]){const e=l[4],t=a.$.input.dataValue;-1!==t.indexOf("NULL")||-1!==t.indexOf("EMPTY")||-1!==t.indexOf("THIS_WEEK")||-1!==t.indexOf("LAST_WEEK")||-1!==t.indexOf("NEXT_WEEK")||-1!==t.indexOf("THIS_MONTH")||-1!==t.indexOf("LAST_MONTH")||-1!==t.indexOf("NEXT_MONTH")||-1!==t.indexOf("THIS_YEAR")||-1!==t.indexOf("LAST_YEAR")||-1!==t.indexOf("NEXT_YEAR")||-1!==t.indexOf("TODAY")||-1!==t.indexOf("TOMORROW")||-1!==t.indexOf("YESTERDAY")?(e.value="",e.checked=!1,e.classList.add("smart-visibility-hidden")):e.classList.remove("smart-visibility-hidden"),a.condition=t}}_interactionHandler(e){const t=this;if(t.disabled||t.readonly)return;if("keydown"===e.type){if("Enter"!==e.key)return;e.preventDefault()}const a=t.shadowRoot||t.isInShadowDOM?e.composedPath()[0]:e.target,n=a.closest(".smart-grid-panel-item");if(n){if(a===n.firstElementChild){const e=t._items.indexOf(n);let a;t._items.splice(e,1),n.remove(),t._items.length>0&&e<2&&(0===e&&(t._items[0].children[1].remove(),a=document.createElement("div"),a.innerHTML=t.localize("where"),t._items[0].insertBefore(a,t._items[0].children[1])),t._items.length>1&&(t._items[1].children[1].remove(),a=document.createElement("smart-input"),a.className="underlined",a.dataSource=[{value:"and",label:t.localize("and")},{value:"or",label:t.localize("or")}],a.dropDownButtonPosition=t.rightToLeft?"left":"right",a.readonly=!0,a.value=t.localize(t.operator),a.animation=t.animation,a.theme=t.theme,a.rightToLeft=t.rightToLeft,a.unfocusable=t.disabled||t.unfocusable,t._items[1].insertBefore(a,t._items[1].children[1])))}}else if(a===t.$.addFilterButton&&t.dataSource.length>0)t.$.itemsContainer.appendChild(t._createItem(t.dataSource[0],"","",t._items.length));else if(a!==t.$.buttonsContainer.firstElementChild){if(a===t.$.buttonsContainer.children[1]){let e=t._stringConditions.concat(t._dateConditions),a=t.operator,n=[],l={},i=[];t._customConditions&&(e=e.concat(t._customConditions)),t._items.forEach((i=>{const o=t.dataSource.find((e=>e.label===i.children[2].value)),r=[];let s=i.children[3].value;if(""===s)return;let d=o.dataType;if(s=e.find((e=>e.label===s)).value,r.push(o.dataField,s),-1===s.indexOf("NULL")&&-1===s.indexOf("EMPTY"))if("boolean"===d)r.push(i.children[4].checked);else if("date"===d)r.push(i.children[4].value.toDate());else if("enum"===d||o.options){let e=i.children[4].$.input.dataValue;if(void 0===e){const t=o.options.find((e=>e.label===i.children[4].value));if(!t)return;e=t.value}d="string",r.push(e)}else r.push(i.children[4].value);let c=l[r[0]];void 0===c&&(c=new Smart.Utilities.FilterGroup,l[r[0]]=c);const u=c.createFilter(d,r[2],r[1]);c.addFilter(a,u),n.push(r)}));for(let e in l)i.push([e,l[e]]);t.value=n,t.$.fireEvent("apply",{filters:i,operator:a,value:n})}}else t.$.fireEvent("cancel")}_applyValue(){const e=this,t=document.createDocumentFragment();let a=0;for(e._items=[];e.$.itemsContainer.firstElementChild;)e.$.itemsContainer.firstElementChild.remove();0!==e.dataSource.length&&(e.value.forEach((n=>{if(!Array.isArray(n))return;const l=n[0],i=e.dataSource.find((e=>e.dataField===l));if(!i)return;const o=e._createItem(i,n[1],n[2],a);t.appendChild(o),a++})),e.$.itemsContainer.appendChild(t))}_createItem(e,t,a,n){const l=this,i=l.disabled||l.unfocusable?-1:0,o=document.createElement("div"),r=document.createDocumentFragment(),s=document.createElement("div"),d=document.createElement("smart-input"),c=document.createElement("smart-input");let u,p;if(s.className="smart-grid-panel-item-close-button",s.tabIndex=i,s.setAttribute("role","button"),s.setAttribute("aria-label","button"),r.appendChild(s),0===n?(u=document.createElement("div"),u.innerHTML=l.localize("where"),u.setAttribute("role","presentation")):1===n?(u=document.createElement("smart-input"),u.className="underlined",u.dataSource=[{value:"and",label:l.localize("and")},{value:"or",label:l.localize("or")}],u.dropDownButtonPosition=l.rightToLeft?"left":"right",u.readonly=!0,u.value=l.localize(l.operator),u.animation=l.animation,u.theme=l.theme,u.rightToLeft=l.rightToLeft,u.unfocusable=l.disabled||l.unfocusable,u.setAttribute("aria-label","Operator")):(u=document.createElement("div"),u.innerHTML=l.localize(l.operator),u.setAttribute("role","presentation")),r.appendChild(u),d.className="underlined",d.dataSource=l.dataSource.map((e=>({value:e.dataField,label:e.label,icon:e.icon}))),d.dropDownButtonPosition=l.rightToLeft?"left":"right",d.readonly=!0,d.value=e.label,d.animation=l.animation,d.theme=l.theme,d.rightToLeft=l.rightToLeft,d.unfocusable=l.disabled||l.unfocusable,d.setAttribute("aria-label","Field"),d.dataSource&&d.dataSource.length<10?d.dropDownHeight="auto":d.dropDownHeight=250,r.appendChild(d),"boolean"===e.dataType)c.dataSource=JSON.parse(JSON.stringify(l._booleanConditions)),p=document.createElement("smart-check-box"),p.checked="boolean"==typeof a&&a;else if("date"===e.dataType)c.dataSource=l._dateConditions,p=document.createElement("smart-date-time-picker"),p.dropDownDisplayMode="auto",p.calendarButton=!0,p.dropDownAppendTo="body",p.formatString="M/d/yy H:mm",p.value=a;else if("number"===e.dataType)c.dataSource=JSON.parse(JSON.stringify(l._numberAndDateConditions)),p=document.createElement("smart-numeric-text-box"),p.value="number"==typeof a||"string"==typeof a?a:0;else if("enum"===e.dataType||e.options){c.dataSource=JSON.parse(JSON.stringify(l._enumConditions)),p=document.createElement("smart-input");let t=[];e.options&&(t=e.options.map((e=>{"string"==typeof e&&(e={label:e,value:e});const t=e.color||"var(--smart-primary)";return e.prefix='<span style="background: '+t+'; width: 14px; height: 14px; display: inline-block; border-radius: 50%; margin-left:-4px; margin-right: 8px; top: 2px; position: relative;"></span>',""===e.label&&(e.label=" "),e}))),p.dataSource=t.length?t:e.options,p.readonly=!0,p.dropDownButtonPosition="right";let n=a?e.options.find((e=>void 0!==e.value&&e.value===a||void 0!==e.label&&e.label===a||"string"==typeof e&&e===a?e:void 0)):null;n?("string"==typeof n&&(n={label:n,value:n}),p.value=a?n.label:""):p.value=""}else c.dataSource=JSON.parse(JSON.stringify(l._stringConditions)),p=document.createElement("smart-input"),p.value=null!=a?a.toString():"",t||(t="CONTAINS");return c.className="underlined",c.dropDownButtonPosition=l.rightToLeft?"left":"right",c.readonly=!0,c.animation=l.animation,c.theme=l.theme,c.rightToLeft=l.rightToLeft,c.unfocusable=l.disabled||l.unfocusable,c.setAttribute("aria-label","Condition"),c.classList.add("smart-filter-panel-list"),c.dataSource.forEach((e=>{delete e.selected})),c.dataSource.find((e=>e.value===t))?(c.value=l.localize(t),c.selectedValue=t,c.condition=t):(p.value="",p.checked=!1),(void 0===t||-1===t.indexOf("NULL")&&-1===t.indexOf("EMPTY"))&&-1===t.indexOf("THIS_WEEK")&&-1===t.indexOf("LAST_WEEK")&&-1===t.indexOf("NEXT_WEEK")&&-1===t.indexOf("THIS_MONTH")&&-1===t.indexOf("LAST_MONTH")&&-1===t.indexOf("NEXT_MONTH")&&-1===t.indexOf("THIS_YEAR")&&-1===t.indexOf("LAST_YEAR")&&-1===t.indexOf("NEXT_YEAR")&&-1===t.indexOf("TODAY")&&-1===t.indexOf("TOMORROW")&&-1===t.indexOf("YESTERDAY")||(p.value="",p.checked=!1,p.classList.add("smart-visibility-hidden")),c.dataSource&&c.dataSource.length<10?c.dropDownHeight="auto":c.dropDownHeight=250,p.animation=l.animation,p.classList.add("editor"),p.rightToLeft=l.rightToLeft,p.theme=l.theme,p.unfocusable=l.disabled||l.unfocusable,p.classList.add("underlined"),"boolean"!==e.dataType&&(p.placeholder=l.editorPlaceholder),l.editorCallback&&l.editorCallback(p,e),r.appendChild(c),r.appendChild(p),o.appendChild(r),o.className="smart-grid-panel-item",l._items.push(o),o.dataType=e.dataType,o}_localize(e){const t=this;t.$.addFilterButton.innerHTML=t.localize("addFilter"),t.$.addAIFilterButton.innerHTML=t.localize("addAIFilter"),t.$.buttonsContainer.firstElementChild.innerHTML=t.localize("cancel"),t.$.buttonsContainer.children[1].innerHTML=t.localize("apply"),t.$.itemsContainer.setAttribute("no-filters",t.localize("noFilters")),t._stringConditions=[{prefix:'<span class="smart-icon smart-icon-empty"></span>',value:"EMPTY",label:t.localize("EMPTY")},{prefix:'<span class="smart-icon smart-icon-not-empty"></span>',value:"NOT_EMPTY",label:t.localize("NOT_EMPTY")},{prefix:'<span class="smart-icon smart-icon-contains"></span>',value:"CONTAINS",label:t.localize("CONTAINS")},{prefix:'<span class="smart-icon smart-icon-does-not-contain"></span>',value:"DOES_NOT_CONTAIN",label:t.localize("DOES_NOT_CONTAIN")},{prefix:'<span class="smart-icon smart-icon-starts-with"></span>',value:"STARTS_WITH",label:t.localize("STARTS_WITH")},{prefix:'<span class="smart-icon smart-icon-ends-with"></span>',value:"ENDS_WITH",label:t.localize("ENDS_WITH")},{prefix:'<span class="smart-icon smart-icon-equal"></span>',value:"EQUAL",label:t.localize("EQUAL")},{prefix:'<span class="smart-icon smart-icon-not-equal"></span>',value:"NOT_EQUAL",label:t.localize("NOT_EQUAL")},{prefix:'<span class="smart-icon smart-icon-null"></span>',value:"NULL",label:t.localize("NULL")},{prefix:'<span class="smart-icon smart-icon-not-null"></span>',value:"NOT_NULL",label:t.localize("NOT_NULL")}],t._enumConditions=[{prefix:'<span class="smart-icon smart-icon-equal"></span>',value:"EQUAL",label:t.localize("EQUAL")},{prefix:'<span class="smart-icon smart-icon-not-equal"></span>',value:"NOT_EQUAL",label:t.localize("NOT_EQUAL")}],t._dateConditions=[{prefix:'<span class="smart-icon smart-icon-equal"></span>',value:"EQUAL",label:t.localize("EQUAL")},{prefix:'<span class="smart-icon smart-icon-not-equal"></span>',value:"NOT_EQUAL",label:t.localize("NOT_EQUAL")},{prefix:'<span class="smart-icon smart-icon-less-than"></span>',value:"LESS_THAN",label:t.localize("LESS_THAN")},{prefix:'<span class="smart-icon smart-icon-less-than-equal"></span>',value:"LESS_THAN_OR_EQUAL",label:t.localize("LESS_THAN_OR_EQUAL")},{prefix:'<span class="smart-icon smart-icon-greater-than"></span>',value:"GREATER_THAN",label:t.localize("GREATER_THAN")},{prefix:'<span class="smart-icon smart-icon-greater-than-equal"></span>',value:"GREATER_THAN_OR_EQUAL",label:t.localize("GREATER_THAN_OR_EQUAL")},{prefix:'<span class="smart-icon smart-icon-null"></span>',value:"NULL",label:t.localize("NULL")},{prefix:'<span class="smart-icon smart-icon-not-null"></span>',value:"NOT_NULL",label:t.localize("NOT_NULL")},{prefix:'<span class="smart-icon smart-icon-calendar"></span>',value:"TOMORROW",label:t.localize("TOMORROW")},{prefix:'<span class="smart-icon smart-icon-calendar"></span>',value:"TODAY",label:t.localize("TODAY")},{prefix:'<span class="smart-icon smart-icon-calendar"></span>',value:"YESTERDAY",label:t.localize("YESTERDAY")},{prefix:'<span class="smart-icon smart-icon-calendar"></span>',value:"NEXT_WEEK",label:t.localize("NEXT_WEEK")},{prefix:'<span class="smart-icon smart-icon-calendar"></span>',value:"THIS_WEEK",label:t.localize("THIS_WEEK")},{prefix:'<span class="smart-icon smart-icon-calendar"></span>',value:"LAST_WEEK",label:t.localize("LAST_WEEK")},{prefix:'<span class="smart-icon smart-icon-calendar"></span>',value:"NEXT_MONTH",label:t.localize("NEXT_MONTH")},{prefix:'<span class="smart-icon smart-icon-calendar"></span>',value:"THIS_MONTH",label:t.localize("THIS_MONTH")},{prefix:'<span class="smart-icon smart-icon-calendar"></span>',value:"LAST_MONTH",label:t.localize("LAST_MONTH")}],t._numberAndDateConditions=[{prefix:'<span class="smart-icon smart-icon-equal"></span>',value:"EQUAL",label:t.localize("EQUAL")},{prefix:'<span class="smart-icon smart-icon-not-equal"></span>',value:"NOT_EQUAL",label:t.localize("NOT_EQUAL")},{prefix:'<span class="smart-icon smart-icon-less-than"></span>',value:"LESS_THAN",label:t.localize("LESS_THAN")},{prefix:'<span class="smart-icon smart-icon-less-than-equal"></span>',value:"LESS_THAN_OR_EQUAL",label:t.localize("LESS_THAN_OR_EQUAL")},{prefix:'<span class="smart-icon smart-icon-greater-than"></span>',value:"GREATER_THAN",label:t.localize("GREATER_THAN")},{prefix:'<span class="smart-icon smart-icon-greater-than-equal"></span>',value:"GREATER_THAN_OR_EQUAL",label:t.localize("GREATER_THAN_OR_EQUAL")},{prefix:'<span class="smart-icon smart-icon-null"></span>',value:"NULL",label:t.localize("NULL")},{prefix:'<span class="smart-icon smart-icon-not-null"></span>',value:"NOT_NULL",label:t.localize("NOT_NULL")}],t._booleanConditions=[{prefix:'<span class="smart-icon smart-icon-equal"></span>',value:"EQUAL",label:t.localize("EQUAL")},{prefix:'<span class="smart-icon smart-icon-not-equal"></span>',value:"NOT_EQUAL",label:t.localize("NOT_EQUAL")},{prefix:'<span class="smart-icon smart-icon-null"></span>',value:"NULL",label:t.localize("NULL")},{prefix:'<span class="smart-icon smart-icon-not-null"></span>',value:"NOT_NULL",label:t.localize("NOT_NULL")}],e&&t._items.forEach(((e,a)=>{const n=e.children[1],l=e.children[3];0===a?n.innerHTML=t.localize("where"):1===a?(n.dataSource=[{value:"and",label:t.localize("and")},{value:"or",label:t.localize("or")}],n.value=t.localize(t.operator)):n.innerHTML=t.localize(t.operator),"string"!==e.dataType||e.options?"enum"===e.dataType||e.options?l.dataSource=t._enumConditions:"boolean"===e.dataType?l.dataSource=t._booleanConditions:"date"===e.dataType?l.dataSource=t._dateConditions:l.dataSource=t._numberAndDateConditions:l.dataSource=t._stringConditions,l.value=l.condition?t.localize(l.condition):""}))}_setFocusable(e){const t=this,a=t.disabled||t.unfocusable?-1:0;if(t.$.addFilterButton.tabIndex=a,t.$.buttonsContainer.firstElementChild.tabIndex=a,t.$.buttonsContainer.children[1].tabIndex=a,e){const e=Array.from(t.$.itemsContainer.getElementsByClassName("smart-grid-panel-item-close-button")),n=Array.from(t.$.itemsContainer.querySelectorAll("smart-date-time-picker, smart-numeric-text-box, smart-check-box, smart-input"));e.forEach((e=>e.tabIndex=a)),n.forEach((e=>e.unfocusable=t.disabled||t.unfocusable))}}}),Smart("smart-grid-ai-panel",class extends Smart.BaseElement{static get properties(){return{closeButtonPosition:{value:"left",allowedValues:["left","right"],type:"string"},dataSource:{value:[],type:"array",reflectToAttribute:!1},editorCallback:{value:null,type:"function?",reflectToAttribute:!1},editorPlaceholder:{value:"Value",type:"string"},messages:{value:{en:{addFilter:"+ Add filter",addAIFilter:"✨︎ Ask AI",and:"And",apply:"Ok",cancel:"Cancel",CONTAINS:"contains",CONTAINS_CASE_SENSITIVE:"contains (case sensitive)",DOES_NOT_CONTAIN:"does not contain",DOES_NOT_CONTAIN_CASE_SENSITIVE:"does not contain (case sensitive)",EMPTY:"empty",ENDS_WITH:"ends with",ENDS_WITH_CASE_SENSITIVE:"ends with (case sensitive)",EQUAL:"equal",EQUAL_CASE_SENSITIVE:"equal (case sensitive)",GREATER_THAN:"greater than",GREATER_THAN_OR_EQUAL:"greater than or equal",LESS_THAN:"less than",LESS_THAN_OR_EQUAL:"less than or equal",noFilters:"No filters applied",NOT_EMPTY:"not empty",NOT_EQUAL:"not equal",NOT_NULL:"not null",NULL:"null",or:"Or",STARTS_WITH:"starts with",STARTS_WITH_CASE_SENSITIVE:"starts with (case sensitive)",where:"Where",TOMORROW:"Tomorrow",TODAY:"Today",YESTERDAY:"Yesterday",NEXT_WEEK:"Next week",THIS_WEEK:"This week",LAST_WEEK:"Last week",NEXT_MONTH:"Next month",THIS_MONTH:"This month",LAST_MONTH:"Last month"}},type:"object",extend:!0},operator:{value:"and",allowedValues:["and","or"],type:"string"},value:{value:[],type:"array"}}}static get listeners(){return{change:"_changeHandler",click:"_interactionHandler",keydown:"_interactionHandler"}}static get requires(){return{"Smart.Button":"smart.button.js","Smart.CheckBox":"smart.checkbox.js","Smart.DateTimePicker":"smart.datetimepicker.js","Smart.FilterGroup":"smart.filter.js","Smart.Input":"smart.input.js","Smart.NumericTextBox":"smart.numerictextbox.js"}}static get styleUrls(){return["smart.grid.anel.css"]}template(){return'<div id="container" role="presentation">\n                    <div id="itemsContainer" class="smart-filter-panel-items-container smart-unselectable"></div>\n                    <textarea style="width: 360px;" autocomplete="off" spellcheck="false"  class="smart-prompt-textarea smart-input" id="aiPrompt"></textarea>\n                    <div id="suggestions"></div>\n                    <span class="smart-small smart-quiet smart-hidden" id="spinner" style="margin-bottom: 5px;"></span>\n                    </div>\n                    <div id="footer" class="smart-grid-panel-container-footer" role="presentation">\n                        <div class="smart-filter-panel-add-filter-buttons-container smart-flex">\n                            <div id="addFilterButton" class="smart-filter-panel-add-filter-button smart-unselectable" role="button"></div>\n                            <div id="addAIFilterButton" class="smart-visibility-hidden  smart-hidden smart-filter-panel-add-filter-button smart-unselectable" role="button"></div>\n                        </div>\n                        <div id="buttonsContainer" class="smart-grid-panel-buttons-container smart-unselectable" role="presentation">\n                            <span class="smart-grid-panel-cancel-button" role="button"></span>\n                            <span class="smart-grid-panel-apply-button primary" role="button"></span>\n                        </div>\n                    </div>\n                </div>'}ready(){super.ready()}render(){const e=this;e.setAttribute("role","dialog"),e._setFocusable(),e._localize(),e._applyValue(),e.$.addFilterButton.onmouseenter=()=>{e.$.addFilterButton.style.opacity=.8},e.$.addFilterButton.onmouseleave=()=>{e.$.addFilterButton.style.opacity=1},super.render()}propertyChangedHandler(e,t,a){super.propertyChangedHandler(e,t,a);const n=this;switch(e){case"animation":case"theme":case"rightToLeft":Array.from(n.$.itemsContainer.querySelectorAll("smart-date-time-picker, smart-numeric-text-box, smart-check-box, smart-input")).forEach((t=>{t[e]=a,"smart-input"===t.tagName.toLowerCase()&&"rightToLeft"===e&&"none"!==t.dropDownButtonPosition&&(t.dropDownButtonPosition=a?"left":"right")}));break;case"disabled":case"unfocusable":n._setFocusable(!0);break;case"dataSource":case"value":n._applyValue();break;case"editorPlaceholder":Array.from(n.$.itemsContainer.getElementsByClassName("editor")).forEach((e=>e.placeholder=a));break;case"locale":case"messages":n._localize(!0);break;case"operator":n._setOperator()}}_setOperator(){const e=this,t=e.localize(e.operator);for(let a=2;a<e._items.length;a++)e._items[a].children[1].innerHTML=t}_changeHandler(e){const t=this.shadowRoot||this.isInShadowDOM?e.composedPath()[0]:e.target;t instanceof Smart.Input!=0&&t.parentElement.children}_interactionHandler(e){const t=this;t.disabled||t.readonly||"keydown"===e.type&&"Enter"!==e.key||(t.shadowRoot||t.isInShadowDOM?e.composedPath()[0]:e.target)!==t.$.buttonsContainer.firstElementChild||t.$.fireEvent("cancel")}_applyValue(){}_localize(e){const t=this;t.$.addFilterButton.innerHTML=t.localize("addFilter"),t.$.addAIFilterButton.innerHTML=t.localize("addAIFilter"),t.$.buttonsContainer.firstElementChild.innerHTML=t.localize("cancel"),t.$.buttonsContainer.children[1].innerHTML=t.localize("apply"),t.$.itemsContainer.setAttribute("no-filters",t.localize("noFilters"))}_setFocusable(e){const t=this,a=t.disabled||t.unfocusable?-1:0;t.$.addFilterButton.tabIndex=a,t.$.buttonsContainer.firstElementChild.tabIndex=a,t.$.buttonsContainer.children[1].tabIndex=a,e&&Array.from(t.$.itemsContainer.getElementsByClassName("smart-grid-panel-item-close-button")).forEach((e=>e.tabIndex=a))}}),Smart("smart-column-panel",class extends Smart.BaseElement{static get properties(){return{dataSource:{value:[],type:"array",reflectToAttribute:!1},messages:{value:{en:{apply:"Ok",cancel:"Cancel",find:"Find a field",reset:"Reset",noResults:"No results"}},type:"object",extend:!0}}}static get listeners(){return{click:"_interactionHandler",keydown:"_interactionHandler","find.keyup":"_findKeyupHandler","sortable.dragEnd":"_sortableDragEndHandler"}}static get requires(){return{"Smart.Sortable":"smart.sortable.js"}}static get styleUrls(){return["smart.grid.anel.css"]}template(){return'<div id="container" role="presentation">\n                    <div class="smart-column-panel-find-container" role="search">\n                        <input id="find" readonly="[[readonly]]" role="searchbox" aria-label="Find a field"></input>\n                        <span id="clearButton" class="clear-button smart-hidden" role="button" aria-label="Clear"></span>\n                    </div>\n                    <smart-sortable id="sortable" disable-mode="manual" right-to-left="[[rightToLeft]]" animation="[[animation]]" disabled="[[readonly]]" drag-mode="handle" handle-position="right" handle-visibility="visible" theme="[[theme]]"></smart-sortable>\n                    <div id="footer" class="smart-grid-panel-container-footer" role="presentation">\n                        <span id="reset" class="smart-grid-panel-reset-button" role="button"></span>\n                        <div id="buttonsContainer" class="smart-grid-panel-buttons-container smart-unselectable" role="presentation">\n                            <span class="smart-grid-panel-cancel-button" role="button"></span>\n                            <span class="smart-grid-panel-apply-button primary" role="button"></span>\n                        </div>\n                    </div>\n                </div>'}ready(){super.ready()}render(){const e=this;e.setAttribute("role","dialog"),e._positionChanged=!1,e._localize(),e._moves=[],e._createSortItems(),super.render()}propertyChangedHandler(e,t,a){super.propertyChangedHandler(e,t,a);const n=this;switch(e){case"disabled":case"unfocusable":n._setFocusable();break;case"dataSource":{const e=n.$.sortable.$.container;for(;e.firstChild;)e.removeChild(e.firstChild);n._createSortItems(),n._positionChanged=!1,n.$.find.value="",n._findKeyupHandler(),n.$.clearButton.classList.add("smart-hidden");break}case"locale":case"messages":n._localize()}}_createSortItems(){const e=this,t=document.createDocumentFragment();e._HTMLToSourceMap=new Map,e.dataSource.forEach((a=>t.appendChild(e._createSortItem(a)))),e.$.sortable.$.container.appendChild(t),e.$.sortable.updateItems(),e._setFocusable()}_createSortItem(e){const t=document.createElement("div"),a=this.id+"Label"+e.dataField;return this._HTMLToSourceMap.set(t,e),t.className="smart-grid-panel-item",t.innerHTML=`<div class="toggle-visibility${!1!==e.visible?"":" hidden"}${e.disableToggle?" disable-toggle":""}" role="button" aria-controls="${a}" aria-label="Toggle visibility"></div>\n<span id="${a}" class="smart-column-panel-label smart-unselectable${e.icon?" icon "+e.icon:""}">${e.label}</span>`,1===e.level?t.classList.add("indent"):0===e.level&&t.classList.add("group"),e.disableDrag&&t.setAttribute("disable-drag",""),e.dataField&&t.setAttribute("data-field",e.dataField),e.parentDataField&&t.setAttribute("parent-data-field",e.parentDataField),!1!==e.allowHide&&!0!==e.disableToggle||(t.style.pointerEvents="none",t.setAttribute("disabled",""),t.style.opacity=.8),t}_interactionHandler(e){const t=this;if(t.disabled||t.readonly||"keydown"===e.type&&-1===[" ","Enter"].indexOf(e.key))return;const a=t.shadowRoot||t.isInShadowDOM?e.composedPath()[0]:e.target;if(a.classList.contains("toggle-visibility")){a.classList.toggle("hidden");const e=a.closest(".smart-grid-panel-item");if(e.hasAttribute("data-field")){const n=e.getAttribute("data-field");if(e.hasAttribute("parent-data-field")||e.hasAttribute("disabled")){const a=e.getAttribute("parent-data-field"),n=t.$.sortable.querySelectorAll(".smart-grid-panel-item");let l=null;if(n.forEach((e=>{e.getAttribute("data-field")===a&&(l=e)})),l){let e=0,t=0;n.forEach((n=>{n.getAttribute("parent-data-field")===a&&(e++,n.firstElementChild.classList.contains("hidden")&&t++)})),t===e?l.firstElementChild.classList.add("hidden"):t<e&&l.firstElementChild.classList.remove("hidden")}}else t.$.sortable._items.forEach((e=>{if(e.hasAttribute("parent-data-field")&&!e.hasAttribute("disabled")){const t=e.getAttribute("parent-data-field"),l=e.firstElementChild;t===n&&(a.classList.contains("hidden")?l.classList.add("hidden"):l.classList.remove("hidden"))}}))}}else if(a.parentElement===t.$.buttonsContainer){if(a===t.$.buttonsContainer.firstElementChild)return t.$.fireEvent("cancel"),void(t._moves=[]);if(a===t.$.buttonsContainer.children[1]){const e=[];Array.from(t.$.sortable.$.container.children).forEach((a=>{const n=Object.assign({},t._HTMLToSourceMap.get(a));n.visible=!a.firstElementChild.classList.contains("hidden"),e.push(n)})),t.$.fireEvent("apply",{value:e,positionChanged:t._positionChanged,moves:t._moves}),t._positionChanged=!1,t._moves=[]}}else if(a===t.$.reset){const e=[];Array.from(t.$.sortable.$.container.children).forEach((a=>{const n=Object.assign({},t._HTMLToSourceMap.get(a));n.visible=!0,e.push(n)})),t.$.fireEvent("apply",{value:e,positionChanged:t._positionChanged,moves:t._moves}),t._positionChanged=!1,t._moves=[]}else a.classList.contains("clear-button")&&(t.$.find.value="",t._findKeyupHandler())}_findKeyupHandler(){const e=this;if(e.disabled||e.readonly)return;const t=e.$.find,a=t.value,n=[...e.$.sortable.$.container.children];if(void 0===e._disabledSortable&&(e._disabledSortable=e.$.sortable.disabled),""===a)return t.parentElement.classList.remove("no-results"),e.$.clearButton.classList.add("smart-hidden"),n.forEach((e=>e.classList.remove("smart-hidden"))),e.$.sortable.disabled=e._disabledSortable||e.readonly,void delete e._disabledSortable;let l=!0;e.$.clearButton.classList.remove("smart-hidden"),n.forEach((t=>{-1===e._HTMLToSourceMap.get(t).label.toLowerCase().indexOf(a.toLowerCase())?t.classList.add("smart-hidden"):(t.classList.remove("smart-hidden"),l=!1)})),e.$.sortable.disabled=l,l?t.parentElement.classList.add("no-results"):t.parentElement.classList.remove("no-results")}_sortableDragEndHandler(e){const t=e.detail;this._positionChanged=!0,this._moves.push({oldIndex:t.oldIndex,newIndex:t.newIndex})}_localize(){const e=this;e.$.find.placeholder=e.localize("find"),e.$.reset.innerHTML=e.localize("reset"),e.$.buttonsContainer.firstElementChild.innerHTML=e.localize("cancel"),e.$.buttonsContainer.children[1].innerHTML=e.localize("apply"),e.$.container.firstElementChild.setAttribute("no-results",e.localize("noResults"))}_setFocusable(){const e=this,t=e.disabled||e.unfocusable?-1:0,a=Array.from(e.$.sortable.getElementsByClassName("toggle-visibility"));e.$.find.tabIndex=t,e.$.clearButton.tabIndex=t,e.$.buttonsContainer.firstElementChild.tabIndex=t,e.$.buttonsContainer.children[1].tabIndex=t,a.forEach((e=>e.tabIndex=e.classList.contains("disable-toggle")?-1:t))}}),Smart("smart-formatting-panel",class extends Smart.BaseElement{static get properties(){return{columns:{value:[],type:"array",reflectToAttribute:!1},dataSource:{value:[],type:"any",reflectToAttribute:!1},items:{value:null,type:"array?",reflectToAttribute:!1},dropDownAppendTo:{value:null,type:"any",reflectToAttribute:!1},messages:{value:{en:{add:"Add condition",all:"All columns",apply:"Ok",between:"Between",cancel:"Cancel",close:"Close",column:"Column:",condition:"Condition:",equal:"Equal To",fontFamily:"Font family:",fontSize:"Font size:",format:"Format:",greaterThan:"Greater Than",highlight:"Highlight",lessThan:"Less Than",notEqual:"Not Equal To",remove:"Remove condition",secondValue:"Second value:",text:"Text",value:"Value:"}},type:"object",extend:!0}}}static get listeners(){return{click:"_interactionHandler",keydown:"_interactionHandler",change:"_changeHandler","popup.change":"_changeHandler","popup.click":"_interactionHandler","popup.keydown":"_interactionHandler","document.down":"_documentDownHandler"}}template(){return'<div id="container" role="presentation">\n                    <div