{
"name": "ag-grid-modules",
"description": "NOTE: This package.json file is solely used by Plunker to look up type definitions.",
"dependencies": {
"@angular/core": "^13",
"@ag-grid-community/angular": "^27.0.0",
"@ag-grid-community/core": "^27.0.0",
"@ag-grid-community/client-side-row-model": "^27.0.0",
"@ag-grid-community/infinite-row-model": "^27.0.0",
"@ag-grid-community/csv-export": "^27.0.0",
"@ag-grid-enterprise/core": "^27.0.0",
"@ag-grid-enterprise/charts": "^27.0.0",
"@ag-grid-enterprise/sparklines": "^27.0.0",
"@ag-grid-enterprise/clipboard": "^27.0.0",
"@ag-grid-enterprise/column-tool-panel": "^27.0.0",
"@ag-grid-enterprise/excel-export": "^27.0.0",
"@ag-grid-enterprise/filter-tool-panel": "^27.0.0",
"@ag-grid-enterprise/master-detail": "^27.0.0",
"@ag-grid-enterprise/menu": "^27.0.0",
"@ag-grid-enterprise/range-selection": "^27.0.0",
"@ag-grid-enterprise/rich-select": "^27.0.0",
"@ag-grid-enterprise/row-grouping": "^27.0.0",
"@ag-grid-enterprise/server-side-row-model": "^27.0.0",
"@ag-grid-enterprise/set-filter": "^27.0.0",
"@ag-grid-enterprise/multi-filter": "^27.0.0",
"@ag-grid-enterprise/side-bar": "^27.0.0",
"@ag-grid-enterprise/status-bar": "^27.0.0",
"@ag-grid-enterprise/viewport-row-model": "^27.0.0",
"@progress/kendo-angular-common": "^3.1.0",
"@progress/kendo-angular-pdf-export": "^4.0.0",
"@progress/kendo-drawing": "^1.16.3",
"@progress/kendo-licensing": "^1.2.2",
"@progress/kendo-theme-material": "^5.5.0"
}
}
import { ColDef, GridReadyEvent } from '@ag-grid-community/core';
import '@ag-grid-community/styles/ag-grid.css';
import '@ag-grid-community/styles/ag-theme-alpine.css';
import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import { AgGridAngular, AgGridColumn } from '@ag-grid-community/angular';
import { PDFExportComponent } from '@progress/kendo-angular-pdf-export';
import { pdf, exportPDF, Group } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';
@Component({
selector: 'my-app',
template: `<div class="rn__search-toolbar-export--button">
<button mat-raised-button color="primary" (click)="onExportPdf()">
Export to PDF
</button>
</div>
<kendo-pdf-export
#pdf
paperSize="A4"
margin="0.5cm"
class="rn__list--ag-grid"
>
<ag-grid-angular
style="width: 100%; height: 49%;"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
[rowHeight]="rowHeight"
[defaultColDef]="defaultColDef"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
</kendo-pdf-export>`,
})
export class AppComponent {
@ViewChild('agGrid', { static: false }) agGrid: AgGridAngular | undefined;
@ViewChild('pdf', { static: false }) pdf: PDFExportComponent | undefined;
public columnDefs: ColDef[] = [
{
field: 'latinText',
width: 350,
wrapText: true,
cellRenderer: function (params: { value: any }) {
return params.value;
},
},
{ field: 'athlete' },
{ field: 'country' },
{ field: 'date' },
{ field: 'sport' },
{ field: 'gold' },
{ field: 'silver' },
{ field: 'bronze' },
{ field: 'total' },
];
public rowHeight = 15;
public defaultColDef: ColDef = {
width: 170,
sortable: true,
editable: true,
resizable: true,
filter: true,
autoHeight: true,
};
public rowData!: any[];
constructor(private http: HttpClient) {}
onGridReady(params: GridReadyEvent) {
var self = this;
this.http
.get<any[]>('https://www.ag-grid.com/example-assets/olympic-winners.json')
.subscribe((data) => {
data.splice(50);
for (var dataItem of data) {
dataItem.latinText = self.getLatinText();
}
this.rowData = data;
});
}
getText() {
// var latinText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
// var latinText = 'Lorem ipsum dolor sit amet, consectetur adipiscin.';
var size = Math.floor(Math.random() * 200) + 19;
// var text = '<SPAN STYLE="font-size:' + size + '%">here the text changes size to 150%,</SPAN>';
var text =
'<div STYLE="font-size:' + size + '%">textsize to ' + size + '%,</div>';
return text;
}
getLatinText() {
var result = this.getText();
// var count = Math.floor(Math.random() * 100);
// var count = this.randn_bm(0, 100, 2);
var count = this.randomBands();
console.log('count: ' + count);
for (var i = 0; i < count; i++) {
result += this.getText();
}
return result;
}
randn_bm(min, max, skew) {
let u = 0,
v = 0;
while (u === 0) u = Math.random(); //Converting [0,1) to (0,1)
while (v === 0) v = Math.random();
let num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
num = num / 10.0 + 0.5; // Translate to 0 -> 1
if (num > 1 || num < 0) num = this.randn_bm(min, max, skew);
// resample between 0 and 1 if out of range
else {
num = Math.pow(num, skew); // Skew
num *= max - min; // Stretch to fill range
num += min; // offset to min
}
return Math.floor(num);
}
randomBands() {
var band = Math.floor(Math.random() * 5) + 1;
var count = Math.floor(Math.random() * (band * 10 - 3));
return count;
}
onExportPdf() {
console.log('**** PDF Export clicked.');
this.agGrid.api.setDomLayout('print');
this.agGrid.api.flushAllAnimationFrames();
// call export after a time out so that print layout loads properly
setTimeout(() => {
const scrollWidth = window.document.getElementsByTagName('body')[0]
.scrollWidth;
this.pdf.scale = 820 / scrollWidth;
// this.pdf.scale = 0.30;
this.pdf.landscape = true;
this.pdf.export().then((group: Group) => {
// const options = <pdf.PDFOptions>{ paperSize: 'A4', landscape: true, margin: "0.5cm" };
const options = <pdf.PDFOptions>{};
exportPDF(group, options).then((data) => {
saveAs(data, 'creditResearch.pdf');
this.agGrid.api.setDomLayout();
});
});
}, 1000);
}
}
import { AgGridModule } from '@ag-grid-community/angular';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { ModuleRegistry } from '@ag-grid-community/core';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// Register the required feature modules with the Grid
ModuleRegistry.registerModules([ClientSideRowModelModule]);
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
AgGridModule.withComponents([]),
PDFExportModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
// Angular entry point file
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from 'app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
module.exports.translate = function(load) {
if (load.source.indexOf('moduleId') != -1) return load;
var url = document.createElement('a');
url.href = load.address;
var basePathParts = url.pathname.split('/');
basePathParts.pop();
var basePath = basePathParts.join('/');
var baseHref = document.createElement('a');
baseHref.href = this.baseURL;
baseHref = baseHref.pathname;
if (!baseHref.startsWith('/base/')) { // it is not karma
basePath = basePath.replace(baseHref, '');
}
load.source = load.source
.replace(templateUrlRegex, function(match, quote, url) {
var resolvedUrl = url;
if (url.startsWith('.')) {
resolvedUrl = basePath + url.substr(1);
}
return 'templateUrl: "' + resolvedUrl + '"';
})
.replace(stylesRegex, function(match, relativeUrls) {
var urls = [];
while ((match = stringRegex.exec(relativeUrls)) !== null) {
if (match[2].startsWith('.')) {
urls.push('"' + basePath + match[2].substr(1) + '"');
} else {
urls.push('"' + match[2] + '"');
}
}
return "styleUrls: [" + urls.join(', ') + "]";
});
return load;
};
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js from the angular tutorial - https://angular.io/tutorial)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
var ANGULAR_VERSION = "13.3.5";
var ANGULAR_CDK_VERSION = "13.3.5";
var ANGULAR_MATERIAL_VERSION = "13.3.5";
function assign() {
var result = {};
for (var i = 0, len = arguments.length; i < len; i++) {
var arg = arguments[i];
for (var prop in arg) {
result[prop] = arg[prop];
}
}
return result;
}
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: "ts",
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
target: "es5",
module: "system", //gets rid of console warning
moduleResolution: "node",
sourceMap: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
lib: ["es2015", "dom"],
noImplicitAny: true,
suppressImplicitAnyIndexErrors: true
},
meta: {
typescript: {
exports: "ts"
},
'*.css': { loader: 'css' }
},
paths:
assign(
{
// paths serve as alias
"npm:": "https://unpkg.com/",
}, systemJsPaths)
,
// RxJS makes a lot of requests to unpkg. This guy addressed it:
// https://github.com/OasisDigital/rxjs-system-bundle.
bundles: {
"npm:rxjs-system-bundle@6.3.3/Rx.system.min.js": [
"rxjs",
"rxjs/*",
"rxjs/operator/*",
"rxjs/operators/*",
"rxjs/observable/*",
"rxjs/scheduler/*",
"rxjs/symbol/*",
"rxjs/add/operator/*",
"rxjs/add/observable/*",
"rxjs/util/*"
]
},
// map tells the System loader where to look for things
map: assign(
{
// Angular bundles in System.register format via esm-bundle
// Cell renderers only work with the esm-bundle version
// TemplateUrls only works with platform-browser-dynamic from esm-bundle
'@angular/compiler': 'npm:@esm-bundle/angular__compiler@' + ANGULAR_VERSION + '/system/es2015/ivy/angular-compiler.min.js',
'@angular/platform-browser-dynamic': 'npm:@esm-bundle/angular__platform-browser-dynamic@' + ANGULAR_VERSION + '/system/es2015/ivy/angular-platform-browser-dynamic.min.js',
'@angular/core': 'npm:@angular/core@' + ANGULAR_VERSION + '/fesm2015/core.mjs',
'@angular/common': 'npm:@angular/common@' + ANGULAR_VERSION + '/fesm2015/common.mjs',
'@angular/common/http': 'npm:@angular/common@' + ANGULAR_VERSION + '/fesm2015/http.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/fesm2015/platform-browser.mjs',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser@' + ANGULAR_VERSION + '/fesm2015/animations.mjs',
'@angular/forms': 'npm:@angular/forms@' + ANGULAR_VERSION + '/fesm2015/forms.mjs',
'@angular/router': 'npm:@angular/router@' + ANGULAR_VERSION + '/fesm2015/router.mjs',
'@angular/animations': 'npm:@angular/animations@' + ANGULAR_VERSION + '/fesm2015/animations.mjs',
'@angular/animations/browser': 'npm:@angular/animations@' + ANGULAR_VERSION + '/fesm2015/browser.mjs',
// material design
"@angular/material/core": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/core.mjs",
"@angular/material/card": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/card.mjs",
"@angular/material/radio": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/radio.mjs",
"@angular/material/card": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/card.mjs",
"@angular/material/slider": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/slider.mjs",
"@angular/material/select": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/select.mjs",
"@angular/material/progress-spinner": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/progress-spinner.mjs",
"@angular/material/input": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/input.mjs",
"@angular/material/icon": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/icon.mjs",
"@angular/material/form-field": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/form-field.mjs",
"@angular/material/checkbox": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/checkbox.mjs",
"@angular/material/button-toggle": "npm:@angular/material@" + ANGULAR_MATERIAL_VERSION + "/fesm2015/button-toggle.mjs",
"@angular/cdk": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/cdk.mjs",
"@angular/cdk/platform": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/platform.mjs",
"@angular/cdk/bidi": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/bidi.mjs",
"@angular/cdk/coercion": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/coercion.mjs",
"@angular/cdk/keycodes": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/keycodes.mjs",
"@angular/cdk/a11y": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/a11y.mjs",
"@angular/cdk/overlay": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/overlay.mjs",
"@angular/cdk/portal": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/portal.mjs",
"@angular/cdk/observers": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/observers.mjs",
"@angular/cdk/collections": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/collections.mjs",
"@angular/cdk/scrolling": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/scrolling.mjs",
"@angular/cdk/text-field": "npm:@angular/cdk@" + ANGULAR_CDK_VERSION + "/fesm2015/text-field.mjs",
css: boilerplatePath + "css.js",
// css: 'npm:systemjs-plugin-css@0.1.37/css.js',
ts: "npm:plugin-typescript@8.0.0/lib/plugin.js",
tslib: "npm:tslib@2.3.1/tslib.js",
typescript: "npm:typescript@3.7.7/lib/typescript.js",
// our app is within the app folder, appLocation comes from index.html
app: appLocation + "app",
},
systemJsMap
),
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: "./main.ts",
defaultExtension: "ts",
meta: {
"./*.ts": {
loader: boilerplatePath + "systemjs-angular-loader.js"
}
}
},
'ag-grid-angular': {
main: './fesm2015/ag-grid-angular.js',
defaultExtension: 'js'
},
'ag-grid-community': {
main: './dist/ag-grid-community.cjs.min.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './dist/ag-grid-enterprise.cjs.min.js',
defaultExtension: 'js'
},
"@ag-grid-community/angular": {
main: "./fesm2015/ag-grid-community-angular.js",
defaultExtension: "js"
},
rxjs: {
defaultExtension: false
}
}
});
})(this);
if (typeof window !== 'undefined') {
var waitSeconds = 100;
var head = document.getElementsByTagName('head')[0];
var isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/);
var webkitLoadCheck = function (link, callback) {
setTimeout(function () {
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if (sheet.href == link.href)
return callback();
}
webkitLoadCheck(link, callback);
}, 10);
};
var cssIsReloadable = function cssIsReloadable(links) {
// Css loaded on the page initially should be skipped by the first
// systemjs load, and marked for reload
var reloadable = true;
forEach(links, function (link) {
if (!link.hasAttribute('data-systemjs-css')) {
reloadable = false;
link.setAttribute('data-systemjs-css', '');
}
});
return reloadable;
}
var findExistingCSS = function findExistingCSS(url) {
// Search for existing link to reload
var links = head.getElementsByTagName('link')
return filter(links, function (link) {
return link.href === url;
});
}
var noop = function () {
};
var loadCSS = function (url, existingLinks) {
const stylesUrl = url.includes("styles.css") || url.includes("style.css");
return new Promise((outerResolve, outerReject) => {
setTimeout(() => {
new Promise(function (resolve, reject) {
var timeout = setTimeout(function () {
reject('Unable to load CSS');
}, waitSeconds * 1000);
var _callback = function (error) {
clearTimeout(timeout);
link.onload = link.onerror = noop;
setTimeout(function () {
if (error) {
reject(error);
outerReject(error)
} else {
resolve('');
outerResolve('');
}
}, 7);
};
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
link.setAttribute('data-systemjs-css', '');
if (!isWebkit) {
link.onload = function () {
_callback();
}
} else {
webkitLoadCheck(link, _callback);
}
link.onerror = function (event) {
_callback(event.error || new Error('Error loading CSS file.'));
};
if (existingLinks.length)
head.insertBefore(link, existingLinks[0]);
else
head.appendChild(link);
})
// Remove the old link regardless of loading outcome
.then(function (result) {
forEach(existingLinks, function (link) {
link.parentElement.removeChild(link);
})
return result;
}, function (err) {
forEach(existingLinks, function (link) {
link.parentElement.removeChild(link);
})
throw err;
})
}, stylesUrl ? 5 : 0)
})
};
exports.fetch = function (load) {
// dont reload styles loaded in the head
var links = findExistingCSS(load.address);
if (!cssIsReloadable(links))
return '';
return loadCSS(load.address, links);
};
} else {
var builderPromise;
function getBuilder(loader) {
if (builderPromise)
return builderPromise;
return builderPromise = System['import']('./css-plugin-base.js', module.id)
.then(function (CSSPluginBase) {
return new CSSPluginBase(function compile(source, address) {
return {
css: source,
map: null,
moduleSource: null,
moduleFormat: null
};
});
});
}
exports.cssPlugin = true;
exports.fetch = function (load, fetch) {
if (!this.builder)
return '';
return fetch(load);
};
exports.translate = function (load, opts) {
if (!this.builder)
return '';
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.translate.call(loader, load, opts);
});
};
exports.instantiate = function (load, opts) {
if (!this.builder)
return;
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.instantiate.call(loader, load, opts);
});
};
exports.bundle = function (loads, compileOpts, outputOpts) {
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.bundle.call(loader, loads, compileOpts, outputOpts);
});
};
exports.listAssets = function (loads, opts) {
var loader = this;
return getBuilder(loader).then(function (builder) {
return builder.listAssets.call(loader, loads, opts);
});
};
}
// Because IE8?
function filter(arrayLike, func) {
var arr = []
forEach(arrayLike, function (item) {
if (func(item))
arr.push(item);
});
return arr;
}
// Because IE8?
function forEach(arrayLike, func) {
for (var i = 0; i < arrayLike.length; i++) {
func(arrayLike[i])
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular example</title>
<meta charSet="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style media="only screen">
html, body, #app {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
</head>
<body>
<div id="app">
<my-app>Loading Angular example…</my-app>
</div>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://unpkg.com/core-js-bundle@3.6.5/minified.js">
</script>
<script src="https://unpkg.com/zone.js@0.11.2/dist/zone.min.js">
</script>
<script>
var appLocation = './';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/angular": "https://unpkg.com/@ag-grid-community/angular@28.0.0/",
"@ag-grid-community/styles": "https://unpkg.com/@ag-grid-community/styles@28.0.0/",
"ag-grid-angular": "https://unpkg.com/ag-grid-angular@28.0.0/",
"ag-grid-community": "https://unpkg.com/ag-grid-community@28.0.0/",
"ag-grid-enterprise": "https://unpkg.com/ag-grid-enterprise@28.0.0/"
};
var systemJsPaths = {
"@ag-grid-community/client-side-row-model": "https://unpkg.com/@ag-grid-community/client-side-row-model@28.0.0/dist/client-side-row-model.cjs.min.js",
"@ag-grid-community/core": "https://unpkg.com/@ag-grid-community/core@28.0.0/dist/core.cjs.min.js",
"@ag-grid-community/csv-export": "https://unpkg.com/@ag-grid-community/csv-export@28.0.0/dist/csv-export.cjs.min.js",
"@ag-grid-community/infinite-row-model": "https://unpkg.com/@ag-grid-community/infinite-row-model@28.0.0/dist/infinite-row-model.cjs.min.js"
};
</script>
<script src="https://unpkg.com/systemjs@0.21.6/dist/system.js">
</script>
<script src="systemjs.config.js">
</script>
<script>System.import('main.ts').catch(function(err) { console.error(err); });</script>
</body>
</html>