@ng-zi/extensions-ag-grid
Version:
AgGrid Extension for Ag-grid
341 lines (333 loc) • 19.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, Input, HostBinding, NgModule, Injectable, NgZone } from '@angular/core';
import { NgIf, CommonModule } from '@angular/common';
import * as i1 from 'ag-grid-angular';
import { AgGridAngular, AngularFrameworkOverrides as AngularFrameworkOverrides$1, AngularFrameworkComponentWrapper as AngularFrameworkComponentWrapper$1, AgGridModule } from 'ag-grid-angular';
import { LicenseManager } from 'ag-grid-enterprise';
export { ColumnsToolPanelModule, FiltersToolPanelModule, MenuModule, RowGroupingModule, SetFilterModule } from 'ag-grid-enterprise';
import { BaseComponentWrapper, VanillaFrameworkOverrides, PropertyKeys } from 'ag-grid-community';
export { ClientSideRowModelModule, ModuleRegistry, createGrid } from 'ag-grid-community';
import { _values, _includes, _iterateObject } from '@ag-grid-community/core';
LicenseManager.setLicenseKey('Using_this_{AG_Grid}_Enterprise_key_{AG-073130}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{K12insight_LLC}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{k12insight}_only_for_{1}_Front-End_JavaScript_developer___All_Front-End_JavaScript_developers_working_on_{k12insight}_need_to_be_licensed___{k12insight}_has_been_granted_a_Deployment_License_Add-on_for_{1}_Production_Environment___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{9_December_2025}____[v3]_[01]_MTc2NTIzODQwMDAwMA==4e14752e9a31fc44065379e196e84403');
class MtxAgGrid extends AgGridAngular {
constructor(elementDef, viewContainerRef, angularFrameworkOverrides, frameworkComponentWrapper) {
super(elementDef, viewContainerRef, angularFrameworkOverrides, frameworkComponentWrapper);
this.gridElement = elementDef;
}
ngOnInit() { }
ngOnChanges(changes) {
if (changes['gridHeight']) {
this.componentHeight = this.normalizeDimension(this.gridHeight);
}
if (changes['gridWidth']) {
this.componentWidth = this.normalizeDimension(this.gridWidth);
}
}
normalizeDimension(value) {
if (typeof value === 'number') {
return `${value}px`;
}
return value ? value.toString() : '';
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MtxAgGrid, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.AngularFrameworkOverrides }, { token: i1.AngularFrameworkComponentWrapper }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MtxAgGrid, isStandalone: true, selector: "mtx-ag-grid", inputs: { gridHeight: "gridHeight", gridWidth: "gridWidth" }, host: { attributes: { "role": "data-grid" }, properties: { "style.height": "this.componentHeight", "style.width": "this.componentWidth" }, classAttribute: "mtx-ag-grid" }, providers: [AngularFrameworkOverrides$1, AngularFrameworkComponentWrapper$1, NgIf], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: ["@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-grid.min.css\";@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-material.min.css\";@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-quartz.css\";@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-alpine.min.css\";@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-balham.min.css\";.mtx-ag-grid{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: AgGridModule }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MtxAgGrid, decorators: [{
type: Component,
args: [{ selector: 'mtx-ag-grid', standalone: true, template: '', imports: [AgGridModule], providers: [AngularFrameworkOverrides$1, AngularFrameworkComponentWrapper$1, NgIf], encapsulation: ViewEncapsulation.None, host: {
class: 'mtx-ag-grid',
role: 'data-grid',
}, styles: ["@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-grid.min.css\";@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-material.min.css\";@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-quartz.css\";@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-alpine.min.css\";@import\"https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-balham.min.css\";.mtx-ag-grid{display:block;width:100%;height:100%}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.AngularFrameworkOverrides }, { type: i1.AngularFrameworkComponentWrapper }], propDecorators: { gridHeight: [{
type: Input
}], gridWidth: [{
type: Input
}], componentHeight: [{
type: HostBinding,
args: ['style.height']
}], componentWidth: [{
type: HostBinding,
args: ['style.width']
}] } });
class MtxAgGridModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MtxAgGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MtxAgGridModule, imports: [CommonModule,
AgGridModule,
MtxAgGrid], exports: [MtxAgGrid] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MtxAgGridModule, providers: [
AngularFrameworkOverrides$1,
AngularFrameworkComponentWrapper$1
], imports: [CommonModule,
AgGridModule,
MtxAgGrid] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MtxAgGridModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
AgGridModule,
MtxAgGrid
],
exports: [MtxAgGrid],
providers: [
AngularFrameworkOverrides$1,
AngularFrameworkComponentWrapper$1
]
}]
}] });
class AngularFrameworkComponentWrapper extends BaseComponentWrapper {
setViewContainerRef(viewContainerRef, angularFrameworkOverrides) {
this.viewContainerRef = viewContainerRef;
this.angularFrameworkOverrides = angularFrameworkOverrides;
}
createWrapper(OriginalConstructor, compType) {
let angularFrameworkOverrides = this.angularFrameworkOverrides;
let that = this;
class DynamicAgNg2Component extends BaseGuiComponent {
init(params) {
angularFrameworkOverrides.runInsideAngular(() => {
super.init(params);
this._componentRef.changeDetectorRef.detectChanges();
});
}
createComponent() {
return angularFrameworkOverrides.runInsideAngular(() => that.createComponent(OriginalConstructor));
}
hasMethod(name) {
return wrapper.getFrameworkComponentInstance()[name] != null;
}
callMethod(name, args) {
const componentRef = this.getFrameworkComponentInstance();
return angularFrameworkOverrides.runInsideAngular(() => wrapper.getFrameworkComponentInstance()[name].apply(componentRef, args));
}
addMethod(name, callback) {
wrapper[name] = callback;
}
}
let wrapper = new DynamicAgNg2Component();
return wrapper;
}
createComponent(componentType) {
return this.viewContainerRef.createComponent(componentType);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularFrameworkComponentWrapper, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularFrameworkComponentWrapper }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularFrameworkComponentWrapper, decorators: [{
type: Injectable
}] });
class BaseGuiComponent {
init(params) {
this._params = params;
this._componentRef = this.createComponent();
this._agAwareComponent = this._componentRef.instance;
this._frameworkComponentInstance = this._componentRef.instance;
this._eGui = this._componentRef.location.nativeElement;
this._agAwareComponent.agInit(this._params);
}
getGui() {
return this._eGui;
}
/** `getGui()` returns the `ng-component` element. This returns the actual root element. */
getRootElement() {
const firstChild = this._eGui.firstChild;
return firstChild;
}
destroy() {
if (this._frameworkComponentInstance && typeof this._frameworkComponentInstance.destroy === 'function') {
this._frameworkComponentInstance.destroy();
}
if (this._componentRef) {
this._componentRef.destroy();
}
}
getFrameworkComponentInstance() {
return this._frameworkComponentInstance;
}
}
class AngularFrameworkOverrides extends VanillaFrameworkOverrides {
constructor(_ngZone) {
super('angular');
this._ngZone = _ngZone;
// Flag used to control Zone behaviour when running tests as many test features rely on Zone.
this.isRunningWithinTestZone = false;
// Make all events run outside Angular as they often trigger the setup of event listeners
// By having the event listeners outside Angular we can avoid triggering change detection
// This also means that if a user calls an AG Grid API method from within their component
// the internal side effects will not trigger change detection. Without this the events would
// run inside Angular and trigger change detection as the source of the event was within the angular zone.
this.wrapIncoming = (callback, source) => this.runOutside(callback, source);
/**
* Make sure that any code that is executed outside of AG Grid is running within the Angular zone.
* This means users can update templates and use binding without having to do anything extra.
*/
this.wrapOutgoing = (callback) => this.runInsideAngular(callback);
this.isRunningWithinTestZone = window?.AG_GRID_UNDER_TEST ?? !!(window?.Zone?.AsyncTestZoneSpec);
if (!this._ngZone) {
this.runOutside = (callback) => callback();
}
else if (this.isRunningWithinTestZone) {
this.runOutside = (callback, source) => {
if (source === 'resize-observer') {
// ensure resize observer callbacks are run outside of Angular even under test due to Jest not supporting ResizeObserver
// which means it just loops continuously with a setTimeout with no way to flush the queue or have fixture.whenStable() resolve.
return this._ngZone.runOutsideAngular(callback);
}
// When under test run inside Angular so that tests can use fixture.whenStable() to wait for async operations to complete.
return callback();
};
}
else {
this.runOutside = (callback) => this._ngZone.runOutsideAngular(callback);
}
}
// Only setup wrapping when the call is coming from within Angular zone, i.e from a users application code.
// Used to distinguish between user code and AG Grid code setting up events against RowNodes and Columns
get shouldWrapOutgoing() {
return this._ngZone && NgZone.isInAngularZone();
}
isFrameworkComponent(comp) {
if (!comp) {
return false;
}
const prototype = comp.prototype;
const isAngularComp = prototype && 'agInit' in prototype;
return isAngularComp;
}
runInsideAngular(callback) {
// Check for _ngZone existence as it is not present when Zoneless
return this._ngZone ? this._ngZone.run(callback) : callback();
}
runOutsideAngular(callback, source) {
return this.runOutside(callback, source);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularFrameworkOverrides, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularFrameworkOverrides }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AngularFrameworkOverrides, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i0.NgZone }] });
class Events {
}
class ComponentUtil {
// all events
static { this.EVENTS = _values(new Events()); }
static { this.VUE_OMITTED_PROPERTY = 'AG-VUE-OMITTED-PROPERTY'; }
// events that are internal to AG Grid and should not be exposed to users via documentation or generated framework components
/** Exclude the following internal events from code generation to prevent exposing these events via framework components */
static { this.EXCLUDED_INTERNAL_EVENTS = [
Events.EVENT_SCROLLBAR_WIDTH_CHANGED,
Events.EVENT_CHECKBOX_CHANGED,
Events.EVENT_HEIGHT_SCALE_CHANGED,
Events.EVENT_BODY_HEIGHT_CHANGED,
Events.EVENT_COLUMN_CONTAINER_WIDTH_CHANGED,
Events.EVENT_DISPLAYED_COLUMNS_WIDTH_CHANGED,
Events.EVENT_SCROLL_VISIBILITY_CHANGED,
Events.EVENT_COLUMN_HOVER_CHANGED,
Events.EVENT_FLASH_CELLS,
Events.EVENT_PAGINATION_PIXEL_OFFSET_CHANGED,
Events.EVENT_DISPLAYED_ROWS_CHANGED,
Events.EVENT_LEFT_PINNED_WIDTH_CHANGED,
Events.EVENT_RIGHT_PINNED_WIDTH_CHANGED,
Events.EVENT_ROW_CONTAINER_HEIGHT_CHANGED,
Events.EVENT_POPUP_TO_FRONT,
Events.EVENT_STORE_UPDATED,
Events.EVENT_COLUMN_PANEL_ITEM_DRAG_START,
Events.EVENT_COLUMN_PANEL_ITEM_DRAG_END,
Events.EVENT_FILL_START,
Events.EVENT_FILL_END,
Events.EVENT_KEY_SHORTCUT_CHANGED_CELL_START,
Events.EVENT_KEY_SHORTCUT_CHANGED_CELL_END,
Events.EVENT_FULL_WIDTH_ROW_FOCUSED,
Events.EVENT_HEADER_HEIGHT_CHANGED,
Events.EVENT_COLUMN_HEADER_HEIGHT_CHANGED,
Events.EVENT_CELL_FOCUS_CLEARED,
Events.EVENT_GRID_STYLES_CHANGED,
Events.EVENT_FILTER_DESTROYED,
Events.EVENT_ROW_DATA_UPDATE_STARTED,
Events.EVENT_ADVANCED_FILTER_ENABLED_CHANGED,
Events.EVENT_DATA_TYPES_INFERRED,
Events.EVENT_FIELD_VALUE_CHANGED,
Events.EVENT_FIELD_PICKER_VALUE_SELECTED,
Events.EVENT_SUPPRESS_COLUMN_MOVE_CHANGED,
Events.EVENT_SUPPRESS_MENU_HIDE_CHANGED,
Events.EVENT_SUPPRESS_FIELD_DOT_NOTATION,
Events.EVENT_ROW_COUNT_READY,
Events.EVENT_SIDE_BAR_UPDATED,
]; }
// events that are available for use by users of AG Grid and so should be documented
/** EVENTS that should be exposed via code generation for the framework components. */
static { this.PUBLIC_EVENTS = ComponentUtil.EVENTS.filter(e => !_includes(ComponentUtil.EXCLUDED_INTERNAL_EVENTS, e)); }
static getCallbackForEvent(eventName) {
if (!eventName || eventName.length < 2) {
return eventName;
}
return 'on' + eventName[0].toUpperCase() + eventName.substring(1);
}
// onXXX methods, based on the above events
static { this.EVENT_CALLBACKS = ComponentUtil.EVENTS.map(event => ComponentUtil.getCallbackForEvent(event)); }
static { this.STRING_PROPERTIES = PropertyKeys.STRING_PROPERTIES; }
static { this.OBJECT_PROPERTIES = PropertyKeys.OBJECT_PROPERTIES; }
static { this.ARRAY_PROPERTIES = PropertyKeys.ARRAY_PROPERTIES; }
static { this.NUMBER_PROPERTIES = PropertyKeys.NUMBER_PROPERTIES; }
static { this.BOOLEAN_PROPERTIES = PropertyKeys.BOOLEAN_PROPERTIES; }
static { this.FUNCTION_PROPERTIES = PropertyKeys.FUNCTION_PROPERTIES; }
static { this.ALL_PROPERTIES = PropertyKeys.ALL_PROPERTIES; }
static { this.ALL_PROPERTIES_AND_CALLBACKS = [...this.ALL_PROPERTIES, ...this.EVENT_CALLBACKS]; }
static { this.ALL_PROPERTIES_AND_CALLBACKS_SET = new Set(ComponentUtil.ALL_PROPERTIES_AND_CALLBACKS); }
static getGridOptionKeys() {
// Vue does not have keys in prod so instead need to run through all the
// gridOptions checking for presence of a gridOption key.
return this.ALL_PROPERTIES_AND_CALLBACKS;
}
/** Combines component props / attributes with the provided gridOptions returning a new combined gridOptions object */
static combineAttributesAndGridOptions(gridOptions, component) {
// create empty grid options if none were passed
if (typeof gridOptions !== 'object') {
gridOptions = {};
}
// shallow copy (so we don't change the provided object)
const mergedOptions = { ...gridOptions };
const keys = ComponentUtil.getGridOptionKeys();
// Loop through component props, if they are not undefined and a valid gridOption copy to gridOptions
keys.forEach(key => {
const value = component[key];
if (typeof value !== 'undefined' && value !== ComponentUtil.VUE_OMITTED_PROPERTY) {
mergedOptions[key] = value;
}
});
return mergedOptions;
}
static processOnChange(changes, api) {
if (!changes) {
return;
}
// Only process changes to properties that are part of the gridOptions
const gridChanges = {};
let hasChanges = false;
Object.keys(changes)
.filter((key) => ComponentUtil.ALL_PROPERTIES_AND_CALLBACKS_SET.has(key))
.forEach((key) => {
gridChanges[key] = changes[key];
hasChanges = true;
});
if (!hasChanges) {
return;
}
api.updateGridOptions(gridChanges);
// copy gridChanges into an event for dispatch
const event = {
type: Events.EVENT_COMPONENT_STATE_CHANGED
};
_iterateObject(gridChanges, (key, value) => {
event[key] = value;
});
api.dispatchEvent(event);
}
}
/**
* Generated bundle index. Do not edit.
*/
export { AngularFrameworkComponentWrapper, AngularFrameworkOverrides, ComponentUtil, Events, MtxAgGrid, MtxAgGridModule };
//# sourceMappingURL=mtxAgGrid.mjs.map