"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// Import Wijmo web components
require("wijmo/wijmo.webcomponents.input");
require("wijmo/wijmo.webcomponents.grid");
require("wijmo/wijmo.webcomponents.grid.filter");
require("wijmo/wijmo.webcomponents.grid.grouppanel");
require("wijmo/wijmo.webcomponents.chart");
require("wijmo/wijmo.webcomponents.gauge");
// Though TabPanel is used in code, we need to import 'webcomponents.nav' to perform
// dummy registering of it as a web component; otherwise, TabPanel instances can't be created.
require("wijmo/wijmo.webcomponents.nav");
var wjNav = require("wijmo/wijmo.nav");
var dataSvc = require("./data");
if (document.readyState !== "loading") {
    init();
}
else {
    var readyEH_1 = function () {
        if (document.readyState !== "loading") {
            document.removeEventListener('readystatechange', readyEH_1);
            init();
        }
    };
    document.addEventListener('readystatechange', readyEH_1);
}
function init() {
    // initialize tabs used to show the source code
    var tabSrc = document.querySelectorAll('.tab-source');
    for (var i = 0; i < tabSrc.length; i++) {
        new wjNav.TabPanel(tabSrc[i]);
    }
    //// Introduction
    var gridIntro = document.getElementById('gridIntro');
    gridIntro.itemsSource = dataSvc.getData(100);
    //// Referencing and using in code
    // Find grid element in the DOM tree
    var gridRef = document.getElementById('gridRef');
    // The element is also a FlexGrid instance (inherited from FlexGrid),
    // so we can use FlexGrid api on the element, e.g. to assign its data
    // source.
    gridRef.itemsSource = dataSvc.getData(100);
    // Find group panel element in the DOM tree
    var panelRef = document.getElementById('panelRef');
    // and attach it to the grid:
    panelRef.grid = gridRef;
    // Find wjc-flex-grid-filter component in the DOM tree
    var filterRef = document.getElementById('filterRef');
    // and specify the filterColumns property value of its 
    // underlying FlexGridFilter object
    filterRef.control.filterColumns = ['country', 'date'];
    //// Child components
    var chData = dataSvc.getData(dataSvc.countries.length);
    var gridWithChildren = document.getElementById('gridWithChildren');
    gridWithChildren.itemsSource = chData;
    var chartWithChildren = document.getElementById('chartWithChildren');
    chartWithChildren.itemsSource = chData;
    //// Events
    // InputNumber and LinearGauge synchronized using valueChanged event
    var inpNumEvents = document.getElementById('inpNumEvents');
    var gaugeEvents = document.getElementById('gaugeEvents');
    inpNumEvents.addEventListener('value-changed', function (e) {
        // CustomEvent.target references the component where event occurred
        gaugeEvents.value = e.target.value;
    });
    gaugeEvents.addEventListener('value-changed', function (e) {
        inpNumEvents.value = e.target.value;
    });
    // FlexGrid's Active column formatted using formatItem event
    var gridEvents = document.getElementById('gridEvents');
    gridEvents.itemsSource = dataSvc.getData(100);
    gridEvents.addEventListener('format-item', function (e) {
        // CustomEvent.detail contains corresponding Wijmo event arguments
        var args = e.detail, grid = args.panel.grid;
        if (args.panel === grid.cells &&
            grid.columns[args.col].binding === 'active' &&
            !args.range.equals(grid.editRange)) {
            args.cell.innerHTML = grid.getCellData(args.row, args.col, false) ? 'Yes' : 'No';
        }
    });
    //// Creating programmatically
    // Find placeholder element
    var placeHolder = document.getElementById('gridProg');
    // Create FlexGrid web component
    var gridProg = document.createElement('wjc-flex-grid');
    // Add grid to DOM
    placeHolder.appendChild(gridProg);
    // Create Column web component
    var countryCol = document.createElement('wjc-flex-grid-column');
    // add child to parent before assigning its properties
    gridProg.appendChild(countryCol);
    countryCol.control.binding = 'country';
    countryCol.control.header = 'Country';
    countryCol.control.width = '*';
    // Create Column web component
    var downloadsCol = document.createElement('wjc-flex-grid-column');
    // add child to parent before assigning its properties
    gridProg.appendChild(downloadsCol);
    downloadsCol.control.binding = 'downloads';
    downloadsCol.control.header = 'Downloads';
    // Create FlexGridFilter web component
    var filter = document.createElement('wjc-flex-grid-filter');
    // add child to parent before assigning its properties
    gridProg.appendChild(filter);
    filter.filterColumns = ['country'];
    // Set grid data
    gridProg.itemsSource = dataSvc.getData(100);
}
//# sourceMappingURL=app.js.map