選択

Spreadシート内のセル、行、列、または複数の範囲を選択できます。

シート上の特定領域を選択するには、1つのセルをクリックして、マウスでドラッグします。これで、選択領域が作成されます。 選択領域の境界線の色および背景色を変更するには、次のコードに示すように、selectionBorderColorおよびselectionBackColorオプションを使用します。 ユーザーが選択可能なアイテムを設定するには、selectionPolicyおよびselectionUnitオプションを使用します。SelectionPolicyには、以下のタイプがあります。 single: 1つの項目のみを選択できます。 range: 1つの項目と項目の範囲を選択できますが、複数の範囲は選択できません。 multiRange: 1つの項目と項目の範囲を選択でき、複数の範囲も選択できます。 SelectionUnitには、以下のタイプがあります。 cell: 選択できる最小単位がセルであることを示します。 row: 選択できる最小単位が行であることを示します。 column: 選択できる最小単位が列であることを示します。 これらの2つのメソッドにより、選択モードを制御することができます。 複数の領域を選択するには、[Ctrl]キーを押しながら必要な領域を選択します。また、addSelectionメソッドを使用しても、選択領域を追加できます。すべての選択領域を取得するには、getSelectionsメソッドを使用します。選択領域をクリアするには、clearSelectionメソッドを使用します。次のコードは、これらのメソッドの用法を示します。 ワークブックのallowUserDeselectオプションを使用すると、ユーザーに対し、現在の選択領域をマウスで選択解除できるようにするかどうかを定義できます。 セルをマウスで選択するだけでなく、setSelectionメソッドを使用して複数のセルを選択することも、setActiveCellメソッドを使用して1つのセルを選択することもできます。アクティブセルは、選択領域内の先頭セルです。アクティブセルの行および列インデックスを取得するには、次のコードに示すように、getActiveRowIndexおよびgetActiveColumnIndexメソッドを使用します。 アクティブセルを設定したにもかかわらず、このセルが表示されていない場合は、showCell、showRow、およびshowColumnの各メソッドを使用して、アクティブセルを表示できます。
import { Component, NgModule, enableProdMode } from '@angular/core'; import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'; import GC from '@mescius/spread-sheets'; import '@mescius/spread-sheets-resources-ja'; GC.Spread.Common.CultureManager.culture("ja-jp"); import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; import { getData } from './app.data'; import './styles.css'; const spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea; @Component({ standalone: true, imports: [SpreadSheetsModule, BrowserModule, FormsModule], selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { spread: GC.Spread.Sheets.Workbook; hostStyle = { width: 'calc(100% - 280px)', height: '100%', overflow: 'hidden', float: 'left' }; selectionPolicyOptions: any; selectionUnitOptions: any; selectionPolicy: string; selectionUnit: string; allowDeselect: boolean; backColor: string; borderColor: string; constructor() { this.selectionPolicyOptions = [ { value: 0, text: "Single" }, { value: 1, text: "Range" }, { value: 2, text: "MultiRange" } ]; this.selectionUnitOptions = [{ value: 0, text: "Cell" }, { value: 1, text: "Row" }, { value: 2, text: "Column" }]; this.selectionPolicy = "2"; this.selectionUnit = "0"; this.allowDeselect = true; this.backColor = "rgba(204,255,51, 0.3)"; this.borderColor = "Accent 3 -40"; } initSpread($event: any) { let spread = this.spread = $event.spread; spread.fromJSON(getData()[0]); } setSelectionPolicy() { let spread = this.spread; let sheet = spread.getActiveSheet(); let policy = parseInt(this.selectionPolicy, 10); sheet.selectionPolicy(policy); } setSelectionUnit() { let spread = this.spread; let sheet = spread.getActiveSheet(); let policy = parseInt(this.selectionUnit, 10); sheet.selectionUnit(policy); } setAllowDeselect() { let spread = this.spread; spread.options.allowUserDeselect = this.allowDeselect; } setSelectionBackColor() { let spread = this.spread; let sheet = spread.getActiveSheet(); sheet.options.selectionBackColor = this.backColor; } setSelectionBorderColor() { let spread = this.spread; let sheet = spread.getActiveSheet(); sheet.options.selectionBorderColor = this.borderColor; } setIsTabStop(isTabStop: boolean) { let spread = this.spread; let sheet = spread.getActiveSheet(); sheet.suspendPaint(); let sels = sheet.getSelections(); for (let index = 0; index < sels.length; index++) { let selRange = sels[index]; if (selRange.col >= 0 && selRange.row >= 0) { sheet.getRange(selRange.row, selRange.col, selRange.rowCount, selRange.colCount).tabStop(isTabStop); } else if (selRange.row >= 0) { sheet.getRange(selRange.row, -1, selRange.rowCount, -1).tabStop(isTabStop); } else if (selRange.col >= 0) { sheet.getRange(-1, selRange.col, -1, selRange.colCount).tabStop(isTabStop); } } sheet.resumePaint(); } } enableProdMode(); bootstrapApplication(AppComponent);
<!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$/ja/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script> <!-- Polyfills --> <script src="$DEMOROOT$/ja/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/ja/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/ja/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$/ja/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> <gc-worksheet></gc-worksheet> </gc-spread-sheets> <div class="options-container"> <div class="options-row"> 以下のオプションを設定して、選択処理がどのように変更されるかご確認ください。 </div> <div class="options-row"> <label for="selectionPolicy">選択ポリシー:</label> <select name="selectionPolicy" id="selectionPolicy" [(ngModel)]="selectionPolicy" (change)="setSelectionPolicy()"> <option *ngFor="let item of selectionPolicyOptions" [value]="item.value|number">{{item.text}}</option> </select> </div> <div class="options-row"> <label for="selectionUnit">選択単位:</label> <select name="selectionUnit" id="selectionUnit" [(ngModel)]="selectionUnit" (change)="setSelectionUnit()"> <option *ngFor="let item of selectionUnitOptions" [value]="item.value|number">{{item.text}}</option> </select> </div> <div class="options-row"> <input type="checkbox" id="checkAllowDeselect" [(ngModel)]="allowDeselect" (change)="setAllowDeselect()"> <label for="checkAllowDeselect" style="display:inline-block">ユーザーに選択解除を許可</label> </div> <div class="options-row"> <label for="backColor">選択領域の背景色:</label> <input type="text" id="backColor" [(ngModel)]="backColor"> <input type="button" value="設定" (click)="setSelectionBackColor()"> </div> <div class="options-row"> <label for="borderColor">選択領域の枠線の色:</label> <input type="text" id="borderColor" [(ngModel)]="borderColor"> <input type="button" value="設定" (click)="setSelectionBorderColor()"> </div> <div class="options-row"> <input type="button" value="TabStopを有効にする" (click)="setIsTabStop(true)"> </div> <div class="options-row"> <input type="button" value="TabStopを無効にする" (click)="setIsTabStop(false)"> </div> <div class="options-row" style="padding-top: 10px"> <label>ユーザーが[Tab]キーを使用して選択領域にフォーカスを設定できるかどうかを指定します。</label> </div> </div> </div>
export function getData(){ 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 } ] }]; return data; }
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .options-row { font-size: 14px; padding: 5px; margin-top: 10px; } input { display: inline-block; } input[type="text"] { width: 160px; } label { display: inline-block; margin-bottom: 6px; width: 200px; } select { width: 120px; height: 35px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 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/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', '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', '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', 'tslib':'npm:tslib/tslib.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js', '@mescius/spread-sheets-angular': 'npm:@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', meta: { "*.component.ts": { loader: "system.component-loader.js" } } }, 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);