BOM（部品表）1 | 使用例 | Wijmo（ウィジモ）デモアプリケーション | Developer Solutions〈開発支援ツール〉

import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import { FlexGrid, Row } from '@mescius/wijmo.grid';
import { ListBox, Popup, InputNumber, InputDate } from '@mescius/wijmo.input';
import { FlexGridSearch } from '@mescius/wijmo.grid.search';
import * as wjGridXlsx from '@mescius/wijmo.grid.xlsx';
import '@mescius/wijmo.cultures/wijmo.culture.ja';
import { getData } from './data';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
// grid with selectable columns
const flexGrid = new FlexGrid('#theGrid', {
autoGenerateColumns: false,
allowMerging: 'ColumnHeaders',
columns: [
{ binding: 'id', header: 'ID', visible: false, cssClass: 'idcol' },
{ binding: 'productCode', header: 'コード', cssClassAll: 'product' },
{ binding: 'name', header: '名称', cssClassAll: 'product' },
{ binding: 'category', header: '区分', cssClassAll: 'product' },
{ binding: 'quantity', header: '発注数', cssClassAll: 'product' },
{ binding: 'unitPrice', header: '単価', format: 'c', cssClassAll: 'product' },
{ binding: 'supplier', header: '名称' },
{ binding: 'supplierCode', header: 'コード', visible: false },
{ binding: 'date', header: '発注日' },
{ binding: 'shipdate', header: '出荷日', visible: false },
{ binding: 'others', header: '備考', visible: false },
],
isReadOnly: true,
itemsSource: getData(),
});
flexGrid.formatItem.addHandler(function (s, e) {
if (e.panel == s.rowHeaders && e.col == 0) {
e.cell.innerHTML = '<span class="wj-glyph-pencil"></span>';
}
});
const list = new ListBox('#theListBox2', {
displayMemberPath: 'header',
checkedMemberPath: 'selected',
itemsSource: flexGrid.columns,
checkedItemsChanged: (sender) => {
let visbleCol = sender.checkedItems.map((item) => {
return item.index;
});
flexGrid.columns.forEach((col, index) => {
col.visible = visbleCol.includes(index);
});
}
});
list.checkedItems = list.itemsSource.filter((item) => item.visible === true);
new FlexGridSearch('#theSearch', {
placeholder: '検索',
grid: flexGrid
});
setHeader();
document.getElementById('saveXlsx').addEventListener('click', () => {
wjGridXlsx.FlexGridXlsxConverter.saveAsync(flexGrid, {
includeColumnHeaders: document.querySelector('#exportIncludeColumnHeader').checked,
}, 'FlexGrid.xlsx');
});
// handle button clicks
flexGrid.addEventListener(flexGrid.hostElement, 'click', function (e) {
var ht = flexGrid.hitTest(e);
if (ht.panel == flexGrid.rowHeaders) {
//
// prepare form
var item = flexGrid.rows[ht.row].dataItem;
formControls.productCode.textContent = `${item.productCode} (${item.name})`;
formControls.quantity.value = item.quantity;
formControls.unitPrice.value = item.unitPrice;
formControls.date.value = item.date;
formControls.popup.show(true, function (e) {
if (e.dialogResult == 'wj-hide-ok') {
//
// commit changes if the user pressed the OK button
flexGrid.collectionView.editItem(item);
item.quantity = formControls.quantity.value;
item.unitPrice = formControls.unitPrice.value;
item.date = formControls.date.value;
flexGrid.collectionView.commitEdit();
}
//
// return focus to the grid
flexGrid.focus();
});
}
});
//
// attach controls to input form
var formControls = {
popup: new Popup('#popup'),
productCode: document.getElementById('productCode'),
//country: new ComboBox('#country', { itemsSource: countries }),
quantity: new InputNumber('#quantity', { min: 0, step: 10 }),
date: new InputDate('#date'),
unitPrice: new InputNumber('#unitPrice', { min: 0, format: 'c0' }),
};
function setHeader() {
var extraRow = new Row();
extraRow.allowMerging = true;
// add extra header row to the grid
var panel = flexGrid.columnHeaders;
panel.rows.splice(0, 0, extraRow);
//
// populate the extra header row
for (let colIndex = 1; colIndex <= 5; colIndex++) {
panel.setCellData(0, colIndex, '商品情報');
}
for (let colIndex = 6; colIndex <= 7; colIndex++) {
panel.setCellData(0, colIndex, 'サプライヤ');
}
['id', 'date', 'shipdate', 'others'].forEach(function (binding) {
let col = flexGrid.getColumn(binding);
col.allowMerging = true;
panel.setCellData(0, col.index, col.header);
});
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo BOM Example1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div class="dataList ">
<div class="lists form-inline well ">
<div id="combo"></div>
<p>グリッド内のデータを検索します。</p>
<div id="theSearch"></div>
<hr>
<P>列の表示/非表示を変更します。</P>
<div id="theListBox2"></div>
<hr>
<button id="saveXlsx" class="btn btn-default">Excelエクスポート</button>
<label>
<input id="exportIncludeColumnHeader" type="checkbox"> 列ヘッダーを含む
</label>
</div>
<div class="grid">
<div id="theGrid"></div>
</div>
</div>
<!-- the popup editor -->
<div id="popup" class="modal-content">
<div class="modal-header">
<button type="button" tabindex="-1" class="close wj-hide">
&times;
</button>
<h4 class="modal-title"><span id="productCode"></span>の編集</h4>
</div>
<div class="modal-body">
<div class="wj-labeled-input">
<input id="quantity" />
<label for="quantity">発注数</label>
</div>
<div class="wj-labeled-input">
<input id="unitPrice" />
<label for="unitPrice">単価</label>
</div>
<div class="wj-labeled-input">
<input id="date" />
<label for="date">発注日</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary wj-hide-ok">OK</button>
<button type="button" class="btn btn-default wj-hide">キャンセル</button>
</div>
</div>
</div>
</div>
</body>
</html>

export function getData() {
return [
//BTA
{ id: 0, productCode: "BTA-01", name: "BicycleTypeA", category: "プロダクト", quantity: 1, unitPrice: 35000, supplier: 'GrapeCycle Ltd', supplierCode: 'GCL', date: new Date(), shipdate: new Date(), others: '出荷前要確認' },
{ id: 1, productCode: "BTA-02", name: "ボディ", category: "パーツ", quantity: 1, unitPrice: 4500, supplier: 'シラー製作所', supplierCode: '', date: new Date(), shipdate: '', others: '' },
{ id: 2, productCode: "BTA-02-01", name: "フレーム", category: "パーツ", quantity: 1, unitPrice: 3000, supplier: 'シラー製作所', supplierCode: 'GCC', date: new Date(), shipdate: '', others: '' },
{ id: 3, productCode: "BTA-02-02", name: "ハンドル", category: "パーツ", quantity: 1, unitPrice: 1500, supplier: 'シラー製作所', supplierCode: 'GCC', date: new Date(), shipdate: '', others: '' },
{ id: 4, productCode: "BTA-03", name: "ベル", category: "パーツ", quantity: 1, unitPrice: 500, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 5, productCode: "BTA-04", name: "リフレクター", category: "パーツ", quantity: 2, unitPrice: 500, supplier: '（株）葡萄自転車', supplierCode: 'GbC', date: new Date(), shipdate: '', others: '' },
{ id: 6, productCode: "BTA-05", name: "サドル", category: "パーツ", quantity: 1, unitPrice: 1000, supplier: '（株）葡萄自転車', supplierCode: 'GbC', date: new Date(), shipdate: '', others: '' },
{ id: 7, productCode: "BTA-06", name: "ホイール", category: "パーツ", quantity: 2, unitPrice: 3000, supplier: 'Muscut Parts Thai', supplierCode: 'MPT', date: new Date(), shipdate: '', others: '' },
{ id: 8, productCode: "BTA-06-01", name: "リム", category: "パーツ", quantity: 2, unitPrice: 2000, supplier: 'Muscut Parts Thai', supplierCode: 'MPT', date: new Date(), shipdate: '', others: '' },
{ id: 9, productCode: "BTA-06-02", name: "スポーク", category: "パーツ", quantity: 24, unitPrice: 100, supplier: 'Muscut Parts Thai', supplierCode: 'MPT', date: new Date(), shipdate: '', others: '' },
{ id: 10, productCode: "BTA-06-03", name: "ハブ", category: "パーツ", quantity: 2, unitPrice: 600, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 11, productCode: "BTA-07", name: "トランスミッション", category: "パーツ", quantity: 4500, unitPrice: 0, supplier: '', supplierCode: '', date: new Date(), shipdate: '', others: '' },
{ id: 11, productCode: "BTA-07-01", name: "スプロケット", category: "パーツ", quantity: 8, unitPrice: 800, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 13, productCode: "BTA-07-02", name: "チェーン", category: "パーツ", quantity: 1, unitPrice: 500, supplier: '葡萄チェーン', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 14, productCode: "BTA-07-03", name: "シフトレバー", category: "パーツ", quantity: 1, unitPrice: 500, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 15, productCode: "BTA-07-04", name: "シフトワイヤー", category: "パーツ", quantity: 2, unitPrice: 200, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 16, productCode: "BTA-08", name: "ブレーキ", category: "パーツ", quantity: 1, unitPrice: 3000, supplier: 'BigTheBudo', supplierCode: 'BTB', date: new Date(), shipdate: '', others: '' },
{ id: 17, productCode: "BTA-08-01", name: "ブレーキレバー", category: "パーツ", quantity: 2, unitPrice: 400, supplier: 'BigTheBudo', supplierCode: 'BTB', date: new Date(), shipdate: '', others: '' },
{ id: 18, productCode: "BTA-08-02", name: "ブレーキワイヤー", category: "パーツ", quantity: 2, unitPrice: 200, supplier: 'BigTheBudo', supplierCode: 'BTB', date: new Date(), shipdate: '', others: '' },
{ id: 19, productCode: "BTA-09", name: "ペダル", category: "パーツ", quantity: 2, unitPrice: 1000, supplier: '（株）葡萄自転車', supplierCode: 'GbC', date: new Date(), shipdate: '', others: '' },
{ id: 20, productCode: "BTA-10", name: "スタンド", category: "パーツ", quantity: 1, unitPrice: 3000, supplier: '（株）葡萄自転車', supplierCode: 'GbC', date: new Date(), shipdate: '', others: '' },
//BTB
{ id: 0, productCode: "BTB-01", name: "BicycleTypeB", category: "プロダクト", quantity: 1, unitPrice: 50000, supplier: 'GrapeCycle Ltd', supplierCode: 'GCL', date: new Date(), shipdate: new Date(), others: '出荷前要確認' },
{ id: 1, productCode: "BTB-02", name: "ボディ", category: "パーツ", quantity: 1, unitPrice: 8000, supplier: 'シラー製作所', supplierCode: 'GCC', date: new Date(), shipdate: '', others: '' },
{ id: 2, productCode: "BTB-02-01", name: "フレーム", category: "パーツ", quantity: 1, unitPrice: 5000, supplier: 'シラー製作所', supplierCode: 'GCC', date: new Date(), shipdate: '', others: '' },
{ id: 3, productCode: "BTB-02-02", name: "ハンドル", category: "パーツ", quantity: 1, unitPrice: 3000, supplier: 'シラー製作所', supplierCode: 'GCC', date: new Date(), shipdate: '', others: '' },
{ id: 4, productCode: "BTB-03", name: "ベル", category: "パーツ", quantity: 1, unitPrice: 800, supplier: '葡萄製作所（株）', supplierCode: 'GCM', date: new Date(), shipdate: '', others: '' },
{ id: 5, productCode: "BTB-04", name: "リフレクター", category: "パーツ", quantity: 2, unitPrice: 500, supplier: '（株）葡萄工房', supplierCode: 'GS', date: new Date(), shipdate: '', others: '' },
{ id: 6, productCode: "BTB-05", name: "サドル", category: "パーツ", quantity: 1, unitPrice: 3000, supplier: '（株）葡萄工房', supplierCode: 'GS', date: new Date(), shipdate: '', others: '' },
{ id: 7, productCode: "BTB-06", name: "ホイール", category: "パーツ", quantity: 2, unitPrice: 2000, supplier: 'Muscut Parts Thai', supplierCode: 'MPT', date: new Date(), shipdate: '', others: '' },
{ id: 8, productCode: "BTB-06-01", name: "リム", category: "パーツ", quantity: 2, unitPrice: 2000, supplier: 'Muscut Parts Thai', supplierCode: 'MPT', date: new Date(), shipdate: '', others: '' },
{ id: 9, productCode: "BTB-06-02", name: "スポーク", category: "パーツ", quantity: 24, unitPrice: 100, supplier: 'Muscut Parts Thai', supplierCode: 'MPT', date: new Date(), shipdate: '', others: '' },
{ id: 10, productCode: "BTB-06-03", name: "ハブ", category: "パーツ", quantity: 2, unitPrice: 6, supplier: '葡萄製作所（株）', supplierCode: 'GCM', date: new Date(), shipdate: '', others: '' },
{ id: 11, productCode: "BTB-07", name: "トランスミッション", category: "パーツ", quantity: 1, unitPrice: 1300, supplier: '', supplierCode: '', date: new Date(), shipdate: '', others: '' },
{ id: 11, productCode: "BTB-07-01", name: "スプロケット", category: "パーツ", quantity: 8, unitPrice: 800, supplier: '葡萄製作所（株）', supplierCode: 'GCM', date: new Date(), shipdate: '', others: '' },
{ id: 13, productCode: "BTB-07-02", name: "チェーン", category: "パーツ", quantity: 1, unitPrice: 500, supplier: '葡萄チェーン', supplierCode: 'GCM', date: new Date(), shipdate: '', others: '' },
{ id: 14, productCode: "BTB-07-03", name: "シフトレバー", category: "パーツ", quantity: 1, unitPrice: 500, supplier: '葡萄製作所（株）', supplierCode: 'GCM', date: new Date(), shipdate: '', others: '' },
{ id: 15, productCode: "BTB-07-04", name: "シフトワイヤー", category: "パーツ", quantity: 2, unitPrice: 200, supplier: '葡萄製作所（株）', supplierCode: 'GCM', date: new Date(), shipdate: '', others: '' },
{ id: 16, productCode: "BTB-08", name: "ブレーキ", category: "パーツ", quantity: 1, unitPrice: 1000, supplier: 'BigTheBudo', supplierCode: 'BTB', date: new Date(), shipdate: '', others: '' },
{ id: 17, productCode: "BTB-08-01", name: "ブレーキレバー", category: "パーツ", quantity: 2, unitPrice: 400, supplier: 'BigTheBudo', supplierCode: 'BTB', date: new Date(), shipdate: '', others: '' },
{ id: 18, productCode: "BTB-08-02", name: "ブレーキワイヤー", category: "パーツ", quantity: 2, unitPrice: 200, supplier: 'BigTheBudo', supplierCode: 'BTB', date: new Date(), shipdate: '', others: '' },
{ id: 19, productCode: "BTB-09", name: "ペダル", category: "パーツ", quantity: 2, unitPrice: 1000, supplier: '（株）葡萄工房', supplierCode: 'GS', date: new Date(), shipdate: '', others: '' },
{ id: 20, productCode: "BTB-10", name: "スタンド", category: "パーツ", quantity: 1, unitPrice: 3000, supplier: '（株）葡萄工房', supplierCode: 'GS', date: new Date(), shipdate: '', others: '' },
//BTC
{ id: 0, productCode: "BTC-01", name: "BicycleTypeC", category: "プロダクト", quantity: 1, unitPrice: 20000, supplier: 'GrapeCycle Ltd', supplierCode: 'GCL', date: new Date(), shipdate: new Date(), others: '出荷前要確認' },
{ id: 1, productCode: "BTC-02", name: "ボディ", category: "パーツ", quantity: 1, unitPrice: 3000, supplier: 'シラー製作所', supplierCode: 'GCC', date: new Date(), shipdate: '', others: '' },
{ id: 2, productCode: "BTC-02-01", name: "フレーム", category: "パーツ", quantity: 1, unitPrice: 2000, supplier: 'シラー製作所', supplierCode: 'GCC', date: new Date(), shipdate: '', others: '' },
{ id: 3, productCode: "BTC-02-02", name: "ハンドル", category: "パーツ", quantity: 1, unitPrice: 1000, supplier: 'シラー製作所', supplierCode: 'GCC', date: new Date(), shipdate: '', others: '' },
{ id: 4, productCode: "BTC-03", name: "ベル", category: "パーツ", quantity: 1, unitPrice: 300, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 5, productCode: "BTC-04", name: "リフレクター", category: "パーツ", quantity: 2, unitPrice: 500, supplier: '葡萄組合', supplierCode: 'GbC', date: new Date(), shipdate: '', others: '' },
{ id: 6, productCode: "BTC-05", name: "サドル", category: "パーツ", quantity: 1, unitPrice: 800, supplier: '葡萄組合', supplierCode: 'GC1', date: new Date(), shipdate: '', others: '' },
{ id: 7, productCode: "BTC-06", name: "ホイール", category: "パーツ", quantity: 2, unitPrice: 1500, supplier: 'Muscut Parts Thai', supplierCode: 'MPT', date: new Date(), shipdate: '', others: '' },
{ id: 8, productCode: "BTC-06-01", name: "リム", category: "パーツ", quantity: 2, unitPrice: 1000, supplier: 'Muscut Parts Thai', supplierCode: 'MPT', date: new Date(), shipdate: '', others: '' },
{ id: 9, productCode: "BTC-06-02", name: "スポーク", category: "パーツ", quantity: 24, unitPrice: 100, supplier: 'Muscut Parts Thai', supplierCode: 'MPT', date: new Date(), shipdate: '', others: '' },
{ id: 10, productCode: "BTC-06-03", name: "ハブ", category: "パーツ", quantity: 2, unitPrice: 600, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 11, productCode: "BTC-07", name: "トランスミッション", category: "パーツ", quantity: 1, unitPrice: 800, supplier: '', supplierCode: '', date: new Date(), shipdate: '', others: '' },
{ id: 11, productCode: "BTC-07-01", name: "スプロケット", category: "パーツ", quantity: 8, unitPrice: 800, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 13, productCode: "BTC-07-02", name: "チェーン", category: "パーツ", quantity: 1, unitPrice: 500, supplier: '葡萄チェーン', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 14, productCode: "BTC-07-03", name: "シフトレバー", category: "パーツ", quantity: 1, unitPrice: 500, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 15, productCode: "BTC-07-04", name: "シフトワイヤー", category: "パーツ", quantity: 2, unitPrice: 200, supplier: '葡萄製鉄（株）', supplierCode: 'GCNC', date: new Date(), shipdate: '', others: '' },
{ id: 16, productCode: "BTC-08", name: "ブレーキ", category: "パーツ", quantity: 1, unitPrice: 3200, supplier: 'BigTheBudo', supplierCode: 'BTB', date: new Date(), shipdate: '', others: '' },
{ id: 17, productCode: "BTC-08-01", name: "ブレーキレバー", category: "パーツ", quantity: 2, unitPrice: 400, supplier: 'BigTheBudo', supplierCode: 'BTB', date: new Date(), shipdate: '', others: '' },
{ id: 18, productCode: "BTC-08-02", name: "ブレーキワイヤー", category: "パーツ", quantity: 2, unitPrice: 200, supplier: 'BigTheBudo', supplierCode: 'BTB', date: new Date(), shipdate: '', others: '' },
{ id: 19, productCode: "BTC-09", name: "ペダル", category: "パーツ", quantity: 2, unitPrice: 800, supplier: '葡萄組合', supplierCode: 'GC1', date: new Date(), shipdate: '', others: '' },
{ id: 20, productCode: "BTC-10", name: "スタンド", category: "パーツ", quantity: 1, unitPrice: 2000, supplier: '葡萄組合', supplierCode: 'GC1', date: new Date(), shipdate: '', others: '' },
];
}

.wj-flexgrid {
margin-left: 5px;
max-height: 500px;
}
.wj-listbox {
max-height: 180px;
min-width: 150px;
}
.dataList {
display: flex;
}
.wj-combobox {
width: 200px;
}
.wj-flexgridsearch{
width: 180px;
}
.modal-content {
width: 400px;
}
/* style our custom 'edit buttons' */
.wj-rowheaders .wj-cell .wj-glyph-pencil {
opacity: .5;
transform: scale(.75);
}
.wj-rowheaders .wj-cell:hover .wj-glyph-pencil {
opacity: 1;
color: #cc0000;
transform: scale(1.5) rotate(-90deg);
transition: all 400ms;
}
/* wj-labeled-input: adapted from MDL styles */
/* label input container */
.wj-labeled-input {
position: relative;
font-size: 16px;
display: inline-block;
box-sizing: border-box;
width: 300px;
max-width: 100%;
margin: 0 20px;
padding: 20px 0;
}
/* Wijmo control in the container */
.wj-labeled-input .wj-control.wj-content {
margin: 0;
width: 100%;
background-color: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.wj-labeled-input .wj-control.wj-content button {
opacity: 0.75;
border-color: rgba(0, 0, 0, .1);
}
.wj-labeled-input .wj-input-group .wj-form-control {
float: none;
}
/* label in the container (must come after the control) */
.wj-labeled-input label {
font-size: 16px;
top: 24px;
bottom: 0;
margin: 0;
pointer-events: none;
position: absolute;
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-align: left;
color: rgba(0, 0, 0, 0.258824);
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* move label out of the way when control is focused or not empty */
.wj-static-labels .wj-labeled-input :not(.wj-state-focused)+label,
.wj-labeled-input .wj-state-focused+label,
.wj-labeled-input :not(.wj-state-empty)+label {
font-size: 12px;
top: 4px;
color: rgb(63, 81, 181);
visibility: visible;
}
.wj-labeled-input .wj-state-invalid+label {
color: #d50000;
}
.wj-cell.wj-alt {
background: #e5f8ff;
}
.wj-row .wj-cell.idcol {
background: #eee 
}
.wj-row .wj-cell.idcol .wj-state-active.wj-state-selected{
background: #eee 
}
.wj-cells .wj-cell.wj-state-selected.idcol{
background: #0085c7;
color: #fff;
}
.wj-header.wj-cell.product{
background:#e6d4a1
}
/* underline label */
.wj-labeled-input label:after {
background-color: rgb(63, 81, 181);
bottom: 20px;
content: '';
height: 2px;
left: 45%;
position: absolute;
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
visibility: hidden;
width: 10px;
}
/* show underline when focused */
.wj-labeled-input .wj-state-focused+label:after {
left: 0;
visibility: visible;
width: 100%;
}
/* validation message */
.wj-labeled-input .wj-error {
color: #d50000;
position: absolute;
font-size: 12px;
margin-top: 3px;
visibility: hidden;
display: block;
}
.wj-labeled-input .wj-control.wj-state-invalid~.wj-error {
visibility: visible;
}

(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'jszip': 'npm:jszip/dist/jszip.js',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js',
'@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js',
'@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js',
'@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js',
'@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js',
'@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js',
'@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js',
'@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js',
'@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js',
'@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js',
'@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js',
'@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js',
'@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js',
'@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js',
'@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js',
'@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js',
'@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js',
'@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js',
'@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js',
'@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js',
'@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js',
'@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js',
'@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js',
'@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js',
'@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js',
'@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js',
'@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js',
'@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js',
'@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js',
'@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js',
'@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js',
'@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js',
'@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js',
'@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js',
'@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js',
'@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js',
'@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js',
'@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);