@revolist/revogrid/standalone/revogr-filter-panel.js

Virtual reactive data grid spreadsheet component - RevoGrid.

/*!
 * Built by Revolist OU ❤️
 */
import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as r,Host as o,transformTag as s}from"@stencil/core/internal/client";import{d as n}from"./debounce.js";import{i as l,e as a,d}from"./filter.button.js";Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(t){let e=this;do{if(Element.prototype.matches.call(e,t))return e;e=e.parentElement||e.parentNode}while(null!==e&&1===e.nodeType);return null});const c="none",h="add-filter",p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.filterChange=i(this,"filterChange",7),this.resetChange=i(this,"resetChange",7),this.filterCaptionsInternal={title:"Filter by",ok:"Close",save:"Save",reset:"Reset",cancel:"Cancel",add:"Add condition",placeholder:"Enter value...",and:"and",or:"or"},this.isFilterIdSet=!1,this.filterId=0,this.currentFilterId=-1,this.currentFilterType=c,this.filterItems={},this.filterNames={},this.filterEntities={},this.disableDynamicFiltering=!1,this.closeOnOutsideClick=!0,this.debouncedApplyFilter=n((()=>{this.filterChange.emit(this.filterItems)}),400)}onMouseDown(t){if(!this.changes)return;const i=t.composedPath(),r=document.getElementById(h);if(r instanceof HTMLSelectElement){if(i.includes(r))return;r.value=c}this.currentFilterType=c,this.changes&&(this.changes.type=c),this.currentFilterId=-1;const o=!i.includes(this.element);t.target instanceof e&&o&&!l(t.target)&&this.closeOnOutsideClick&&(this.changes=void 0)}async show(t){this.changes=t,this.filterItems=(null==t?void 0:t.filterItems)||{},this.changes&&(this.changes.type=this.changes.type||c)}async getChanges(){return this.changes}componentWillRender(){if(!this.isFilterIdSet){this.isFilterIdSet=!0;const t=Object.keys(this.filterItems);for(const e of t)this.filterId+=this.filterItems[e].length}}getFilterItemsList(){var t,e;const i=null===(t=this.changes)||void 0===t?void 0:t.prop;if(void 0===i)return"";const o=null!==(e=this.filterItems[i])&&void 0!==e?e:[],s=Object.assign(this.filterCaptionsInternal,this.filterCaptions);return r("div",{key:this.filterId},o.map(((t,e)=>{let o;if(!t.hidden)return e!==this.filterItems[i].length-1&&(o=r("div",{onClick:()=>this.toggleFilterAndOr(t.id)},r(a,{text:"and"===t.relation?s.and:s.or}))),r("div",{key:t.id,class:"multi-filter-list"},r("div",{class:{"select-input":!0}},r("select",{class:"select-css select-filter",onChange:t=>this.onFilterTypeChange(t,i,e)},this.renderSelectOptions(this.filterItems[i][e].type,!0)),r("div",{class:"multi-filter-list-action"},o),r("div",{onClick:()=>this.onRemoveFilter(t.id)},r(d,null))),r("div",null,this.renderExtra(i,e)))})),o.filter((t=>!t.hidden)).length>0?r("div",{class:"add-filter-divider"}):"")}autoCorrect(t){var e,i;if(!t)return;const r=t.closest("revo-grid");if(!r)return;const o=t.getBoundingClientRect(),s=r.getBoundingClientRect().right-o.width;o.left>s&&t.offsetLeft&&(t.style.left=s-(null!==(i=null===(e=t.parentElement)||void 0===e?void 0:e.getBoundingClientRect().left)&&void 0!==i?i:0)+"px")}onFilterTypeChange(t,e,i){t.target instanceof HTMLSelectElement&&(this.filterItems[e][i].type=t.target.value,this.filterId++,setTimeout((()=>{const t=document.getElementById("filter-input-"+this.filterItems[e][i].id);t instanceof HTMLInputElement&&t.focus()}),0),this.disableDynamicFiltering||this.debouncedApplyFilter())}onAddNewFilter(t){this.currentFilterType=t.target.value,this.addNewFilterToProp();const e=document.getElementById("add-filter");e&&(e.value=c,this.currentFilterType=c),this.disableDynamicFiltering||this.debouncedApplyFilter()}addNewFilterToProp(){var t;const e=null===(t=this.changes)||void 0===t?void 0:t.prop;(e||0===e)&&(this.filterItems[e]||(this.filterItems[e]=[]),"none"!==this.currentFilterType&&(this.filterId++,this.currentFilterId=this.filterId,this.filterItems[e].push({id:this.currentFilterId,type:this.currentFilterType,value:"",relation:"and"}),setTimeout((()=>{const t=document.getElementById("filter-input-"+this.currentFilterId);t&&t.focus()}),0)))}onSave(){this.filterChange.emit(this.filterItems)}onCancel(){this.changes=void 0}onReset(){var t;this.assertChanges(),this.resetChange.emit(null===(t=this.changes)||void 0===t?void 0:t.prop),this.filterId++}onRemoveFilter(t){var e;this.assertChanges(),this.filterId++;const i=null===(e=this.changes)||void 0===e?void 0:e.prop,r=this.filterItems[null!=i?i:""];if(!r)return;const o=r.findIndex((e=>e.id===t));-1!==o&&(r.splice(o,1),0===r.length&&delete this.filterItems[null!=i?i:""],this.disableDynamicFiltering||this.debouncedApplyFilter())}toggleFilterAndOr(t){var e;this.assertChanges(),this.filterId++;const i=null===(e=this.changes)||void 0===e?void 0:e.prop,r=this.filterItems[null!=i?i:""];if(!r)return;const o=r.findIndex((e=>e.id===t));-1!==o&&(r[o].relation="and"===r[o].relation?"or":"and",this.disableDynamicFiltering||this.debouncedApplyFilter())}assertChanges(){if(!this.changes)throw Error("Changes required per edit")}renderSelectOptions(t,e=!1){if(!this.changes)return;const i=[],o=this.changes.prop,s=new Set;if(Object.entries(this.filterItems).forEach((([t,e])=>{e.forEach((t=>{t.hidden&&s.add(t.type)}))})),!e){const t=Object.assign(this.filterCaptionsInternal,this.filterCaptions);i.push(r("option",{selected:this.currentFilterType===c,value:c},o&&this.filterItems[o]&&this.filterItems[o].length>0?t.add:this.filterNames[c]))}for(let e in this.changes.filterTypes){const o=this.changes.filterTypes[e].filter((t=>!s.has(t)));o.length&&(i.push(...o.map((e=>r("option",{value:e,selected:t===e},this.filterNames[e])))),i.push(r("option",{disabled:!0})))}return i}renderExtra(t,e){const i=this.filterItems[t];if(!i)return"";const o=i=>{this.filterItems[t][e].value=i,this.disableDynamicFiltering||this.debouncedApplyFilter()},s=()=>{const t=document.getElementById("add-filter");t&&(t.value=c,this.currentFilterType=c,this.addNewFilterToProp(),t.focus())},n=Object.assign(this.filterCaptionsInternal,this.filterCaptions),l=this.filterEntities[i[e].type].extra;return"function"==typeof l?l(r,{value:i[e].value,filter:i[e],prop:t,index:e,placeholder:n.placeholder,onInput:t=>{o(t)},onFocus:()=>{s()}}):"input"!==l&&"datepicker"!==l?"":r("input",{id:"filter-input-"+i[e].id,placeholder:n.placeholder,type:"datepicker"===l?"date":"text",value:i[e].value,onInput:t=>{t.target instanceof HTMLInputElement&&o(t.target.value)},onKeyDown:t=>{"enter"!==t.key.toLowerCase()?t.stopPropagation():document.getElementById("add-filter")&&s()}})}render(){var t,e,i;if(!this.changes)return r(o,{style:{display:"none"}});const s={display:"block",left:this.changes.x+"px",top:this.changes.y+"px"},n=Object.assign(this.filterCaptionsInternal,this.filterCaptions);return r(o,{style:s,ref:t=>{var e;!1!==(null===(e=this.changes)||void 0===e?void 0:e.autoCorrect)&&this.autoCorrect(t)}},r("slot",{slot:"header"}),(null===(e=(t=this.changes).extraContent)||void 0===e?void 0:e.call(t,this.changes))||"",!0!==(null===(i=this.changes)||void 0===i?void 0:i.hideDefaultFilters)&&[r("label",null,n.title),r("div",{class:"filter-holder"},this.getFilterItemsList()),r("div",{class:"add-filter"},r("select",{id:h,class:"select-css",onChange:t=>this.onAddNewFilter(t)},this.renderSelectOptions(this.currentFilterType)))],r("slot",null),r("div",{class:"filter-actions"},this.disableDynamicFiltering&&[r("button",{id:"revo-button-save","aria-label":"save",class:"revo-button green",onClick:()=>this.onSave()},n.save),r("button",{id:"revo-button-ok","aria-label":"ok",class:"revo-button green",onClick:()=>this.onCancel()},n.cancel)],!this.disableDynamicFiltering&&[r("button",{id:"revo-button-ok","aria-label":"ok",class:"revo-button green",onClick:()=>this.onCancel()},n.ok),r("button",{id:"revo-button-reset","aria-label":"reset",class:"revo-button outline",onClick:()=>this.onReset()},n.reset)]),r("slot",{slot:"footer"}))}get element(){return this}static get style(){return'.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#4545ff;height:32px;line-height:32px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037}.revo-button.red{background-color:#E0662E}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid #dbdbdb;line-height:30px;background:none;color:#000;box-shadow:none}revo-grid[theme^=dark] .revo-button.outline{border:1px solid #404040;color:#d8d8d8}revogr-filter-panel{position:absolute;display:block;top:0;left:0;z-index:100;max-height:calc(100% - 80px);overflow:auto;opacity:1;transform:none;background-color:var(--revo-grid-filter-panel-bg, #fff);border:1px solid var(--revo-grid-filter-panel-border, #cecece);transform-origin:62px 0px;box-shadow:0 5px 18px -2px var(--revo-grid-filter-panel-shadow, rgba(0, 0, 0, 0.15));padding:10px;border-radius:8px;min-width:220px;text-align:left;animation:revogr-filter-panel-open 140ms cubic-bezier(0.2, 0, 0, 1)}revogr-filter-panel .filter-holder>div{display:flex;flex-direction:column}revogr-filter-panel label{font-size:13px;display:block;padding:8px 0}revogr-filter-panel select{width:100%}revogr-filter-panel input[type=text]{border:0;min-height:34px;margin:5px 0;background:var(--revo-grid-filter-panel-input-bg, #f3f3f3);border-radius:5px;padding:0 10px;box-sizing:border-box;width:100%}revogr-filter-panel .filter-actions{text-align:right;margin-right:-5px}revogr-filter-panel .filter-actions button{margin-top:10px;margin-right:5px}@keyframes revogr-filter-panel-open{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){revogr-filter-panel{animation:none}}.rgHeaderCell:hover .rv-filter{transition:opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.rgHeaderCell:hover .rv-filter,.rgHeaderCell .rv-filter.active{opacity:1}.rgHeaderCell .rv-filter{height:24px;width:24px;background:none;border:0;opacity:0;visibility:visible;cursor:pointer;border-radius:4px}.rgHeaderCell .rv-filter.active{color:#10224a}.rgHeaderCell .rv-filter .filter-img{color:gray;width:11px}.select-css{display:block;font-family:sans-serif;line-height:1.3;padding:0.6em 1.4em 0.5em 0.8em;width:100%;max-width:100%;box-sizing:border-box;margin:0;border:1px solid var(--revo-grid-filter-panel-select-border, #d9d9d9);box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:var(--revo-grid-filter-panel-input-bg, #f3f3f3);background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat, repeat;background-position:right 0.7em top 50%, 0 0;background-size:0.65em auto, 100%;}.select-css::-ms-expand{display:none}.select-css:hover{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.select-css:focus{border-color:var(--revo-grid-filter-panel-select-border-hover, #d9d9d9);box-shadow:0 0 1px 3px rgba(59, 153, 252, 0.7);box-shadow:0 0 0 3px -moz-mac-focusring;outline:none}.select-css option{font-weight:normal}.select-css:disabled,.select-css[aria-disabled=true]{color:gray;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%)}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.multi-filter-list{margin-top:5px;margin-bottom:5px}.multi-filter-list div{white-space:nowrap}.multi-filter-list .multi-filter-list-action{display:flex;justify-content:space-between;align-items:center}.multi-filter-list .and-or-button{margin:0 0 0 10px;min-width:58px;cursor:pointer}.multi-filter-list .trash-button{margin:0 0 -2px 6px;cursor:pointer;width:22px;height:100%;font-size:16px}.multi-filter-list .trash-button .trash-img{width:1em}.add-filter-divider{display:block;margin:0 -10px 10px -10px;border-bottom:1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);height:10px}.select-input{display:flex;justify-content:space-between;align-items:center}'}},[260,"revogr-filter-panel",{filterNames:[16],filterEntities:[16],filterCaptions:[16],disableDynamicFiltering:[4,"disable-dynamic-filtering"],closeOnOutsideClick:[4,"close-on-outside-click"],isFilterIdSet:[32],filterId:[32],currentFilterId:[32],currentFilterType:[32],changes:[32],filterItems:[32],show:[64],getChanges:[64]},[[5,"mousedown","onMouseDown"]]]),u=p,f=function(){"undefined"!=typeof customElements&&["revogr-filter-panel"].forEach((t=>{"revogr-filter-panel"===t&&(customElements.get(s(t))||customElements.define(s(t),p))}))};export{u as RevogrFilterPanel,f as defineCustomElement}