@revolist/angular-datagrid
Version:
Angular DataGrid Spreadsheet component with native cell render support
231 lines (222 loc) • 12.3 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 { Component, ChangeDetectionStrategy, 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;
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['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']);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", 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", sorting: "sorting", source: "source", stretch: "stretch", theme: "theme", trimmedRows: "trimmedRows", useClipboard: "useClipboard" }, 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', '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']
})
], RevoGrid);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", 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', 'sorting', 'source', 'stretch', 'theme', 'trimmedRows', 'useClipboard'],
standalone: true
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
/**
* 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