The Focus Cell feature highlights the active cell with a semi-transparent overlay on its entire row and column, making it easier to identify the current position in a large spreadsheet.
You can configure the focusCell through the workbook options:
Enable or Disable
Use the enabled property to toggle the focus cell highlight:
Color
Set the highlight color using theme colors or RGBA values(the opacity from color as high priority):
Opacity
Adjust the transparency of the highlight overlay:
import { Component, NgModule, enableProdMode } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import { data } from './app.data';
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: any = null;
hostStyle = {
width: '100%',
height: '100%'
};
focusCellEnabled: boolean = false;
focusCellColor: string = '';
focusCellOpacity: number = 0;
initSpread(event: any) {
this.spread = event && event.spread ? event.spread : event;
this.spread.fromJSON(data[0]);
// Enable focus cell and read options to init component values
this.spread.options.focusCell.enabled = true;
var focusCell = this.spread.options.focusCell || {};
this.focusCellEnabled = true;
this.focusCellColor = focusCell.color || '';
this.focusCellOpacity = focusCell.opacity || 0.22;
}
updateFocusCell() {
if (!this.spread) return;
this.spread.options.focusCell = {
enabled: this.focusCellEnabled,
color: this.focusCellColor,
opacity: this.focusCellOpacity
};
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule, FormsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
</div>
<aside class="options-container" aria-label="Focus Cell Settings">
<div class="panel-header">
<h1>Focus Cell Settings</h1>
<p class="panel-description">Change the properties below to see how they affect the focus cell highlight.</p>
</div>
<section class="control-section">
<h2>Availability</h2>
<label class="check-field" for="chk_enabled">
<input type="checkbox" id="chk_enabled" [(ngModel)]="focusCellEnabled" (ngModelChange)="updateFocusCell()" />
<span>
<strong>Enable Focus Cell</strong>
</span>
</label>
</section>
<section class="control-section">
<h2>Highlight Style</h2>
<div class="field">
<label for="focusCellColor">Color</label>
<div class="field-row">
<input type="text" id="focusCellColor" [(ngModel)]="focusCellColor" [disabled]="!focusCellEnabled" />
<input type="button" value="Set" id="setFocusCellColor" (click)="updateFocusCell()" [disabled]="!focusCellEnabled" class="narrow" />
</div>
</div>
<div class="field">
<label for="focusCellOpacity">Opacity</label>
<div class="field-row range-field">
<input type="range" id="focusCellOpacity" min="0" max="1" step="0.01" [(ngModel)]="focusCellOpacity" (ngModelChange)="updateFocusCell()" [disabled]="!focusCellEnabled" />
<span class="opacity-value">{{ focusCellOpacity.toFixed(2) }}</span>
</div>
</div>
</section>
</aside>
</div>
export var data = [{
"version":"14.0.5",
"tabStripRatio":0.6,
"customList":[
],
"sheets":{
"Sheet1":{
"name":"Sheet1",
"isSelected":true,
"rowCount":100,
"columnCount":100,
"activeRow":8,
"theme":{
"name":"Office",
"themeColor":{
"name":"Office",
"background1":{
"a":255,
"r":255,
"g":255,
"b":255
},
"background2":{
"a":255,
"r":231,
"g":230,
"b":230
},
"text1":{
"a":255,
"r":0,
"g":0,
"b":0
},
"text2":{
"a":255,
"r":68,
"g":84,
"b":106
},
"accent1":{
"a":255,
"r":68,
"g":114,
"b":196
},
"accent2":{
"a":255,
"r":237,
"g":125,
"b":49
},
"accent3":{
"a":255,
"r":165,
"g":165,
"b":165
},
"accent4":{
"a":255,
"r":255,
"g":192,
"b":0
},
"accent5":{
"a":255,
"r":91,
"g":155,
"b":213
},
"accent6":{
"a":255,
"r":112,
"g":173,
"b":71
},
"hyperlink":{
"a":255,
"r":5,
"g":99,
"b":193
},
"followedHyperlink":{
"a":255,
"r":149,
"g":79,
"b":114
}
},
"headingFont":"Calibri Light",
"bodyFont":"Calibri"
},
"data":{
"dataTable":{
"0":{
"0":{
"value":"Film"
},
"1":{
"value":"Genre"
},
"2":{
"value":"Lead Studio"
},
"3":{
"value":"Audience Score %"
},
"4":{
"value":"Profitability"
},
"5":{
"value":"Rating"
},
"6":{
"value":"Worldwide Gross"
},
"7":{
"value":"Year"
}
},
"1":{
"0":{
"value":"27 Dresses",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Fox",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":71,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":5.34,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":40,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":160.3,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2008,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"2":{
"0":{
"value":"(500) Days of Summer",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Fox",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":81,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":8.09,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":87,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":60.72,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2009,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"3":{
"0":{
"value":"A Dangerous Method",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Drama",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Independent",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":89,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":0.44,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":79,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":8.97,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2011,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"4":{
"0":{
"value":"A Serious Man",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Drama",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Universal",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":64,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":4.38,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":89,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":30.68,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2009,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"5":{
"0":{
"value":"Across the Universe",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Romance",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Independent",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":84,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":0.65,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":54,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":29.36,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2007,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"6":{
"0":{
"value":"Beginners",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Independent",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":80,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":4.47,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":84,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":14.31,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2011,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"7":{
"0":{
"value":"Dear John",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Drama",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Sony",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":66,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":46,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":29,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":114.97,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2010,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"8":{
"0":{
"value":"Enchanted",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Disney",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":80,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":4,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":93,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":340.48,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2007,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"9":{
"0":{
"value":"Fireproof",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Drama",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Independent",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":51,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":66.93,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":40,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":33.46,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2008,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"10":{
"0":{
"value":"Four Christmases",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Warner Bros.",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":52,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":2.02,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":26,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":161.83,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2008,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"11":{
"0":{
"value":"Ghosts of Girlfriends Past",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Warner Bros.",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":47,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":20.44,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":27,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":102.22,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2009,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"12":{
"0":{
"value":"Gnomeo and Juliet",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Animation",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Disney",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":52,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":5.38,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":56,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":193.96,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2011,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"13":{
"0":{
"value":"Going the Distance",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Warner Bros.",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":56,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":1.31,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":53,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":42.05,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2010,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"14":{
"0":{
"value":"Good Luck Chuck",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Lionsgate",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":61,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":2.36,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":3,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":59.19,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2007,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"15":{
"0":{
"value":"He's Just Not That Into You",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Warner Bros.",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":60,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":7.15,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":42,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":178.84,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2009,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"16":{
"0":{
"value":"High School Musical 3: Senior Year",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Disney",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":76,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":22.91,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":65,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":252.04,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2008,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"17":{
"0":{
"value":"I Love You Phillip Morris",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Independent",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":57,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":1.34,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":71,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":20.1,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2010,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"18":{
"0":{
"value":"It's Complicated",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Universal",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":63,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":2.64,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":56,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":224.6,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2009,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"19":{
"0":{
"value":"Jane Eyre",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Romance",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Universal",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":77,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":85,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":30.14,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2011,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"20":{
"0":{
"value":"Just Wright",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Fox",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":58,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":1.79,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":45,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":21.56,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2010,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"21":{
"0":{
"value":"Killers",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Action",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Lionsgate",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":45,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":1.24,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":11,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":93.4,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2010,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"22":{
"0":{
"value":"Knocked Up",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Universal",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":83,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":6.63,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":91,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":219,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2007,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"23":{
"0":{
"value":"Leap Year",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Universal",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":49,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":1.71,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":21,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":32.59,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2010,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"24":{
"0":{
"value":"Letters to Juliet",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Summit",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":62,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":2.7,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":40,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":79.18,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2010,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"25":{
"0":{
"value":"License to Wed",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Warner Bros.",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":55,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":1.98,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":8,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":69.3,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2007,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"26":{
"0":{
"value":"Life as We Know It",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Independent",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":62,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":2.53,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":28,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":96.16,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2010,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"27":{
"0":{
"value":"Love & Other Drugs",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Fox",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":55,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":1.81,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":48,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":54.53,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2010,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"28":{
"0":{
"value":"Love Happens",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Drama",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Universal",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":40,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":2,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":18,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":36.08,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2009,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"29":{
"0":{
"value":"Made of Honor",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Sony",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":61,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":2.64,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":13,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":105.96,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2008,
"style":"__builtInTableStyle0__builtInStyle2"
}
},
"30":{
"0":{
"value":"Mamma Mia!",
"style":"__builtInTableStyle0__builtInStyle2"
},
"1":{
"value":"Comedy",
"style":"__builtInTableStyle0__builtInStyle2"
},
"2":{
"value":"Universal",
"style":"__builtInTableStyle0__builtInStyle2"
},
"3":{
"value":76,
"style":"__builtInTableStyle0__builtInStyle2"
},
"4":{
"value":9.23,
"style":"__builtInTableStyle1__builtInStyle3"
},
"5":{
"value":53,
"style":"__builtInTableStyle0__builtInStyle2"
},
"6":{
"value":609.47,
"style":"__builtInTableStyle1__builtInStyle3"
},
"7":{
"value":2008,
"style":"__builtInTableStyle0__builtInStyle2"
}
}
},
"defaultDataNode":{
"style":{
"backColor":null,
"foreColor":"Text 1 0",
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"diagonalDown":null,
"diagonalUp":null
}
}
},
"rowHeaderData":{
"defaultDataNode":{
"style":{
"themeFont":"Body"
}
}
},
"colHeaderData":{
"defaultDataNode":{
"style":{
"themeFont":"Body"
}
}
},
"rows":[
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":20
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
},
{
"size":19
}
],
"columns":[
{
"size":204
},
{
"size":93
},
{
"size":120
},
{
"size":120
},
{
"size":93
},
{
"size":77
},
{
"size":117
}
],
"leftCellIndex":0,
"topCellIndex":0,
"selections":{
"0":{
"row":8,
"rowCount":1,
"col":0,
"colCount":1
},
"length":1
},
"defaults":{
"colHeaderRowHeight":20,
"colWidth":64,
"rowHeaderColWidth":40,
"rowHeight":19.2,
"_isExcelDefaultColumnWidth":true
},
"rowOutlines":{
"items":[
]
},
"columnOutlines":{
"items":[
]
},
"cellStates":{
},
"outlineColumnOptions":{
},
"autoMergeRangeInfos":[
],
"tables":[
{
"name":"Table1",
"row":0,
"col":0,
"rowCount":31,
"colCount":8,
"style":{
"buildInName":"Medium18"
},
"rowFilter":{
"range":{
"row":1,
"rowCount":30,
"col":0,
"colCount":8
},
"typeName":"HideRowFilter",
"dialogVisibleInfo":{
},
"filterButtonVisibleInfo":{
"0":false,
"1":false,
"2":false,
"3":false,
"4":false,
"5":false,
"6":false,
"7":false
},
"showFilterButton":false
},
"columns":[
{
"id":1,
"name":"Film"
},
{
"id":2,
"name":"Genre"
},
{
"id":3,
"name":"Lead Studio"
},
{
"id":4,
"name":"Audience Score"
},
{
"id":5,
"name":"Profitability"
},
{
"id":6,
"name":"Rating"
},
{
"id":7,
"name":"Worldwide Gross"
},
{
"id":8,
"name":"Year"
}
]
}
],
"index":0
}
},
"namedStyles":[
{
"backColor":"Accent 1 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent1"
},
{
"backColor":"Accent 2 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent2"
},
{
"backColor":"Accent 3 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent3"
},
{
"backColor":"Accent 4 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent4"
},
{
"backColor":"Accent 5 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent5"
},
{
"backColor":"Accent 6 80",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"20% - Accent6"
},
{
"backColor":"Accent 1 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent1"
},
{
"backColor":"Accent 2 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent2"
},
{
"backColor":"Accent 3 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent3"
},
{
"backColor":"Accent 4 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent4"
},
{
"backColor":"Accent 5 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent5"
},
{
"backColor":"Accent 6 60",
"foreColor":"Text 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"40% - Accent6"
},
{
"backColor":"Accent 1 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent1"
},
{
"backColor":"Accent 2 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent2"
},
{
"backColor":"Accent 3 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent3"
},
{
"backColor":"Accent 4 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent4"
},
{
"backColor":"Accent 5 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent5"
},
{
"backColor":"Accent 6 40",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"60% - Accent6"
},
{
"backColor":"Accent 1 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent1"
},
{
"backColor":"Accent 2 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent2"
},
{
"backColor":"Accent 3 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent3"
},
{
"backColor":"Accent 4 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent4"
},
{
"backColor":"Accent 5 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent5"
},
{
"backColor":"Accent 6 0",
"foreColor":"Background 1 0",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Accent6"
},
{
"backColor":"#ffc7ce",
"foreColor":"#9c0006",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Bad"
},
{
"backColor":"#f2f2f2",
"foreColor":"#fa7d00",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":{
"color":"#7f7f7f",
"style":1
},
"borderTop":{
"color":"#7f7f7f",
"style":1
},
"borderRight":{
"color":"#7f7f7f",
"style":1
},
"borderBottom":{
"color":"#7f7f7f",
"style":1
},
"name":"Calculation",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":"#a5a5a5",
"foreColor":"Background 1 0",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":{
"color":"#3f3f3f",
"style":6
},
"borderTop":{
"color":"#3f3f3f",
"style":6
},
"borderRight":{
"color":"#3f3f3f",
"style":6
},
"borderBottom":{
"color":"#3f3f3f",
"style":6
},
"name":"Check Cell",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"formatter":"_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)",
"name":"Comma"
},
{
"backColor":null,
"formatter":"_(* #,##0_);_(* (#,##0);_(* \"-\"_);_(@_)",
"name":"Comma [0]"
},
{
"backColor":null,
"formatter":"_(\"$\"* #,##0.00_);_(\"$\"* (#,##0.00);_(\"$\"* \"-\"??_);_(@_)",
"name":"Currency"
},
{
"backColor":null,
"formatter":"_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)",
"name":"Currency [0]"
},
{
"backColor":null,
"foreColor":"#7f7f7f",
"font":"italic normal 14.7px Calibri",
"themeFont":"Body",
"name":"Explanatory Text"
},
{
"backColor":"#c6efce",
"foreColor":"#006100",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Good"
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 20px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":{
"color":"Accent 1 0",
"style":5
},
"name":"Heading 1",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 17.3px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":{
"color":"Accent 1 50",
"style":5
},
"name":"Heading 2",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":{
"color":"Accent 1 40",
"style":2
},
"name":"Heading 3",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"name":"Heading 4"
},
{
"backColor":"#ffcc99",
"foreColor":"#3f3f76",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"borderLeft":{
"color":"#7f7f7f",
"style":1
},
"borderTop":{
"color":"#7f7f7f",
"style":1
},
"borderRight":{
"color":"#7f7f7f",
"style":1
},
"borderBottom":{
"color":"#7f7f7f",
"style":1
},
"name":"Input",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"#fa7d00",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":{
"color":"#ff8001",
"style":6
},
"name":"Linked Cell",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":"#ffeb9c",
"foreColor":"#9c6500",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Neutral"
},
{
"backColor":null,
"foreColor":"Text 1 0",
"hAlign":3,
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"Normal",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":"#ffffcc",
"borderLeft":{
"color":"#b2b2b2",
"style":1
},
"borderTop":{
"color":"#b2b2b2",
"style":1
},
"borderRight":{
"color":"#b2b2b2",
"style":1
},
"borderBottom":{
"color":"#b2b2b2",
"style":1
},
"name":"Note",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":"#f2f2f2",
"foreColor":"#3f3f3f",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":{
"color":"#3f3f3f",
"style":1
},
"borderTop":{
"color":"#3f3f3f",
"style":1
},
"borderRight":{
"color":"#3f3f3f",
"style":1
},
"borderBottom":{
"color":"#3f3f3f",
"style":1
},
"name":"Output",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"formatter":"0%",
"name":"Percent"
},
{
"backColor":null,
"foreColor":"Text 2 0",
"font":"normal bold 24px Calibri Light",
"themeFont":"Headings",
"name":"Title"
},
{
"backColor":null,
"foreColor":"Text 1 0",
"font":"normal bold 14.7px Calibri",
"themeFont":"Body",
"borderLeft":null,
"borderTop":{
"color":"Accent 1 0",
"style":1
},
"borderRight":null,
"borderBottom":{
"color":"Accent 1 0",
"style":6
},
"name":"Total",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"#ff0000",
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"name":"Warning Text"
},
{
"backColor":null,
"foreColor":"Text 1 0",
"hAlign":3,
"vAlign":2,
"font":"normal normal 14.7px Calibri",
"themeFont":"Body",
"formatter":"General",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":false,
"name":"__builtInStyle1",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"#000000",
"hAlign":3,
"vAlign":0,
"font":"normal normal 12px Calibri",
"formatter":"General",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":true,
"name":"__builtInStyle2",
"diagonalDown":null,
"diagonalUp":null
},
{
"backColor":null,
"foreColor":"#000000",
"hAlign":3,
"vAlign":0,
"font":"normal normal 12px Calibri",
"formatter":"#,##0.00",
"borderLeft":null,
"borderTop":null,
"borderRight":null,
"borderBottom":null,
"locked":true,
"textIndent":0,
"wordWrap":true,
"name":"__builtInStyle3",
"diagonalDown":null,
"diagonalUp":null
},
{
"foreColor":"#000000",
"hAlign":3,
"vAlign":0,
"font":"normal normal 12px Calibri",
"formatter":"General",
"locked":true,
"textIndent":0,
"wordWrap":true,
"name":"__builtInTableStyle0__builtInStyle2",
"diagonalDown":null,
"diagonalUp":null
},
{
"foreColor":"#000000",
"hAlign":3,
"vAlign":0,
"font":"normal normal 12px Calibri",
"formatter":"#,##0.00",
"locked":true,
"textIndent":0,
"wordWrap":true,
"name":"__builtInTableStyle1__builtInStyle3",
"diagonalDown":null,
"diagonalUp":null
}
]
}];
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
color: #1f2933;
background: #f7f8fa;
}
app-component {
display: block;
height: 100%;
}
.sample-tutorial {
display: flex;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
flex: 1 1 auto;
min-width: 0;
height: 100%;
overflow: hidden;
}
.options-container {
flex: 0 0 320px;
width: 320px;
height: 100%;
padding: 24px 20px;
box-sizing: border-box;
overflow: auto;
background: #fff;
border-left: 1px solid #e5e7eb;
}
.panel-header {
padding-bottom: 20px;
border-bottom: 1px solid #eef0f3;
}
.panel-header h1 {
margin: 0;
font-size: 20px;
font-weight: 650;
line-height: 1.25;
}
.panel-description {
margin: 10px 0 0;
color: #6b7280;
font-size: 13px;
line-height: 1.6;
}
.control-section {
padding: 20px 0;
border-bottom: 1px solid #eef0f3;
}
.control-section:last-child {
border-bottom: 0;
}
.control-section h2 {
margin: 0 0 14px;
color: #374151;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.field {
display: grid;
gap: 7px;
margin-bottom: 14px;
}
.field:last-child {
margin-bottom: 0;
}
.options-container label {
color: #374151;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
.field-row {
display: flex;
align-items: center;
gap: 8px;
}
.field-row input[type="text"] {
flex: 1 1 auto;
min-width: 0;
}
.options-container input[type="text"],
.options-container input[type="button"].narrow {
height: 34px;
box-sizing: border-box;
font: inherit;
border-radius: 6px;
}
.options-container input[type="text"] {
width: 100%;
padding: 0 10px;
color: #111827;
background: #fff;
border: 1px solid #d8dde5;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.options-container input[type="text"]:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.options-container input[type="button"].narrow {
flex: 0 0 60px;
width: 60px;
color: #fff;
border: 1px solid #2563eb;
background: #2563eb;
cursor: pointer;
}
.options-container input[type="button"].narrow:hover:not(:disabled) {
background: #1d4ed8;
}
.options-container input:disabled {
color: #8d969e;
border-color: #d9dee3;
background: #eef1f4;
cursor: not-allowed;
}
.check-field {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 0;
cursor: pointer;
}
.check-field input {
width: 16px;
height: 16px;
margin: 2px 0 0;
accent-color: #2563eb;
flex: 0 0 auto;
}
.check-field span {
display: grid;
gap: 3px;
}
.check-field strong {
color: #1f2933;
font-size: 13px;
font-weight: 650;
line-height: 1.35;
}
.range-field input[type="range"] {
flex: 1 1 auto;
min-width: 0;
margin: 0;
accent-color: #2563eb;
}
.opacity-value {
flex: 0 0 auto;
min-width: 38px;
padding: 4px 7px;
color: #2f4f6f;
text-align: center;
border-radius: 6px;
background: #e9f1fb;
font-size: 13px;
line-height: 1.4;
}
@media (max-width: 760px) {
.sample-tutorial {
flex-direction: column;
}
.sample-spreadsheets {
min-height: 55%;
}
.options-container {
flex: 0 0 auto;
width: 100%;
height: 45%;
border-top: 1px solid #e5e7eb;
border-left: 0;
}
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'cdn:': 'https://cdn.mescius.io/demoapps/packages/spreadjs/19.2.2-master-2026-09-02-2133/'
},
// map tells the System loader where to look for things
map: {
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets': 'cdn:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-shapes': 'cdn:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-slicers': 'cdn:@mescius/spread-sheets-slicers/index.js',
'@mescius/spread-sheets-charts': 'cdn:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-angular': 'cdn:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
