Metro Layout | Data Views | MESCIUS DataViewsJS Angular Demos

This example demonstrates the options you have when using the masonry layout. The Masonry Layout Engine organizes items automatically according to size, but you have options such as order, column and row sizing, gutter width, and more. You can also set grouping strategies which dictate how items are arranged. This demo gives you controls to show you what each option does. These controls are labeled by their JavaScript option names. keepOrder: when set to true, the engine preserves the order of the data. When set to false, the engine optimizes the order. rowHeight: sets the minimum vertical padding between items. gutter: sets the padding between items. columnWidth: sets the minimum horizontal padding between items. This demo also has three buttons, metro, pinterest, and random, that load preset grouping strategies. Metro groups items in a manner that optimizes layout. Pinterest uses a set item width. Random randomizes item size.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/Masonry/MetroLayout/angular/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="masonry, metro, pinterest, pinterest like" />
<meta name="description" content="This example demonstrates the options you have when using the masonry layout." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Metro Layout | Data Views | MESCIUS DataViewsJS Angular Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" />
<link
href="/dataviewsjs/demos/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.masonry.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/angular-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'angular',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/node_modules/lodash/lodash.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="rowTemplate" style="display: none">
<div data-column="block"></div>
</template>
<app-root></app-root>
<script type="text/javascript">
System.import('./app.ts');
</script>
</body>
</html>

<div class="main-container responsive-container" (click)="handleMouseClick($event)">
<div class="mobile-only toggle-options">
<span class="fa fa-cog"></span>
</div>
<gc-dataview id="grid" class="grid main-content" [data]="data" [cols]="cols" [layout]="layout" [options]="options"></gc-dataview>
<div class="sample-options">
<div class="option-row">
<div class="btn-group" role="group">
<button
id="metroData"
class="btn btn-default"
[class.active]="dataset === 'metroData'"
(click)="changeDataSet($event)"
>
{{ locale.metro }}
</button>
<button
id="pinterestData"
class="btn btn-default"
[class.active]="dataset === 'pinterestData'"
(click)="changeDataSet($event)"
>
{{ locale.pinterest }}
</button>
<button
id="randomData"
class="btn btn-default"
[class.active]="dataset === 'randomData'"
(click)="changeDataSet($event)"
>
{{ locale.random }}
</button>
</div>
</div>
<div class="option-row">
<range name="keepOrder" [(ngModel)]="keepOrder" [min]="0" [max]="1" [width]="100"></range>
</div>
<div class="option-row">
<range name="gutter" [(ngModel)]="gutter" [min]="0" [max]="50" [width]="200"></range>
</div>
<div class="option-row">
<range name="rowHeight" [(ngModel)]="rowHeight" [min]="1" [max]="200" [width]="200"></range>
</div>
<div class="option-row">
<range name="columnWidth" [(ngModel)]="columnWidth" [min]="1" [max]="200" [width]="200"></range>
</div>
</div>
</div>

import { Component } from '@angular/core';
import { getControlByElement } from '@grapecity/dataviews.core';
import MasonryLayout from '@grapecity/dataviews.masonry';
import { data } from './data';
import locale from './locale';
export const cols = [
{
id: 'block',
dataField: 'block',
presenter:
'<div class="block" style="width:{{=it.block.width}}px;height:{{=it.block.height}}px;background-color:{{=it.currentColor}};"></div>',
},
{
id: 'currentColor',
dataField: 'currentColor',
visible: false,
},
{
id: 'color',
dataField: 'color',
visible: false,
},
{
id: 'darkerColor',
dataField: 'darkerColor',
visible: false,
},
];
const layout = new MasonryLayout({
rowTemplate: '#rowTemplate',
keepOrder: false,
});
function toggleSize(dataView, item) {
const maxWidth = dataView.getLayoutInfo().viewport.contentWidth;
if (item.size === 'small') {
item.block.width = Math.min(maxWidth, 2 * item.block.width);
item.block.height *= 2;
item.size = 'large';
item.currentColor = item.darkerColor;
} else {
item.block.width /= 2;
item.block.height /= 2;
item.size = 'small';
item.currentColor = item.color;
}
}
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent {
locale = locale;
data = data;
cols = cols;
layout = layout;
dataset = 'metroData';
keepOrder = 0;
gutter = 0;
rowHeight = 1;
columnWidth = 1;
get options() {
return {
keepOrder: this.keepOrder,
gutter: this.gutter,
rowHeight: this.rowHeight,
columnWidth: this.columnWidth,
};
}
changeDataSet(e) {
const name = e.target.id;
const currData = window[name];
const data = this.data.slice();
data.forEach((item, index) => {
const factor = item.size === 'small' ? 1 : 2;
item.block.width = currData[index].width * factor;
item.block.height = currData[index].height * factor;
});
this.dataset = name;
this.data = data;
}
handleMouseClick(e) {
const dataView = getControlByElement(document.body);
const hitTestInfo = dataView.hitTest(e);
if (hitTestInfo && hitTestInfo.row > -1) {
const item = dataView.data.getItem(hitTestInfo.row);
if (item) {
toggleSize(dataView, item);
dataView.invalidate();
}
}
}
}

