@ag-grid-enterprise/side-bar
Version:
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
9 lines (8 loc) • 16.4 kB
JavaScript
import{ModuleNames as g,_defineModule as m}from"@ag-grid-community/core";import{EnterpriseCoreModule as z}from"@ag-grid-enterprise/core";import{AgProvidedColumnGroup as G,BeanStub as A,_warnOnce as x,isProvidedColumnGroup as F}from"@ag-grid-community/core";import{_includes as T,_last as L}from"@ag-grid-community/core";function c(e){return!!e&&typeof e.children<"u"}function d(e){return c(e)?e.groupId:e.colId}function b(e,t,o){const s=(r,a)=>{const l=r.children.map(d),u=T(l,d(a)),h=L(r.children),p=h&&d(h)!==d(a);return u&&p};if(!c(e))return!0;const i=e,n=o;if(s(i,n))return i.children.push(n),!0;if(i.groupId===t){const r=i.children.map(d);if(!T(r,d(n)))return i.children.push(n),!0}for(let r=i.children.length-1;r>=0&&!b(i.children[r],t,o);r--);return!1}function _(e){const t=(i,n)=>c(i)&&c(n)&&d(i)===d(n),o=(i,n)=>{if(!c(n))return i;const r=i,a=n;return a.children&&a.groupId&&b(r,a.groupId,a.children[0])||a.children.forEach(l=>o(r,l)),r},s=[];for(let i=1;i<=e.length;i++){const n=e[i-1],r=e[i];t(n,r)?e[i]=o(n,r):s.push(n)}return s}var y=class extends A{constructor(){super(...arguments),this.beanName="toolPanelColDefService"}wireBeans(e){this.columnModel=e.columnModel}createColumnTree(e){const t=[],o=(i,n)=>{if(c(i)){const r=i,a=typeof r.groupId<"u"?r.groupId:r.headerName,l=new G(r,a,!1,n),u=[];return r.children.forEach(h=>{const p=o(h,n+1);p&&u.push(p)}),l.setChildren(u),l}else{const r=i,a=r.colId?r.colId:r.field,l=this.columnModel.getColDefCol(a);return l||t.push(r),l}},s=[];return e.forEach(i=>{const n=o(i,0);n&&s.push(n)}),t.length>0&&x("unable to find grid columns for the supplied colDef(s):",t),s}syncLayoutWithGrid(e){const t=this.getLeafPathTrees(),o=_(t);e(o)}getLeafPathTrees(){const e=(s,i)=>{let n;if(F(s))if(s.isPadding())n=i;else{const a=Object.assign({},s.getColGroupDef());a.groupId=s.getGroupId(),a.children=[i],n=a}else{const a=Object.assign({},s.getColDef());a.colId=s.getColId(),n=a}const r=s.getOriginalParent();return r?e(r,n):n};return this.columnModel.getCols().filter(s=>{const i=s.getColDef();return s.isPrimary()&&!i.showRowGroup}).map(s=>e(s,s.getColDef()))}};import{_unwrapUserComp as K}from"@ag-grid-community/core";function O(e){return e.sideBarService?.getSideBarComp().isDisplayed()??!1}function k(e,t){e.sideBarService?.getSideBarComp().setDisplayed(t)}function U(e,t){e.sideBarService?.getSideBarComp().setSideBarPosition(t)}function N(e,t){e.sideBarService?.getSideBarComp().openToolPanel(t,"api")}function $(e){e.sideBarService?.getSideBarComp().close("api")}function V(e){return e.sideBarService?.getSideBarComp().openedItem()??null}function j(e){e.sideBarService?.getSideBarComp().refresh()}function q(e){return e.sideBarService?.getSideBarComp().isToolPanelShowing()??!1}function Y(e,t){const o=e.sideBarService?.getSideBarComp().getToolPanelInstance(t);return K(o)}function H(e){return e.sideBarService?.getSideBarComp().getDef()}import{BeanStub as J}from"@ag-grid-community/core";import{Component as Q,KeyCode as f,ManagedFocusFeature as X,ModuleNames as I,RefPlaceholder as Z,_addFocusableContainerListener as ee,_getActiveDomElement as D,_removeFromParent as E,_setAriaControls as te,_warnOnce as B}from"@ag-grid-community/core";import{Component as se,KeyCode as oe,_clearElement as ie,_stopPropagationForAgGrid as ne}from"@ag-grid-community/core";import{Component as re,RefPlaceholder as P,_createIconNoSpan as ae,_setAriaExpanded as le}from"@ag-grid-community/core";var de=class extends re{constructor(e){super(),this.eToggleButton=P,this.eIconWrapper=P,this.eLabel=P,this.toolPanelDef=e}getToolPanelId(){return this.toolPanelDef.id}postConstruct(){const e=this.createTemplate();this.setTemplate(e,[]),this.setLabel(),this.setIcon(),this.addManagedElementListeners(this.eToggleButton,{click:this.onButtonPressed.bind(this)}),this.eToggleButton.setAttribute("id",`ag-${this.getCompId()}-button`)}createTemplate(){return`<div class="ag-side-button" role="presentation">
<button type="button" data-ref="eToggleButton" tabindex="-1" role="tab" aria-expanded="false" class="ag-button ag-side-button-button">
<div data-ref="eIconWrapper" class="ag-side-button-icon-wrapper" aria-hidden="true"></div>
<span data-ref="eLabel" class="ag-side-button-label"></span>
</button>
</div>`}setLabel(){const e=this.localeService.getLocaleTextFunc(),t=this.toolPanelDef,o=e(t.labelKey,t.labelDefault);this.eLabel.innerText=o}setIcon(){this.eIconWrapper.insertAdjacentElement("afterbegin",ae(this.toolPanelDef.iconKey,this.gos))}onButtonPressed(){this.dispatchLocalEvent({type:"toggleButtonClicked"})}setSelected(e){this.addOrRemoveCssClass("ag-selected",e),le(this.eToggleButton,e)}getButtonElement(){return this.eToggleButton}},ce=class extends se{constructor(){super('<div class="ag-side-buttons" role="tablist"></div>'),this.buttonComps=[]}wireBeans(e){this.focusService=e.focusService,this.visibleColsService=e.visibleColsService}postConstruct(){this.addManagedElementListeners(this.getFocusableElement(),{keydown:this.handleKeyDown.bind(this)})}handleKeyDown(e){if(!(e.key!==oe.TAB||!e.shiftKey)){if(this.focusService.focusNextGridCoreContainer(!0)){e.preventDefault();return}ne(e)}}setActiveButton(e){this.buttonComps.forEach(t=>{t.setSelected(e===t.getToolPanelId())})}addButtonComp(e){const t=this.createBean(new de(e));return this.buttonComps.push(t),this.appendChild(t),t.addEventListener("toggleButtonClicked",()=>{this.dispatchLocalEvent({type:"sideBarButtonClicked",toolPanelId:e.id})}),t}clearButtons(){this.buttonComps=this.destroyBeans(this.buttonComps),ie(this.getGui()),super.destroy()}destroy(){this.clearButtons(),super.destroy()}},ue={selector:"AG-SIDE-BAR-BUTTONS",component:ce};import{_warnOnce as he}from"@ag-grid-community/core";var R={id:"columns",labelDefault:"Columns",labelKey:"columns",iconKey:"columns",toolPanel:"agColumnsToolPanel"},w={id:"filters",labelDefault:"Filters",labelKey:"filters",iconKey:"filter",toolPanel:"agFiltersToolPanel"},v={columns:R,filters:w};function C(e){if(!e)return;if(e===!0)return{toolPanels:[R,w],defaultToolPanel:"columns"};if(typeof e=="string")return C([e]);if(Array.isArray(e)){const o=[];return e.forEach(s=>{const i=v[s];if(!i){M(s);return}o.push(i)}),o.length===0?void 0:{toolPanels:o,defaultToolPanel:o[0].id}}return{toolPanels:pe(e.toolPanels),defaultToolPanel:e.defaultToolPanel,hiddenByDefault:e.hiddenByDefault,position:e.position}}function M(e){he(`the key ${e} is not a valid key for specifying a tool panel, valid keys are: ${Object.keys(v).join(",")}`)}function pe(e){const t=[];return e&&e.forEach(o=>{let s=null;if(typeof o=="string"){const i=v[o];if(!i){M(o);return}s=i}else s=o;t.push(s)}),t}import{Component as fe,_warnOnce as ge}from"@ag-grid-community/core";import{Component as me}from"@ag-grid-community/core";var Be=class extends me{constructor(){super('<div class="ag-tool-panel-horizontal-resize"></div>'),this.minWidth=100,this.maxWidth=null}wireBeans(e){this.horizontalResizeService=e.horizontalResizeService}setElementToResize(e){this.elementToResize=e}postConstruct(){const e=this.horizontalResizeService.addResizeBar({eResizeBar:this.getGui(),dragStartPixels:1,onResizeStart:this.onResizeStart.bind(this),onResizing:this.onResizing.bind(this),onResizeEnd:this.onResizeEnd.bind(this)});this.addDestroyFunc(e),this.setInverted(this.gos.get("enableRtl"))}dispatchResizeEvent(e,t,o){this.eventService.dispatchEvent({type:"toolPanelSizeChanged",width:o,started:e,ended:t})}onResizeStart(){this.startingWidth=this.elementToResize.offsetWidth,this.dispatchResizeEvent(!0,!1,this.startingWidth)}onResizeEnd(e){return this.onResizing(e,!0)}onResizing(e,t=!1){const o=this.inverted?-1:1;let s=Math.max(this.minWidth,Math.floor(this.startingWidth-e*o));this.maxWidth!=null&&(s=Math.min(this.maxWidth,s)),this.elementToResize.style.width=`${s}px`,this.dispatchResizeEvent(!1,t,s)}setInverted(e){this.inverted=e}setMaxWidth(e){this.maxWidth=e}setMinWidth(e){e!=null?this.minWidth=e:this.minWidth=100}},Pe=class extends fe{wireBeans(e){this.userComponentFactory=e.userComponentFactory}constructor(){super('<div class="ag-tool-panel-wrapper" role="tabpanel"/>')}postConstruct(){const e=this.getGui(),t=this.resizeBar=this.createManagedBean(new Be);e.setAttribute("id",`ag-${this.getCompId()}`),t.setElementToResize(e),this.appendChild(t)}getToolPanelId(){return this.toolPanelId}setToolPanelDef(e,t){const{id:o,minWidth:s,maxWidth:i,width:n}=e;this.toolPanelId=o,this.width=n;const r=this.userComponentFactory.getToolPanelCompDetails(e,t),a=r.newAgStackInstance();if(this.params=r.params,a==null){ge(`error processing tool panel component ${o}. You need to specify 'toolPanel'`);return}a.then(this.setToolPanelComponent.bind(this)),s!=null&&this.resizeBar.setMinWidth(s),i!=null&&this.resizeBar.setMaxWidth(i)}setToolPanelComponent(e){this.toolPanelCompInstance=e,this.appendChild(e.getGui()),this.addDestroyFunc(()=>{this.destroyBean(e)}),this.width&&(this.getGui().style.width=`${this.width}px`)}getToolPanelInstance(){return this.toolPanelCompInstance}setResizerSizerSide(e){const t=this.gos.get("enableRtl"),o=e==="left",s=t?o:!o;this.resizeBar.setInverted(s)}refresh(){this.toolPanelCompInstance?.refresh(this.params)}},ve=class extends Q{constructor(){super(`<div class="ag-side-bar ag-unselectable">
<ag-side-bar-buttons data-ref="sideBarButtons"></ag-side-bar-buttons>
</div>`,[ue]),this.sideBarButtons=Z,this.toolPanelWrappers=[]}wireBeans(e){this.focusService=e.focusService,this.filterManager=e.filterManager,this.sideBarService=e.sideBarService}postConstruct(){this.sideBarButtons.addEventListener("sideBarButtonClicked",this.onToolPanelButtonClicked.bind(this));const{sideBar:e}=this.gos.get("initialState")??{};this.setSideBarDef({sideBarDef:C(this.gos.get("sideBar")),sideBarState:e}),this.addManagedPropertyListener("sideBar",this.onSideBarUpdated.bind(this)),this.sideBarService.registerSideBarComp(this);const t=this.getFocusableElement();this.createManagedBean(new X(t,{onTabKeyDown:this.onTabKeyDown.bind(this),handleKeyDown:this.handleKeyDown.bind(this)})),ee(this,t,this.focusService)}onTabKeyDown(e){if(e.defaultPrevented)return;const{focusService:t,sideBarButtons:o}=this,s=this.getGui(),i=o.getGui(),n=D(this.gos),r=s.querySelector(".ag-tool-panel-wrapper:not(.ag-hidden)"),a=e.target;if(!r)return t.focusNextGridCoreContainer(e.shiftKey,!0);if(i.contains(n)){t.focusInto(r,e.shiftKey)&&e.preventDefault();return}if(!e.shiftKey)return;let l=null;r.contains(n)?l=this.focusService.findNextFocusableElement(r,void 0,!0):t.isTargetUnderManagedComponent(r,a)&&e.shiftKey&&(l=this.focusService.findFocusableElementBeforeTabGuard(r,a)),l||(l=i.querySelector(".ag-selected button")),l&&l!==e.target&&(e.preventDefault(),l.focus())}handleKeyDown(e){const t=D(this.gos);if(!this.sideBarButtons.getGui().contains(t))return;const o=this.sideBarButtons.getGui(),s=Array.prototype.slice.call(o.querySelectorAll(".ag-side-button")),i=s.findIndex(a=>a.contains(t));let n=null;switch(e.key){case f.LEFT:case f.UP:n=Math.max(0,i-1);break;case f.RIGHT:case f.DOWN:n=Math.min(i+1,s.length-1);break}if(n===null)return;const r=s[n].querySelector("button");r&&(r.focus(),e.preventDefault())}onToolPanelButtonClicked(e){const t=e.toolPanelId;this.openedItem()===t?this.openToolPanel(void 0,"sideBarButtonClicked"):this.openToolPanel(t,"sideBarButtonClicked")}clearDownUi(){this.sideBarButtons.clearButtons(),this.destroyToolPanelWrappers()}setSideBarDef({sideBarDef:e,sideBarState:t,existingToolPanelWrappers:o}){if(this.setDisplayed(!1),this.sideBar=e,this.sideBar&&this.sideBar.toolPanels){const s=this.sideBar.toolPanels;if(this.createToolPanelsAndSideButtons(s,t,o),!this.toolPanelWrappers.length)return;const i=t?t.visible:!this.sideBar.hiddenByDefault;if(this.setDisplayed(i),this.setSideBarPosition(t?t.position:this.sideBar.position),i)if(t){const{openToolPanel:n}=t;n&&this.openToolPanel(n,"sideBarInitializing")}else this.openToolPanel(this.sideBar.defaultToolPanel,"sideBarInitializing")}}getDef(){return this.sideBar}setSideBarPosition(e){e||(e="right"),this.position=e;const t=e==="left",o=t?"right":"left";return this.addOrRemoveCssClass("ag-side-bar-left",t),this.addOrRemoveCssClass("ag-side-bar-right",!t),this.toolPanelWrappers.forEach(s=>{s.setResizerSizerSide(o)}),this.dispatchSideBarUpdated(),this}setDisplayed(e,t){super.setDisplayed(e,t),this.dispatchSideBarUpdated()}getState(){const e={};return this.toolPanelWrappers.forEach(t=>{e[t.getToolPanelId()]=t.getToolPanelInstance()?.getState?.()}),{visible:this.isDisplayed(),position:this.position,openToolPanel:this.openedItem(),toolPanels:e}}createToolPanelsAndSideButtons(e,t,o){for(const s of e)this.createToolPanelAndSideButton(s,t?.toolPanels?.[s.id],o?.[s.id])}validateDef(e){if(e.id==null)return B("please review all your toolPanel components, it seems like at least one of them doesn't have an id"),!1;if(e.toolPanel==="agColumnsToolPanel"&&!this.gos.assertModuleRegistered(I.ColumnsToolPanelModule,"Column Tool Panel"))return!1;if(e.toolPanel==="agFiltersToolPanel"){if(!this.gos.assertModuleRegistered(I.FiltersToolPanelModule,"Filters Tool Panel"))return!1;if(this.filterManager?.isAdvancedFilterEnabled())return B("Advanced Filter does not work with Filters Tool Panel. Filters Tool Panel has been disabled."),!1}return!0}createToolPanelAndSideButton(e,t,o){if(!this.validateDef(e))return;const s=this.sideBarButtons.addButtonComp(e);let i;o?i=o:(i=this.createBean(new Pe),i.setToolPanelDef(e,{initialState:t,onStateUpdated:()=>this.dispatchSideBarUpdated()})),i.setDisplayed(!1);const n=i.getGui();this.appendChild(n),this.toolPanelWrappers.push(i),te(s.getButtonElement(),n)}refresh(){this.toolPanelWrappers.forEach(e=>e.refresh())}openToolPanel(e,t="api"){const o=this.openedItem();if(o===e)return;this.toolPanelWrappers.forEach(n=>{const r=e===n.getToolPanelId();n.setDisplayed(r)});const s=this.openedItem();o!==s&&(this.sideBarButtons.setActiveButton(e),this.raiseToolPanelVisibleEvent(e,o??void 0,t))}getToolPanelInstance(e){const t=this.toolPanelWrappers.filter(o=>o.getToolPanelId()===e)[0];if(!t){B(`unable to lookup Tool Panel as invalid key supplied: ${e}`);return}return t.getToolPanelInstance()}raiseToolPanelVisibleEvent(e,t,o){const s=!!e&&!!t;t&&this.eventService.dispatchEvent({type:"toolPanelVisibleChanged",source:o,key:t,visible:!1,switchingToolPanel:s}),e&&this.eventService.dispatchEvent({type:"toolPanelVisibleChanged",source:o,key:e,visible:!0,switchingToolPanel:s})}close(e="api"){this.openToolPanel(void 0,e)}isToolPanelShowing(){return!!this.openedItem()}openedItem(){let e=null;return this.toolPanelWrappers.forEach(t=>{t.isDisplayed()&&(e=t.getToolPanelId())}),e}onSideBarUpdated(){const e=C(this.gos.get("sideBar")),t={};e&&this.sideBar&&e.toolPanels?.forEach(o=>{const{id:s}=o;if(!s)return;const i=this.sideBar.toolPanels?.find(l=>l.id===s);if(!i||o.toolPanel!==i.toolPanel)return;const n=this.toolPanelWrappers.find(l=>l.getToolPanelId()===s);if(!n)return;const r=this.gos.addGridCommonParams({...o.toolPanelParams??{},onStateUpdated:()=>this.dispatchSideBarUpdated()});n.getToolPanelInstance()?.refresh(r)===!0&&(this.toolPanelWrappers=this.toolPanelWrappers.filter(l=>l!==n),E(n.getGui()),t[s]=n)}),this.clearDownUi(),this.setSideBarDef({sideBarDef:e,existingToolPanelWrappers:t})}dispatchSideBarUpdated(){this.eventService.dispatchEvent({type:"sideBarUpdated"})}destroyToolPanelWrappers(){this.toolPanelWrappers.forEach(e=>{E(e.getGui()),this.destroyBean(e)}),this.toolPanelWrappers.length=0}destroy(){this.destroyToolPanelWrappers(),super.destroy()}},Ce={selector:"AG-SIDE-BAR",component:ve},Se=class extends J{constructor(){super(...arguments),this.beanName="sideBarService"}registerSideBarComp(e){this.sideBarComp=e}getSideBarComp(){return this.sideBarComp}getSideBarSelector(){return Ce}},S="32.3.5",W=m({version:S,moduleName:`${g.SideBarModule}-core`,beans:[y,Se],dependantModules:[z]}),Te=m({version:S,moduleName:`${g.SideBarModule}-api`,apiFunctions:{isSideBarVisible:O,setSideBarVisible:k,setSideBarPosition:U,openToolPanel:N,closeToolPanel:$,getOpenedToolPanel:V,refreshToolPanel:j,isToolPanelShowing:q,getToolPanelInstance:Y,getSideBar:H},dependantModules:[W]}),be=m({version:S,moduleName:g.SideBarModule,dependantModules:[W,Te]});export{be as SideBarModule,y as ToolPanelColDefService};