UNPKG

ag-grid-autocomplete

Version:

Quick implementation of autocompletion into ag-Grid cell using autocompleter package.

2 lines 9.86 kB
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@ag-grid-community/core"));else if("function"==typeof define&&define.amd)define(["@ag-grid-community/core"],t);else{var n="object"==typeof exports?t(require("@ag-grid-community/core")):t(e["@ag-grid-community/core"]);for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}(self,(e=>(()=>{"use strict";var t={104:(e,t,n)=>{n.r(t)},151:t=>{t.exports=e}},n={};function i(e){var o=n[e];if(void 0!==o)return o.exports;var r=n[e]={exports:{}};return t[e](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};i.r(o),i.d(o,{AutocompleteSelectCellEditor:()=>w,default:()=>O});var r=i(151);class s{constructor(){this.version=24}isEnableCellEditingOnBackspace(){return!0}}class c{constructor(e){this.gridOptionsWrapper=e,this.version="function"==typeof this.gridOptionsWrapper.isEnableCellEditingOnBackspace?28:27}isEnableCellEditingOnBackspace(){return this.version<28||this.gridOptionsWrapper.isEnableCellEditingOnBackspace()}}class a{constructor(e){this.gridOptionsService=e,this.version=29}isEnableCellEditingOnBackspace(){return this.gridOptionsService.is("enableCellEditingOnBackspace")}}class u{constructor(e){this.gridOptionsService=e,this.version=31}isEnableCellEditingOnBackspace(){return this.gridOptionsService.get("enableCellEditingOnBackspace")}}function l(e){const t=document.createElement("div");return t.textContent=e,t.className="group",t}function d(e){const t=document.createElement("div");return t.textContent=e.label||"",t}function p(e,t,n,i,o=d,r=l){const s=document.createDocumentFragment(),c=[];let a="#9?$";for(const s of e){if(s.group&&s.group!==a){a=s.group;const e=r(s.group,n);c.push(e)}const e=o(s,n);e.addEventListener("click",(e=>i(s,e))),s===t&&e.classList.add("selected"),c.push(e)}return s.append(...c),s}function f(e){let t=e;return[()=>t,e=>(t=e,t)]}const g="input",h=new Set([38,13,27,39,37,16,17,18,20,91,9]),v=2;function m(e){const[t,n]=f(e.input.ownerDocument||globalThis.document),[i,o]=f([]),[r,s]=f(""),[c,a]=f(void 0),[u,l]=f(0),[d,m]=f(void 0),{strict:y,autoselectfirst:E,onFreeTextSelect:b,minLength:S=v,showOnFocus:w,input:O,className:x,customize:C,emptyMsg:T,render:L,renderGroup:A}=e,k=e.debounceWaitMs||0,D=S,I=document.createElement("div"),M=I.style;I.className=`autocomplete ${x||""}`,M.position="fixed";const N=()=>{l(u()+1)};function B(){const e=d();void 0!==e&&(globalThis.clearTimeout(e),m(void 0))}function P(){return!!I.parentNode}function K(){N(),o([]),s(""),a(void 0),I&&I.remove()}function W(t,n){n.preventDefault(),n.stopPropagation(),e.onSelect(t,O,n),K()}function $(){!function(e){for(;e.firstChild;)e.firstChild.remove()}(I);const e=i(),o=p(e,c(),r(),W,L,A);if(I.append(o),0===e.length&&y){if(!T)return void K();{const e=document.createElement("div");e.className="empty",e.textContent=T,I.append(e),a(void 0)}}n(O.ownerDocument||globalThis.document),I.parentNode||t().body.append(I),function(){if(P()){const e=t();M.height="auto",M.width=`${O.offsetWidth}px`;const n=O.getBoundingClientRect(),i=n.top+O.offsetHeight;let o=e.defaultView.innerHeight-i;o<0&&(o=0),M.top=`${i}px`,M.bottom="",M.left=`${n.left}px`,M.maxHeight=`${o}px`,C&&C(O,n,I,o)}}(),function(){let e=I.querySelector(".selected");if(e){const t=e.previousElementSibling;if(t&&null===t.previousElementSibling&&t.className.includes("group")&&(e=t),e.offsetTop<I.scrollTop)I.scrollTop=e.offsetTop;else{const t=e.offsetTop+e.offsetHeight,n=I.scrollTop+I.offsetHeight;t>n&&(I.scrollTop+=t-n)}}}()}function q(){P()&&$()}function F(){q()}function H(e){e.target===I?e.preventDefault():q()}function j(t){N();const{value:n}=O;n.length>=D||1===t?(B(),m(function(t){const n=u(),i=0===t?k:0,{value:r}=O,c=e=>{u()===n&&e&&(o(e),s(r),a(e.length>0&&E?e[0]:void 0),$())};return globalThis.setTimeout((()=>{e.fetch(r,c,t)}),i)}(t))):K()}function z(e){const t=e.which||e.keyCode||0;h.has(t)||40===t&&P()||j(0)}function G(t){const n=t.which||t.keyCode||0;if(38===n||40===n||27===n||13===n||9===n){if(t.preventDefault(),P()&&t.stopPropagation(),38===n||40===n||27===n)return void(27===n?(e.onSelect(void 0,O,t),K()):function(e){if(P()&&i().length>0){switch(e){case 38:!function(){const e=i(),t=c();if(0!==e.length)if(void 0!==t&&t!==e[0]){for(let n=e.length-1;n>0;n-=1)if(t===e[n]||1===n)return void a(e[n-1])}else a(e.at(-1));else a(void 0)}();break;case 40:!function(){const e=i(),t=c();if(0!==e.length)if(void 0!==t&&t!==e.at(-1)){for(let n=0;n<e.length-1;n+=1)if(t===e[n])return void a(e[n+1])}else a(e[0]);else a(void 0)}()}$()}}(n));13!==n&&9!==n||function(t){const n=c();if(y)e.onSelect(n,O,t);else{const i={label:O.value};if(n)return void e.onSelect(n,O,t);b&&b(i,O),e.onSelect(i,O,t)}K()}(t)}}function V(){w&&j(1)}function R(e){e.preventDefault(),e.stopPropagation(),setTimeout((()=>{t().activeElement!==O&&K()}),200)}return function(){const e=t();O.addEventListener("keydown",G),O.addEventListener(g,z),O.addEventListener("focusout",R),O.addEventListener("focus",V),e.addEventListener("resize",F),e.addEventListener("scroll",H,!0)}(),{destroy:function(){!function(){const e=t();O.removeEventListener("focus",V),O.removeEventListener("keydown",G),O.removeEventListener(g,z),O.removeEventListener("focusout",R),e.removeEventListener("resize",F),e.removeEventListener("scroll",H,!0)}(),B(),K(),N()}}}i(104);const y="Backspace",E="Delete",b=new Set([8,46,13,9,38,40]),S=new Set([y,E,"Enter","Tab","ArrowUp","ArrowDown"]);class w extends r.PopupComponent{static getSelectData(e){return"function"==typeof e.selectData?e.selectData(e):Array.isArray(e.selectData)?e.selectData:[]}static getDefaultAutocompleteSettings(e){return{showOnFocus:!1,render(e,t,n){const i=document.createElement("div"),o=(n??"").replaceAll(/[$()*+.?[\\\]^{|}]/g,String.raw`\$&`),r=new RegExp(o,"gi"),s=document.createElement("span");s.innerHTML=t.label.replace(r,(function(e){return`<strong>${e}</strong>`})),i.append(s);const c=n=>{e.currentItem=t,n.stopPropagation()};return"addManagedListeners"in e?e.addManagedListeners(i,{mousedown:c}):e.addManagedListener(i,"mousedown",c),i},renderGroup(e,t){const n=document.createElement("div");return n.textContent=t,n.className="group",n},className:"ag-cell-editor-autocomplete",minLength:1,emptyMsg:"None",strict:!0,autoselectfirst:!0,onFreeTextSelect(){},onSelect(e,t){e.currentItem=t},fetch:(t,n,i)=>{const o=w.getSelectData(e),r=n.toLowerCase()||t.eInput.value.toLowerCase();i(o.filter((function(e){return e.label.toLowerCase().includes(r)})))},debounceWaitMs:200,customize(e,t,n,i,o){o<100&&(i.style.top="10px",i.style.bottom=`${window.innerHeight-n.bottom+t.offsetHeight}px`,i.style.maxHeight="140px")}}}static suppressKeyboardEvent(e,t=!1,n=!0,i=!1){const{keyCode:o}=e.event,{key:r}=e.event;return!(!e.editing||!(r?S.has(r):b.has(o)))||!(!i||!t||e.editing)&&((r?r===E:46===o)||!n&&(r?r===y:8===o))}static getStartValue(e){const t=e.eventKey,n=e.keyPress;return(t?t===y:8===n)||(t?t===E:46===n)?"":1===e.eventKey?.length?e.eventKey:e.formatValue(e.value)}constructor(){super('<div class="ag-wrapper ag-input-wrapper ag-text-field-input-wrapper ag-cell-editor-autocomplete-wrapper" style="padding: 0 !important;"><input class="ag-input-field-input ag-text-field-input ag-cell-editor-autocomplete-input" type="text"/></div>'),this.focusAfterAttached=!1,this.required=!1,this.backspaceTriggersEdit=!0,this.eInput=this.getGui().querySelector("input"),this.currentItem&&(this.eInput.value=this.currentItem.label||this.currentItem.value)}init(e){this.gridApi=e.api,this.stopEditing=e.stopEditing;const t=w.getDefaultAutocompleteSettings(e);this.focusAfterAttached=e.cellStartedEdit,this.eInput.placeholder=e.placeholder||"",this.eInput.value=w.getStartValue(e);const n={...t,...e.autocomplete};var i;this.autocompleter=m({input:this.eInput,render:(e,t)=>n.render(this,e,t),renderGroup:(e,t)=>n.renderGroup(this,e,t),className:n.className,minLength:n.minLength,emptyMsg:n.emptyMsg,strict:n.strict,autoselectfirst:n.autoselectfirst,showOnFocus:n.showOnFocus,onFreeTextSelect:(e,t)=>n.onFreeTextSelect(this,e,t),onSelect:(e,t,i)=>{const o=n.onSelect(this,e,t);return i instanceof KeyboardEvent||i instanceof i.view.document.defaultView.KeyboardEvent?this.handleTabEvent(i):this.destroy(),o},fetch:(e,t,i)=>n.fetch(this,e,t,i),debounceWaitMs:n.debounceWaitMs,customize:(e,t,i,o)=>n.customize(this,e,t,i,o)}),e.required&&(this.required=!0),this.gridOptionsAdapter="gos"in(i=this)?new u(i.gos):"gridOptionsService"in i?"in"in i.gridOptionsService?new a(i.gridOptionsService):new u(i.gridOptionsService):"gridOptionsWrapper"in i?new c(i.gridOptionsWrapper):new s,e.colDef.suppressKeyboardEvent||(e.colDef.suppressKeyboardEvent=e=>w.suppressKeyboardEvent(e,this.required,this.backspaceTriggersEdit,this.gridOptionsAdapter.version>=28)),this.gridOptionsAdapter.version>=28&&(this.backspaceTriggersEdit=this.gridOptionsAdapter.isEnableCellEditingOnBackspace())}handleTabEvent(e){9===(e.which||e.keyCode||0)&&this.gridApi?e.shiftKey?this.gridApi.tabToPreviousCell():this.gridApi.tabToNextCell():this.destroy()}afterGuiAttached(){if(!this.focusAfterAttached)return;const{eInput:e}=this;e.focus(),e.select();const t=e.value?e.value.length:0;t>0&&e.setSelectionRange(t,t)}focusIn(){this.eInput.focus(),this.eInput.select()}focusOut(){this.eInput.blur(),this.autocompleter.destroy()}destroy(){this.focusOut(),this.stopEditing&&this.stopEditing()}getValue(){return this.currentItem}isCancelAfterEnd(){return!!this.required&&!this.currentItem}isCancelBeforeStart(){return!1}isPopup(){return!1}}const O=w;return o})())); //# sourceMappingURL=index.js.map