@ag-grid-enterprise/side-bar
Version:
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
9 lines (8 loc) • 18.8 kB
JavaScript
var __defProp=Object.defineProperty,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropNames=Object.getOwnPropertyNames,__hasOwnProp=Object.prototype.hasOwnProperty,__export=(e,t)=>{for(var o in t)__defProp(e,o,{get:t[o],enumerable:!0})},__copyProps=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of __getOwnPropNames(t))!__hasOwnProp.call(e,s)&&s!==o&&__defProp(e,s,{get:()=>t[s],enumerable:!(i=__getOwnPropDesc(t,s))||i.enumerable});return e},__toCommonJS=e=>__copyProps(__defProp({},"__esModule",{value:!0}),e),main_exports={};__export(main_exports,{SideBarModule:()=>SideBarModule,ToolPanelColDefService:()=>ToolPanelColDefService}),module.exports=__toCommonJS(main_exports);var import_core11=require("@ag-grid-community/core"),import_core12=require("@ag-grid-enterprise/core"),import_core2=require("@ag-grid-community/core"),import_core=require("@ag-grid-community/core");function isColGroupDef(e){return!!e&&typeof e.children<"u"}function getId(e){return isColGroupDef(e)?e.groupId:e.colId}function addChildrenToGroup(e,t,o){const i=(r,a)=>{const l=r.children.map(getId),d=(0,import_core._includes)(l,getId(a)),c=(0,import_core._last)(r.children),u=c&&getId(c)!==getId(a);return d&&u};if(!isColGroupDef(e))return!0;const s=e,n=o;if(i(s,n))return s.children.push(n),!0;if(s.groupId===t){const r=s.children.map(getId);if(!(0,import_core._includes)(r,getId(n)))return s.children.push(n),!0}for(let r=s.children.length-1;r>=0&&!addChildrenToGroup(s.children[r],t,o);r--);return!1}function mergeLeafPathTrees(e){const t=(s,n)=>isColGroupDef(s)&&isColGroupDef(n)&&getId(s)===getId(n),o=(s,n)=>{if(!isColGroupDef(n))return s;const r=s,a=n;return a.children&&a.groupId&&addChildrenToGroup(r,a.groupId,a.children[0])||a.children.forEach(l=>o(r,l)),r},i=[];for(let s=1;s<=e.length;s++){const n=e[s-1],r=e[s];t(n,r)?e[s]=o(n,r):i.push(n)}return i}var ToolPanelColDefService=class extends import_core2.BeanStub{constructor(){super(...arguments),this.beanName="toolPanelColDefService"}wireBeans(e){this.columnModel=e.columnModel}createColumnTree(e){const t=[],o=(s,n)=>{if(isColGroupDef(s)){const r=s,a=typeof r.groupId<"u"?r.groupId:r.headerName,l=new import_core2.AgProvidedColumnGroup(r,a,!1,n),d=[];return r.children.forEach(c=>{const u=o(c,n+1);u&&d.push(u)}),l.setChildren(d),l}else{const r=s,a=r.colId?r.colId:r.field,l=this.columnModel.getColDefCol(a);return l||t.push(r),l}},i=[];return e.forEach(s=>{const n=o(s,0);n&&i.push(n)}),t.length>0&&(0,import_core2._warnOnce)("unable to find grid columns for the supplied colDef(s):",t),i}syncLayoutWithGrid(e){const t=this.getLeafPathTrees(),o=mergeLeafPathTrees(t);e(o)}getLeafPathTrees(){const e=(i,s)=>{let n;if((0,import_core2.isProvidedColumnGroup)(i))if(i.isPadding())n=s;else{const a=Object.assign({},i.getColGroupDef());a.groupId=i.getGroupId(),a.children=[s],n=a}else{const a=Object.assign({},i.getColDef());a.colId=i.getColId(),n=a}const r=i.getOriginalParent();return r?e(r,n):n};return this.columnModel.getCols().filter(i=>{const s=i.getColDef();return i.isPrimary()&&!s.showRowGroup}).map(i=>e(i,i.getColDef()))}},import_core3=require("@ag-grid-community/core");function isSideBarVisible(e){return e.sideBarService?.getSideBarComp().isDisplayed()??!1}function setSideBarVisible(e,t){e.sideBarService?.getSideBarComp().setDisplayed(t)}function setSideBarPosition(e,t){e.sideBarService?.getSideBarComp().setSideBarPosition(t)}function openToolPanel(e,t){e.sideBarService?.getSideBarComp().openToolPanel(t,"api")}function closeToolPanel(e){e.sideBarService?.getSideBarComp().close("api")}function getOpenedToolPanel(e){return e.sideBarService?.getSideBarComp().openedItem()??null}function refreshToolPanel(e){e.sideBarService?.getSideBarComp().refresh()}function isToolPanelShowing(e){return e.sideBarService?.getSideBarComp().isToolPanelShowing()??!1}function getToolPanelInstance(e,t){const o=e.sideBarService?.getSideBarComp().getToolPanelInstance(t);return(0,import_core3._unwrapUserComp)(o)}function getSideBar(e){return e.sideBarService?.getSideBarComp().getDef()}var import_core10=require("@ag-grid-community/core"),import_core9=require("@ag-grid-community/core"),import_core5=require("@ag-grid-community/core"),import_core4=require("@ag-grid-community/core"),SideBarButtonComp=class extends import_core4.Component{constructor(e){super(),this.eToggleButton=import_core4.RefPlaceholder,this.eIconWrapper=import_core4.RefPlaceholder,this.eLabel=import_core4.RefPlaceholder,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",(0,import_core4._createIconNoSpan)(this.toolPanelDef.iconKey,this.gos))}onButtonPressed(){this.dispatchLocalEvent({type:"toggleButtonClicked"})}setSelected(e){this.addOrRemoveCssClass("ag-selected",e),(0,import_core4._setAriaExpanded)(this.eToggleButton,e)}getButtonElement(){return this.eToggleButton}},AgSideBarButtons=class extends import_core5.Component{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!==import_core5.KeyCode.TAB||!e.shiftKey)){if(this.focusService.focusNextGridCoreContainer(!0)){e.preventDefault();return}(0,import_core5._stopPropagationForAgGrid)(e)}}setActiveButton(e){this.buttonComps.forEach(t=>{t.setSelected(e===t.getToolPanelId())})}addButtonComp(e){const t=this.createBean(new SideBarButtonComp(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),(0,import_core5._clearElement)(this.getGui()),super.destroy()}destroy(){this.clearButtons(),super.destroy()}},AgSideBarButtonsSelector={selector:"AG-SIDE-BAR-BUTTONS",component:AgSideBarButtons},import_core6=require("@ag-grid-community/core"),DEFAULT_COLUMN_COMP={id:"columns",labelDefault:"Columns",labelKey:"columns",iconKey:"columns",toolPanel:"agColumnsToolPanel"},DEFAULT_FILTER_COMP={id:"filters",labelDefault:"Filters",labelKey:"filters",iconKey:"filter",toolPanel:"agFiltersToolPanel"},DEFAULT_BY_KEY={columns:DEFAULT_COLUMN_COMP,filters:DEFAULT_FILTER_COMP};function parseSideBarDef(e){if(!e)return;if(e===!0)return{toolPanels:[DEFAULT_COLUMN_COMP,DEFAULT_FILTER_COMP],defaultToolPanel:"columns"};if(typeof e=="string")return parseSideBarDef([e]);if(Array.isArray(e)){const o=[];return e.forEach(i=>{const s=DEFAULT_BY_KEY[i];if(!s){logMissingKey(i);return}o.push(s)}),o.length===0?void 0:{toolPanels:o,defaultToolPanel:o[0].id}}return{toolPanels:parseComponents(e.toolPanels),defaultToolPanel:e.defaultToolPanel,hiddenByDefault:e.hiddenByDefault,position:e.position}}function logMissingKey(e){(0,import_core6._warnOnce)(`the key ${e} is not a valid key for specifying a tool panel, valid keys are: ${Object.keys(DEFAULT_BY_KEY).join(",")}`)}function parseComponents(e){const t=[];return e&&e.forEach(o=>{let i=null;if(typeof o=="string"){const s=DEFAULT_BY_KEY[o];if(!s){logMissingKey(o);return}i=s}else i=o;t.push(i)}),t}var import_core8=require("@ag-grid-community/core"),import_core7=require("@ag-grid-community/core"),AgHorizontalResize=class extends import_core7.Component{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 i=Math.max(this.minWidth,Math.floor(this.startingWidth-e*o));this.maxWidth!=null&&(i=Math.min(this.maxWidth,i)),this.elementToResize.style.width=`${i}px`,this.dispatchResizeEvent(!1,t,i)}setInverted(e){this.inverted=e}setMaxWidth(e){this.maxWidth=e}setMinWidth(e){e!=null?this.minWidth=e:this.minWidth=100}},ToolPanelWrapper=class extends import_core8.Component{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 AgHorizontalResize);e.setAttribute("id",`ag-${this.getCompId()}`),t.setElementToResize(e),this.appendChild(t)}getToolPanelId(){return this.toolPanelId}setToolPanelDef(e,t){const{id:o,minWidth:i,maxWidth:s,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){(0,import_core8._warnOnce)(`error processing tool panel component ${o}. You need to specify 'toolPanel'`);return}a.then(this.setToolPanelComponent.bind(this)),i!=null&&this.resizeBar.setMinWidth(i),s!=null&&this.resizeBar.setMaxWidth(s)}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",i=t?o:!o;this.resizeBar.setInverted(i)}refresh(){this.toolPanelCompInstance?.refresh(this.params)}},AgSideBar=class extends import_core9.Component{constructor(){super(`<div class="ag-side-bar ag-unselectable">
<ag-side-bar-buttons data-ref="sideBarButtons"></ag-side-bar-buttons>
</div>`,[AgSideBarButtonsSelector]),this.sideBarButtons=import_core9.RefPlaceholder,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:parseSideBarDef(this.gos.get("sideBar")),sideBarState:e}),this.addManagedPropertyListener("sideBar",this.onSideBarUpdated.bind(this)),this.sideBarService.registerSideBarComp(this);const t=this.getFocusableElement();this.createManagedBean(new import_core9.ManagedFocusFeature(t,{onTabKeyDown:this.onTabKeyDown.bind(this),handleKeyDown:this.handleKeyDown.bind(this)})),(0,import_core9._addFocusableContainerListener)(this,t,this.focusService)}onTabKeyDown(e){if(e.defaultPrevented)return;const{focusService:t,sideBarButtons:o}=this,i=this.getGui(),s=o.getGui(),n=(0,import_core9._getActiveDomElement)(this.gos),r=i.querySelector(".ag-tool-panel-wrapper:not(.ag-hidden)"),a=e.target;if(!r)return t.focusNextGridCoreContainer(e.shiftKey,!0);if(s.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=s.querySelector(".ag-selected button")),l&&l!==e.target&&(e.preventDefault(),l.focus())}handleKeyDown(e){const t=(0,import_core9._getActiveDomElement)(this.gos);if(!this.sideBarButtons.getGui().contains(t))return;const o=this.sideBarButtons.getGui(),i=Array.prototype.slice.call(o.querySelectorAll(".ag-side-button")),s=i.findIndex(a=>a.contains(t));let n=null;switch(e.key){case import_core9.KeyCode.LEFT:case import_core9.KeyCode.UP:n=Math.max(0,s-1);break;case import_core9.KeyCode.RIGHT:case import_core9.KeyCode.DOWN:n=Math.min(s+1,i.length-1);break}if(n===null)return;const r=i[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 i=this.sideBar.toolPanels;if(this.createToolPanelsAndSideButtons(i,t,o),!this.toolPanelWrappers.length)return;const s=t?t.visible:!this.sideBar.hiddenByDefault;if(this.setDisplayed(s),this.setSideBarPosition(t?t.position:this.sideBar.position),s)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(i=>{i.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 i of e)this.createToolPanelAndSideButton(i,t?.toolPanels?.[i.id],o?.[i.id])}validateDef(e){if(e.id==null)return(0,import_core9._warnOnce)("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(import_core9.ModuleNames.ColumnsToolPanelModule,"Column Tool Panel"))return!1;if(e.toolPanel==="agFiltersToolPanel"){if(!this.gos.assertModuleRegistered(import_core9.ModuleNames.FiltersToolPanelModule,"Filters Tool Panel"))return!1;if(this.filterManager?.isAdvancedFilterEnabled())return(0,import_core9._warnOnce)("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 i=this.sideBarButtons.addButtonComp(e);let s;o?s=o:(s=this.createBean(new ToolPanelWrapper),s.setToolPanelDef(e,{initialState:t,onStateUpdated:()=>this.dispatchSideBarUpdated()})),s.setDisplayed(!1);const n=s.getGui();this.appendChild(n),this.toolPanelWrappers.push(s),(0,import_core9._setAriaControls)(i.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 i=this.openedItem();o!==i&&(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){(0,import_core9._warnOnce)(`unable to lookup Tool Panel as invalid key supplied: ${e}`);return}return t.getToolPanelInstance()}raiseToolPanelVisibleEvent(e,t,o){const i=!!e&&!!t;t&&this.eventService.dispatchEvent({type:"toolPanelVisibleChanged",source:o,key:t,visible:!1,switchingToolPanel:i}),e&&this.eventService.dispatchEvent({type:"toolPanelVisibleChanged",source:o,key:e,visible:!0,switchingToolPanel:i})}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=parseSideBarDef(this.gos.get("sideBar")),t={};e&&this.sideBar&&e.toolPanels?.forEach(o=>{const{id:i}=o;if(!i)return;const s=this.sideBar.toolPanels?.find(l=>l.id===i);if(!s||o.toolPanel!==s.toolPanel)return;const n=this.toolPanelWrappers.find(l=>l.getToolPanelId()===i);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),(0,import_core9._removeFromParent)(n.getGui()),t[i]=n)}),this.clearDownUi(),this.setSideBarDef({sideBarDef:e,existingToolPanelWrappers:t})}dispatchSideBarUpdated(){this.eventService.dispatchEvent({type:"sideBarUpdated"})}destroyToolPanelWrappers(){this.toolPanelWrappers.forEach(e=>{(0,import_core9._removeFromParent)(e.getGui()),this.destroyBean(e)}),this.toolPanelWrappers.length=0}destroy(){this.destroyToolPanelWrappers(),super.destroy()}},AgSideBarSelector={selector:"AG-SIDE-BAR",component:AgSideBar},SideBarService=class extends import_core10.BeanStub{constructor(){super(...arguments),this.beanName="sideBarService"}registerSideBarComp(e){this.sideBarComp=e}getSideBarComp(){return this.sideBarComp}getSideBarSelector(){return AgSideBarSelector}},VERSION="32.3.5",SideBarCoreModule=(0,import_core11._defineModule)({version:VERSION,moduleName:`${import_core11.ModuleNames.SideBarModule}-core`,beans:[ToolPanelColDefService,SideBarService],dependantModules:[import_core12.EnterpriseCoreModule]}),SideBarApiModule=(0,import_core11._defineModule)({version:VERSION,moduleName:`${import_core11.ModuleNames.SideBarModule}-api`,apiFunctions:{isSideBarVisible,setSideBarVisible,setSideBarPosition,openToolPanel,closeToolPanel,getOpenedToolPanel,refreshToolPanel,isToolPanelShowing,getToolPanelInstance,getSideBar},dependantModules:[SideBarCoreModule]}),SideBarModule=(0,import_core11._defineModule)({version:VERSION,moduleName:import_core11.ModuleNames.SideBarModule,dependantModules:[SideBarCoreModule,SideBarApiModule]});