import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { RangeComponent } from './range.component';
import { AppComponent } from './app.component';
import { DataViewModule } from '@grapecity/dataviews.angular';
// zone.js should be loaded last to fix error 'ZoneAwarePromise has been overwritten'
import 'zone.js';
@NgModule({
declarations: [RangeComponent, AppComponent],
imports: [DataViewModule, BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
if (process.env.NODE_ENV === 'production') {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
// helpers for responsive options panel
$(function () {
$('body').on('click', '.toggle-options', function () {
const options = $('.sample-options');
const display = options.css('display');
options.css({ display: display === 'flex' ? 'none' : 'flex' });
$('.toggle-options .fa').toggleClass('fa-cog').toggleClass('fa-times');
});
window.addEventListener('resize', function () {
if ($('.mobile-only').css('visibility') === 'hidden') {
$('.sample-options').css({ display: 'flex' });
}
});
});

import _ from 'lodash';
const colors = ['#CFF09E', '#A8DBA8', '#79BD9A', '#3B8686'];
const darkerColors = ['#67DB67', '#40BC7C', '#0E8787', '#00436B'];
export const data = [];
const pinterestData = [];
const metroData = [];
const randomData = [];
for (let i = 0; i < 80; i++) {
// to control the probability
const tempFactor = _.random(1, 13);
const sideLength = tempFactor < 2 ? 160 : tempFactor < 5 ? 80 : 40;
metroData.push({
width: sideLength,
height: sideLength,
});
pinterestData.push({
width: 100,
height: _.random(4, 6) * 20,
});
randomData.push({
width: _.random(1, 3) * 40,
height: _.random(1, 3) * 40,
});
data.push({
block: {
width: metroData[i].width,
height: metroData[i].height,
},
size: 'small',
currentColor: colors[i % colors.length],
color: colors[i % colors.length],
darkerColor: darkerColors[i % colors.length],
});
}
window.metroData = metroData;
window.pinterestData = pinterestData;
window.randomData = randomData;

export default {
keepOrder: 'Keep Order',
on: 'ON',
off: 'OFF',
rowHeight: 'Row Height',
gutter: 'Gutter',
columnWidth: 'Column Width',
metro: 'Metro',
pinterest: 'Pinterest',
random: 'Random',
};

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import locale from './locale';
@Component({
selector: 'range',
template: `
<div class="range-container">
<b class="label">{{ label }}:</b>
<div class="range-wrapper">
<input
type="range"
[name]="name"
[min]="min"
[max]="max"
[style.width]="width"
[value]="value"
(change)="handleChange($event)"
/>
<span class="indicator">{{ indicator }}</span>
</div>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RangeComponent),
multi: true,
},
],
})
export class RangeComponent implements ControlValueAccessor {
@Input() name: string = '';
@Input() value: number = 0;
@Input() min: number;
@Input() max: number;
@Input() width: string | number = 100;
propagateChange: any = () => {};
get label() {
return locale[this.name];
}
get isBool() {
return this.name === 'keepOrder';
}
get indicator() {
return this.isBool ? (this.value ? locale.on : locale.off) : this.value;
}
handleChange(e) {
const value = parseInt(e.target.value, 10);
this.value = value;
this.propagateChange(value);
}
registerOnChange(fn: any): void {
this.propagateChange = fn;
}
registerOnTouched(fn: any): void {}
setDisabledState(isDisabled: boolean): void {}
writeValue(obj: any): void {
this.value = obj;
}
}

.main-container {
width: 100%;
height: 100%;
}
.sample-options {
background: #fbfbfb;
box-sizing: border-box;
height: 100%;
overflow: auto;
padding: 10px;
min-width: 240px;
max-width: 300px;
}
.sample-options label {
display: inline-block;
font-weight: normal;
width: 75px;
}
.sample-options select {
border: 1px solid #999;
}
.sample-options .range-container {
width: 100%;
}
.sample-options .range-wrapper {
display: flex;
flex-direction: row;
}
.sample-options .range-wrapper input {
flex: 1 1 auto;
}
.sample-options .range-wrapper .indicator {
padding: 1rem;
min-width: 2rem;
}
.sample-options .option-row {
margin-bottom: 5px;
}
.sample-options .option-row .label {
display: block;
margin-bottom: 5px;
}
.sample-options .option-row range {
width: 100%;
}
.sample-options .btn-group {
display: inline-flex;
white-space: nowrap;
}
#grid {
height: 100%;
}
.block {
border: 2px solid #f1f1f1;
box-sizing: border-box;
}
.block:hover {
border: 2px solid #fff;
}
.flex-break {
flex-basis: 100%;
height: 0;
}
.mobile-only {
visibility: hidden;
}
.responsive-container {
display: flex;
box-sizing: border-box;
}
.responsive-container .main-content {
box-sizing: border-box;
height: 100%;
flex-grow: 1;
flex-shrink: 1;
min-width: 50%;
max-width: 100%;
}
.responsive-container .sample-options {
box-sizing: border-box;
display: inline-flex;
flex-direction: column;
height: 100%;
flex-grow: 0;
flex-shrink: 1;
}
.responsive-container .sample-options .option-row {
box-sizing: border-box;
display: inline-flex;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
white-space: nowrap;
padding-right: 10px;
width: auto;
}
.responsive-container .toggle-options {
align-items: center;
justify-content: center;
position: absolute;
top: 5px;
right: 5px;
background-color: #ebebeb;
color: #47a06c;
border-radius: 16px;
cursor: pointer;
width: 36px;
height: 36px;
font-size: 28px;
z-index: 101;
display: none;
}
@media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
.mobile-only {
visibility: visible;
}
.responsive-container {
display: block;
position: relative;
}
.responsive-container .main-content {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
z-index: 99;
}
.responsive-container .toggle-options {
display: flex;
}
.responsive-container .sample-options {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: 100%;
z-index: 100;
}
.responsive-container .sample-options .option-row {
padding-right: 20px;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9NYXNvbnJ5L01ldHJvTGF5b3V0L2FuZ3VsYXIvc3R5bGVzLnNjc3MiLCJEYXRhVmlld3MvTWFzb25yeS9NZXRyb0xheW91dC9hbmd1bGFyL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0EsYUFBQTtFQUNBLGdCQUFBO0VBQ0EsZ0JBQUE7QUNDRjtBRENFO0VBQ0UscUJBQUE7RUFDQSxtQkFBQTtFQUNBLFdBQUE7QUNDSjtBREVFO0VBQ0Usc0JBQUE7QUNBSjtBREdFO0VBQ0UsV0FBQTtBQ0RKO0FESUU7RUFDRSxhQUFBO0VBQ0EsbUJBQUE7QUNGSjtBRElJO0VBQ0UsY0FBQTtBQ0ZOO0FES0k7RUFDRSxhQUFBO0VBQ0EsZUFBQTtBQ0hOO0FET0U7RUFDRSxrQkFBQTtBQ0xKO0FET0k7RUFDRSxjQUFBO0VBQ0Esa0JBQUE7QUNMTjtBRFFJO0VBQ0UsV0FBQTtBQ05OO0FEVUU7RUFDRSxvQkFBQTtFQUNBLG1CQUFBO0FDUko7O0FEWUE7RUFDRSxZQUFBO0FDVEY7O0FEWUE7RUFDRSx5QkFBQTtFQUNBLHNCQUFBO0FDVEY7QURXRTtFQUNFLHNCQUFBO0FDVEo7O0FEOEJBO0VBQ0UsZ0JBQUE7RUFDQSxTQUFBO0FDM0JGOztBRDhCQTtFQUNFLGtCQUFBO0FDM0JGOztBRDhCQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtBQzNCRjtBRDZCRTtFQUNFLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtFQUNBLGVBQUE7QUMzQko7QUQ4QkU7RUFDRSxzQkFBQTtFQUNBLG9CQUFBO0VBQ0Esc0JBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUM1Qko7QUQ4Qkk7RUFDRSxzQkFBQTtFQUNBLG9CQUFBO0VBQ0EsbUJBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGdCQUFBO0VBQ0EsbUJBQUE7RUFDQSxtQkFBQTtFQUNBLFdBQUE7QUM1Qk47QURnQ0U7RUExREEsbUJBQUE7RUFDQSx1QkFBQTtFQUNBLGtCQUFBO0VBQ0EsUUFBQTtFQUNBLFVBQUE7RUFDQSx5QkFBQTtFQUNBLGNBQUE7RUFDQSxtQkFBQTtFQUNBLGVBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGVBQUE7RUFDQSxZQUFBO0VBZ0RFLGFBQUE7QUNsQko7O0FEdUJBO0VBQ0U7SUFDRSxtQkFBQTtFQ3BCRjs7RURzQkE7SUFDRSxjQUFBO0lBQ0Esa0JBQUE7RUNuQkY7RURxQkU7SUFDRSxrQkFBQTtJQUNBLGNBQUE7SUFDQSxNQUFBO0lBQ0EsT0FBQTtJQUNBLFdBQUE7SUFDQSxlQUFBO0lBQ0EsV0FBQTtFQ25CSjtFRHNCRTtJQUNFLGFBQUE7RUNwQko7RUR1QkU7SUFDRSxhQUFBO0lBQ0Esa0JBQUE7SUFDQSxNQUFBO0lBQ0EsT0FBQTtJQUNBLFdBQUE7SUFDQSxlQUFBO0lBQ0EsWUFBQTtJQUNBLFlBQUE7RUNyQko7RUR1Qkk7SUFDRSxtQkFBQTtFQ3JCTjtBQUNGIiwiZmlsZSI6IkRhdGFWaWV3cy9NYXNvbnJ5L01ldHJvTGF5b3V0L2FuZ3VsYXIvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1pbi13aWR0aDogMjQwcHg7XG4gIG1heC13aWR0aDogMzAwcHg7XG5cbiAgbGFiZWwge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICAgIHdpZHRoOiA3NXB4O1xuICB9XG5cbiAgc2VsZWN0IHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAjOTk5O1xuICB9XG5cbiAgLnJhbmdlLWNvbnRhaW5lciB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICAucmFuZ2Utd3JhcHBlciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICAgaW5wdXQge1xuICAgICAgZmxleDogMSAxIGF1dG87XG4gICAgfVxuXG4gICAgLmluZGljYXRvciB7XG4gICAgICBwYWRkaW5nOiAxcmVtO1xuICAgICAgbWluLXdpZHRoOiAycmVtO1xuICAgIH1cbiAgfVxuXG4gIC5vcHRpb24tcm93IHtcbiAgICBtYXJnaW4tYm90dG9tOiA1cHg7XG5cbiAgICAubGFiZWwge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICBtYXJnaW4tYm90dG9tOiA1cHg7XG4gICAgfVxuXG4gICAgcmFuZ2Uge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLmJ0bi1ncm91cCB7XG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgfVxufVxuXG4jZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmJsb2NrIHtcbiAgYm9yZGVyOiAycHggc29saWQgI2YxZjFmMTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAmOmhvdmVyIHtcbiAgICBib3JkZXI6IDJweCBzb2xpZCAjZmZmO1xuICB9XG59XG5cbi8vIGhlbHBlcnMgZm9yIHJlc3BvbnNpdmUgb3B0aW9ucyBwYW5lbFxuQG1peGluIG1vYmlsZS1idG4oKSB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogNXB4O1xuICByaWdodDogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWJlYmViO1xuICBjb2xvcjogIzQ3YTA2YztcbiAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB3aWR0aDogMzZweDtcbiAgaGVpZ2h0OiAzNnB4O1xuICBmb250LXNpemU6IDI4cHg7XG4gIHotaW5kZXg6IDEwMTtcbn1cblxuLmZsZXgtYnJlYWsge1xuICBmbGV4LWJhc2lzOiAxMDAlO1xuICBoZWlnaHQ6IDA7XG59XG5cbi5tb2JpbGUtb25seSB7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcblxuICAubWFpbi1jb250ZW50IHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBmbGV4LWdyb3c6IDE7XG4gICAgZmxleC1zaHJpbms6IDE7XG4gICAgbWluLXdpZHRoOiA1MCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICB9XG5cbiAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGZsZXgtZ3JvdzogMDtcbiAgICBmbGV4LXNocmluazogMTtcblxuICAgIC5vcHRpb24tcm93IHtcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBmbGV4LWdyb3c6IDA7XG4gICAgICBmbGV4LXNocmluazogMDtcbiAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgICAgcGFkZGluZy1yaWdodDogMTBweDtcbiAgICAgIHdpZHRoOiBhdXRvO1xuICAgIH1cbiAgfVxuXG4gIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgQGluY2x1ZGUgbW9iaWxlLWJ0bjtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG5cbi8vIG1vc3Qgc21hcnRwaG9uZXNcbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDQ4MHB4KSBhbmQgKG9yaWVudGF0aW9uOiBwb3J0cmFpdCkge1xuICAubW9iaWxlLW9ubHkge1xuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAubWFpbi1jb250ZW50IHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICAgei1pbmRleDogOTk7XG4gICAgfVxuXG4gICAgLnRvZ2dsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuXG4gICAgLnNhbXBsZS1vcHRpb25zIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICB6LWluZGV4OiAxMDA7XG5cbiAgICAgIC5vcHRpb24tcm93IHtcbiAgICAgICAgcGFkZGluZy1yaWdodDogMjBweDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIHBhZGRpbmc6IDEwcHg7XG4gIG1pbi13aWR0aDogMjQwcHg7XG4gIG1heC13aWR0aDogMzAwcHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgbGFiZWwge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIHdpZHRoOiA3NXB4O1xufVxuLnNhbXBsZS1vcHRpb25zIHNlbGVjdCB7XG4gIGJvcmRlcjogMXB4IHNvbGlkICM5OTk7XG59XG4uc2FtcGxlLW9wdGlvbnMgLnJhbmdlLWNvbnRhaW5lciB7XG4gIHdpZHRoOiAxMDAlO1xufVxuLnNhbXBsZS1vcHRpb25zIC5yYW5nZS13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbn1cbi5zYW1wbGUtb3B0aW9ucyAucmFuZ2Utd3JhcHBlciBpbnB1dCB7XG4gIGZsZXg6IDEgMSBhdXRvO1xufVxuLnNhbXBsZS1vcHRpb25zIC5yYW5nZS13cmFwcGVyIC5pbmRpY2F0b3Ige1xuICBwYWRkaW5nOiAxcmVtO1xuICBtaW4td2lkdGg6IDJyZW07XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBtYXJnaW4tYm90dG9tOiA1cHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cgLmxhYmVsIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG1hcmdpbi1ib3R0b206IDVweDtcbn1cbi5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyByYW5nZSB7XG4gIHdpZHRoOiAxMDAlO1xufVxuLnNhbXBsZS1vcHRpb25zIC5idG4tZ3JvdXAge1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbn1cblxuI2dyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5ibG9jayB7XG4gIGJvcmRlcjogMnB4IHNvbGlkICNmMWYxZjE7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG4uYmxvY2s6aG92ZXIge1xuICBib3JkZXI6IDJweCBzb2xpZCAjZmZmO1xufVxuXG4uZmxleC1icmVhayB7XG4gIGZsZXgtYmFzaXM6IDEwMCU7XG4gIGhlaWdodDogMDtcbn1cblxuLm1vYmlsZS1vbmx5IHtcbiAgdmlzaWJpbGl0eTogaGlkZGVuO1xufVxuXG4ucmVzcG9uc2l2ZS1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC5tYWluLWNvbnRlbnQge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG4gIG1pbi13aWR0aDogNTAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMTtcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbiAgZmxleC1iYXNpczogYXV0bztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgcGFkZGluZy1yaWdodDogMTBweDtcbiAgd2lkdGg6IGF1dG87XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnRvZ2dsZS1vcHRpb25zIHtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiA1cHg7XG4gIHJpZ2h0OiA1cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICNlYmViZWI7XG4gIGNvbG9yOiAjNDdhMDZjO1xuICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHdpZHRoOiAzNnB4O1xuICBoZWlnaHQ6IDM2cHg7XG4gIGZvbnQtc2l6ZTogMjhweDtcbiAgei1pbmRleDogMTAxO1xuICBkaXNwbGF5OiBub25lO1xufVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA0ODBweCkgYW5kIChvcmllbnRhdGlvbjogcG9ydHJhaXQpIHtcbiAgLm1vYmlsZS1vbmx5IHtcbiAgICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICB9XG5cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC5tYWluLWNvbnRlbnQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgei1pbmRleDogOTk7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHotaW5kZXg6IDEwMDtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgICBwYWRkaW5nLXJpZ2h0OiAyMHB4O1xuICB9XG59Il19 */

(function () {
const IS_PROD = window.process.env.NODE_ENV === 'production';
const USE_NPM = window.process.env.USE_NPM;
const USE_CDN = window.process.env.USE_CDN;
const SITE_ROOT = window.process.env.SITE_ROOT;
const FRAMEWORK = window.process.env.FRAMEWORK;
const ext = IS_PROD ? '.min.js' : '.js';
function js(name) {
return name + ext;
}
function npm(t) {
if (!t.file) {
t.file = IS_PROD ? t.prod : t.dev;
}
const version = USE_CDN && t.version ? '@' + t.version : '';
const path = t.pkg + version + '/' + t.file;
if (USE_CDN) {
return 'https://unpkg.com/' + path;
}
return 'npm:' + path;
}
function dv(t) {
if (USE_CDN || USE_NPM) {
t.file = 'dist/' + t.file + '.min.js';
return npm(t);
}
return SITE_ROOT + '/static/dataviews/' + js(t.file);
}
const isTypeScript = FRAMEWORK === 'angular';
const babelConfig = {
es2015: true,
react: true,
};
const meta = {
js: {
babelOptions: babelConfig,
},
ts: {
typescriptOptions: {
tsconfig: true
},
},
};
const map = {
// gc.dataviews packages
'@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// third-party libs
react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}),
'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}),
'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}),
'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'lodash': npm({pkg: 'lodash', file: js('lodash')}),
'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}),
'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}),
'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}),
'@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}),
'@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}),
'@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}),
'@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}),
'@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}),
'@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}),
'@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}),
'@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}),
'@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}),
// systemjs plugins
'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}),
'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}),
'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}),
'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}),
'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}),
'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'4.0.2'}),
'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}),
};
const config = {
defaultJSExtensions: true,
transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel',
typescriptOptions: {
tsconfig: true
},
meta: {
'*.json': {loader: 'systemjs-plugin-json'},
'*.css': {loader: 'systemjs-plugin-css'},
'*.vue': {loader: 'systemjs-vue-browser'},
'*.js': meta.js,
'*.ts': meta.ts,
'app.js': {
format: 'esm',
babelOptions: babelConfig,
},
'typescript': {
exports: 'ts',
},
'@grapecity/dataviews.common': {
format: 'amd',
},
'@grapecity/dataviews.core': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.grid': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.cardlayout': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.masonry': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.calendar': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.timeline': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.trellis': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.gantt': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.searchbox': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.react': {
format: 'amd',
deps: [
'react',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.vue': {
format: 'amd',
deps: [
'vue',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.angular': {
format: 'amd',
deps: [
'@angular/core',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.csvexport': {
format: 'amd',
deps: [
'@grapecity/dataviews.common'
],
},
},
paths: {
// paths serve as alias
'npm:': SITE_ROOT + '/node_modules/',
},
// map tells the System loader where to look for things
map: map,
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'.': { defaultExtension: isTypeScript ? 'ts' : 'js' },
node_modules: { defaultExtension: 'js' },
}
};
// fast format detection to avoid detection by source code using regexp
Object.keys(map).filter(function (key) {
return !config.meta[key];
}).forEach(function (key) {
const path = map[key];
if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) {
config.meta[key] = { format: 'amd' };
}
if (path.indexOf('/cjs') >= 0) {
config.meta[key] = { format: 'cjs' };
}
});
System.config(config);
})(this);

Metro Layout (Angular)