@revolist/angular-datagrid
Version:
Angular DataGrid Spreadsheet component with native cell render support
350 lines (341 loc) • 18.4 kB
JavaScript
import { defineCustomElement as defineCustomElement$2 } from '@revolist/revogrid/standalone/revogr-filter-panel.js';
export * from '@revolist/revogrid';
import * as i0 from '@angular/core';
import { EventEmitter, Output, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, inject, Injector } from '@angular/core';
import { fromEvent } from 'rxjs';
import { defineCustomElement as defineCustomElement$1 } from '@revolist/revogrid/standalone/revo-grid.js';
/* eslint-disable */
/* tslint:disable */
const proxyInputs = (Cmp, inputs) => {
const Prototype = Cmp.prototype;
inputs.forEach((item) => {
Object.defineProperty(Prototype, item, {
get() {
return this.el[item];
},
set(val) {
this.z.runOutsideAngular(() => (this.el[item] = val));
},
/**
* In the event that proxyInputs is called
* multiple times re-defining these inputs
* will cause an error to be thrown. As a result
* we set configurable: true to indicate these
* properties can be changed.
*/
configurable: true,
});
});
};
const proxyMethods = (Cmp, methods) => {
const Prototype = Cmp.prototype;
methods.forEach((methodName) => {
Prototype[methodName] = function () {
const args = arguments;
return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
};
});
};
const proxyOutputs = (instance, el, events) => {
events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
};
const defineCustomElement = (tagName, customElement) => {
if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
customElements.define(tagName, customElement);
}
};
// tslint:disable-next-line: only-arrow-functions
function ProxyCmp(opts) {
const decorator = function (cls) {
const { defineCustomElementFn, inputs, methods } = opts;
if (defineCustomElementFn !== undefined) {
defineCustomElementFn();
}
if (inputs) {
proxyInputs(cls, inputs);
}
if (methods) {
proxyMethods(cls, methods);
}
return cls;
};
return decorator;
}
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
let RevoGrid = class RevoGrid {
constructor(c, r, z) {
this.z = z;
this.contentsizechanged = new EventEmitter();
this.beforeedit = new EventEmitter();
this.beforerangeedit = new EventEmitter();
this.afteredit = new EventEmitter();
this.beforeautofill = new EventEmitter();
this.beforerange = new EventEmitter();
this.afterfocus = new EventEmitter();
this.roworderchanged = new EventEmitter();
this.beforesorting = new EventEmitter();
this.beforesourcesortingapply = new EventEmitter();
this.beforesortingapply = new EventEmitter();
this.rowdragstart = new EventEmitter();
this.headerclick = new EventEmitter();
this.beforecellfocus = new EventEmitter();
this.beforefocuslost = new EventEmitter();
this.beforesourceset = new EventEmitter();
this.beforeanysource = new EventEmitter();
this.aftersourceset = new EventEmitter();
this.afteranysource = new EventEmitter();
this.beforecolumnsset = new EventEmitter();
this.beforecolumnapplied = new EventEmitter();
this.aftercolumnsset = new EventEmitter();
this.beforefilterapply = new EventEmitter();
this.beforefiltertrimmed = new EventEmitter();
this.beforetrimmed = new EventEmitter();
this.aftertrimmed = new EventEmitter();
this.viewportscroll = new EventEmitter();
this.beforeexport = new EventEmitter();
this.beforeeditstart = new EventEmitter();
this.aftercolumnresize = new EventEmitter();
this.beforerowdefinition = new EventEmitter();
this.filterconfigchanged = new EventEmitter();
this.sortingconfigchanged = new EventEmitter();
this.rowheaderschanged = new EventEmitter();
this.beforegridrender = new EventEmitter();
this.aftergridrender = new EventEmitter();
this.aftergridinit = new EventEmitter();
this.additionaldatachanged = new EventEmitter();
this.afterthemechanged = new EventEmitter();
this.created = new EventEmitter();
c.detach();
this.el = r.nativeElement;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RevoGrid, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RevoGrid, isStandalone: true, selector: "revo-grid", inputs: { accessible: "accessible", additionalData: "additionalData", applyOnClose: "applyOnClose", autoSizeColumn: "autoSizeColumn", canDrag: "canDrag", canFocus: "canFocus", canMoveColumns: "canMoveColumns", colSize: "colSize", columnTypes: "columnTypes", columns: "columns", disableVirtualX: "disableVirtualX", disableVirtualY: "disableVirtualY", editors: "editors", exporting: "exporting", filter: "filter", focusTemplate: "focusTemplate", frameSize: "frameSize", grouping: "grouping", hideAttribution: "hideAttribution", jobsBeforeRender: "jobsBeforeRender", pinnedBottomSource: "pinnedBottomSource", pinnedTopSource: "pinnedTopSource", plugins: "plugins", range: "range", readonly: "readonly", registerVNode: "registerVNode", resize: "resize", rowClass: "rowClass", rowDefinitions: "rowDefinitions", rowHeaders: "rowHeaders", rowSize: "rowSize", rtl: "rtl", sorting: "sorting", source: "source", stretch: "stretch", theme: "theme", trimmedRows: "trimmedRows", useClipboard: "useClipboard" }, outputs: { contentsizechanged: "contentsizechanged", beforeedit: "beforeedit", beforerangeedit: "beforerangeedit", afteredit: "afteredit", beforeautofill: "beforeautofill", beforerange: "beforerange", afterfocus: "afterfocus", roworderchanged: "roworderchanged", beforesorting: "beforesorting", beforesourcesortingapply: "beforesourcesortingapply", beforesortingapply: "beforesortingapply", rowdragstart: "rowdragstart", headerclick: "headerclick", beforecellfocus: "beforecellfocus", beforefocuslost: "beforefocuslost", beforesourceset: "beforesourceset", beforeanysource: "beforeanysource", aftersourceset: "aftersourceset", afteranysource: "afteranysource", beforecolumnsset: "beforecolumnsset", beforecolumnapplied: "beforecolumnapplied", aftercolumnsset: "aftercolumnsset", beforefilterapply: "beforefilterapply", beforefiltertrimmed: "beforefiltertrimmed", beforetrimmed: "beforetrimmed", aftertrimmed: "aftertrimmed", viewportscroll: "viewportscroll", beforeexport: "beforeexport", beforeeditstart: "beforeeditstart", aftercolumnresize: "aftercolumnresize", beforerowdefinition: "beforerowdefinition", filterconfigchanged: "filterconfigchanged", sortingconfigchanged: "sortingconfigchanged", rowheaderschanged: "rowheaderschanged", beforegridrender: "beforegridrender", aftergridrender: "aftergridrender", aftergridinit: "aftergridinit", additionaldatachanged: "additionaldatachanged", afterthemechanged: "afterthemechanged", created: "created" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
};
RevoGrid = __decorate([
ProxyCmp({
defineCustomElementFn: defineCustomElement$1,
inputs: ['accessible', 'additionalData', 'applyOnClose', 'autoSizeColumn', 'canDrag', 'canFocus', 'canMoveColumns', 'colSize', 'columnTypes', 'columns', 'disableVirtualX', 'disableVirtualY', 'editors', 'exporting', 'filter', 'focusTemplate', 'frameSize', 'grouping', 'hideAttribution', 'jobsBeforeRender', 'pinnedBottomSource', 'pinnedTopSource', 'plugins', 'range', 'readonly', 'registerVNode', 'resize', 'rowClass', 'rowDefinitions', 'rowHeaders', 'rowSize', 'rtl', 'sorting', 'source', 'stretch', 'theme', 'trimmedRows', 'useClipboard'],
methods: ['refresh', 'setDataAt', 'scrollToRow', 'scrollToColumnIndex', 'scrollToColumnProp', 'updateColumns', 'addTrimmed', 'scrollToCoordinate', 'setCellEdit', 'setCellsFocus', 'getSource', 'getVisibleSource', 'getSourceStore', 'getColumnStore', 'updateColumnSorting', 'clearSorting', 'getColumns', 'clearFocus', 'getPlugins', 'getFocused', 'getContentSize', 'getSelectedRange', 'refreshExtraElements', 'getProviders']
})
], RevoGrid);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RevoGrid, decorators: [{
type: Component,
args: [{
selector: 'revo-grid',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['accessible', 'additionalData', 'applyOnClose', 'autoSizeColumn', 'canDrag', 'canFocus', 'canMoveColumns', 'colSize', 'columnTypes', 'columns', 'disableVirtualX', 'disableVirtualY', 'editors', 'exporting', 'filter', 'focusTemplate', 'frameSize', 'grouping', 'hideAttribution', 'jobsBeforeRender', 'pinnedBottomSource', 'pinnedTopSource', 'plugins', 'range', 'readonly', 'registerVNode', 'resize', 'rowClass', 'rowDefinitions', 'rowHeaders', 'rowSize', 'rtl', 'sorting', 'source', 'stretch', 'theme', 'trimmedRows', 'useClipboard'],
outputs: ['contentsizechanged', 'beforeedit', 'beforerangeedit', 'afteredit', 'beforeautofill', 'beforerange', 'afterfocus', 'roworderchanged', 'beforesorting', 'beforesourcesortingapply', 'beforesortingapply', 'rowdragstart', 'headerclick', 'beforecellfocus', 'beforefocuslost', 'beforesourceset', 'beforeanysource', 'aftersourceset', 'afteranysource', 'beforecolumnsset', 'beforecolumnapplied', 'aftercolumnsset', 'beforefilterapply', 'beforefiltertrimmed', 'beforetrimmed', 'aftertrimmed', 'viewportscroll', 'beforeexport', 'beforeeditstart', 'aftercolumnresize', 'beforerowdefinition', 'filterconfigchanged', 'sortingconfigchanged', 'rowheaderschanged', 'beforegridrender', 'aftergridrender', 'aftergridinit', 'additionaldatachanged', 'afterthemechanged', 'created'],
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { contentsizechanged: [{
type: Output
}], beforeedit: [{
type: Output
}], beforerangeedit: [{
type: Output
}], afteredit: [{
type: Output
}], beforeautofill: [{
type: Output
}], beforerange: [{
type: Output
}], afterfocus: [{
type: Output
}], roworderchanged: [{
type: Output
}], beforesorting: [{
type: Output
}], beforesourcesortingapply: [{
type: Output
}], beforesortingapply: [{
type: Output
}], rowdragstart: [{
type: Output
}], headerclick: [{
type: Output
}], beforecellfocus: [{
type: Output
}], beforefocuslost: [{
type: Output
}], beforesourceset: [{
type: Output
}], beforeanysource: [{
type: Output
}], aftersourceset: [{
type: Output
}], afteranysource: [{
type: Output
}], beforecolumnsset: [{
type: Output
}], beforecolumnapplied: [{
type: Output
}], aftercolumnsset: [{
type: Output
}], beforefilterapply: [{
type: Output
}], beforefiltertrimmed: [{
type: Output
}], beforetrimmed: [{
type: Output
}], aftertrimmed: [{
type: Output
}], viewportscroll: [{
type: Output
}], beforeexport: [{
type: Output
}], beforeeditstart: [{
type: Output
}], aftercolumnresize: [{
type: Output
}], beforerowdefinition: [{
type: Output
}], filterconfigchanged: [{
type: Output
}], sortingconfigchanged: [{
type: Output
}], rowheaderschanged: [{
type: Output
}], beforegridrender: [{
type: Output
}], aftergridrender: [{
type: Output
}], aftergridinit: [{
type: Output
}], additionaldatachanged: [{
type: Output
}], afterthemechanged: [{
type: Output
}], created: [{
type: Output
}] } });
/**
* Angular Adapter Function:
* Handles the rendering and lifecycle of Angular components within StencilJS using updated Angular APIs.
*/
function updateProps(el, newProps) {
if (!el.componentRef?.instance) {
return;
}
// Update both ways to ensure it works with different component implementations
el.componentRef.instance.props = newProps;
el.componentRef.setInput('props', newProps);
// Handle ngOnChanges if component implements it
if (el.componentRef.instance.ngOnChanges) {
const previousValue = el.componentRef.instance.props;
const simpleChanges = {
props: {
previousValue,
currentValue: newProps,
firstChange: previousValue === undefined,
isFirstChange: () => previousValue === undefined
}
};
el.componentRef.instance.ngOnChanges(simpleChanges);
}
// Force component to check for updates
el.componentRef.changeDetectorRef.markForCheck();
el.componentRef.changeDetectorRef.detectChanges();
}
function TemplateConstructor(el, AngularComponent, initialProps = {}, injector, lastEl = null) {
if (!el) {
lastEl?.destroy?.(); // Destroy last component if element is null
return null;
}
if (!el.componentRef) {
const applicationRef = injector.get(ApplicationRef);
const environmentInjector = injector.get(EnvironmentInjector);
const componentRef = createComponent(AngularComponent, { environmentInjector });
applicationRef.attachView(componentRef.hostView);
componentRef.instance.props = initialProps;
componentRef.changeDetectorRef.detectChanges();
el.componentRef = componentRef; // Store the component reference
el.appendChild(componentRef.location.nativeElement);
}
else if (el.componentRef.instance) {
updateProps(el, initialProps);
}
// Function to update component props
const update = (newProps) => updateProps(el, newProps);
// Function to destroy the component
const destroy = () => {
el.componentRef?.destroy();
el.componentRef = undefined;
};
return { update, destroy };
}
// Function to create template for Angular component
const Template = (AngularComponent, customProps, injector = inject(Injector)) => {
return (h, p, addition) => {
const props = customProps ? { ...customProps, ...p } : p;
props.addition = addition;
let lastEl = null;
return h('span', {
key: `${p.prop}-${p.rowIndex || 0}`,
ref: (el) => {
lastEl = TemplateConstructor(el, AngularComponent, props, injector, lastEl);
}
});
};
};
class EditorAdapter {
constructor(EditorComponent, injector, column, save, close) {
this.EditorComponent = EditorComponent;
this.injector = injector;
this.column = column;
this.save = save;
this.close = close;
this.element = null;
this.renderedComponent = null;
}
// optional, called after editor rendered
componentDidRender() { }
// optional, called after editor destroyed
disconnectedCallback() {
this.renderedComponent?.destroy();
this.renderedComponent = null;
}
render(h) {
return h('span', {
key: `${this.column.prop}-${this.editCell?.rowIndex || 0}`,
ref: (el) => this.renderedComponent = TemplateConstructor(el, this.EditorComponent, {
...this.editCell,
column: this.column,
save: this.save,
close: this.close,
}, this.injector),
});
}
}
/**
* Create editor constructor.
* This function creates editor constructor by wrapping it with EditorAdapter
* which is responsible for connecting editor with grid.
*/
const Editor = (EditorComponent, injector = inject(Injector)) => {
/**
* Editor constructor wrapper
* @param column column data to which editor is bound
* @param save function to save data
* @param close function to close editor
* @returns editor instance
*/
return function (column, save, close) {
return new EditorAdapter(EditorComponent, injector, column, save, close);
};
};
/*
* Public API Surface of angular-datagrid
*/
// Filter is defined as a standalone component plugin and should be imported here
defineCustomElement$2?.();
/**
* Generated bundle index. Do not edit.
*/
export { Editor, EditorAdapter, RevoGrid, Template, TemplateConstructor };
//# sourceMappingURL=revolist-angular-datagrid.mjs.map