"use strict";
// this is necessary to make vue.common.js functional in non-Node environments (e.g. SystemJS)
//let proc = window['process'] = window['process'] || {};
//proc.env = proc.env || {};
//proc.env.NODE_ENV = proc.env.NODE_ENV || 'debug';
Object.defineProperty(exports, "__esModule", { value: true });
// Vue2
// This import will work with vue.esm.js module (in ESM format = (ES5 code + ES6 import/export statements)), 
// destined for usage with WebPack. vue.esm.js exports its stuff using a "default export".
var vue_1 = require("vue");
// This import will work with vue.js (UMD) and vue.common.js (CommonJS) module, 
// that can be used with SystemJS. These modules can also be used with WebPack as well.
// These modules don't use "default export" to export their stuff.
var VueModule = require("vue");
// To make the same code functional with any Vue module kinds, we assign (VueModuleDefault || VueModule)
// to the Vue variable (one of them will contain a module reference while the other will be undefined),
// and use the Vue variable in code as the reference to the module.
exports.Vue = vue_1.default || VueModule;
//import { Vue}  from 'vue';
// In case where you need to work with vue.esm.js module only, you can import it by just this statement:
//import Vue from 'vue';
// In case where you need to work with vue.js or vue.common.js module only, you can import it by just this statement:
//import * as Vue from 'vue';
// Wijmo
// We don't need to import any symbols from Wijmo for Vue2 interop modules, we just need to load them,
// which will allow modules to globally register Vue2 components they contain.
require("wijmo/wijmo.vue2.input");
require("wijmo/wijmo.vue2.grid");
require("wijmo/wijmo.vue2.grid.detail");
var wjcCore = require("wijmo/wijmo");
var wjcGrid = require("wijmo/wijmo.grid");
var wjcGridDetail = require("wijmo/wijmo.grid.detail");
var wjcOdata = require("wijmo/wijmo.odata");
exports.AppComponent = exports.Vue.component('app', {
    template: "\n        <div class=\"container\">\n\n        <h1>\n            Row Details</h1>\n        <p>\n            Each row on the grids below represents a product category.\n            To see the products in each category, expand the rows by clicking the plus sign.\n            Expanded rows show a \"detail\" row below containing arbitrary content\n            (in this case a nested grid with product information).</p>\n        <p>\n            The detail rows are implemented using the <b>FlexGridDetailProvider</b> class.\n            The <b>FlexGridDetailProvider</b> class has a <b>createDetailCell</b> function \n            that creates HTML elements to show the details for any row. The content of the\n            detail cells is completely customizable.</p>\n        <p>\n            In addition to the <b>createDetailCell</b> function, the <b>FlexGridDetailProvider</b> \n            class has other properties that allow you to customize when the detail rows \n            are displayed, their dimensions, etc.</p>\n\n        <h3>\n            Using the <b>FlexGridDetailProvider</b> class</h3>\n        <p>\n            This grid uses the <b>FlexGridDetailProvider</b> class directly.\n            It specifies a <b>createDetailCell</b> function that creates \n            child grids to show the products in the category represented by \n            the main row.</p>\n        <p>\n            The code looks like this:</p>\n        <pre>// create FlexGridDetailProvider for \"flex\" control\nvar dp = new wijmo.grid.detail.FlexGridDetailProvider(s, {\n\n    // use animation when showing details\n    isAnimated: true,\n\n    // limit height of detail rows\n    maxHeight: 250,\n\n    // create detail cells for a given row\n    createDetailCell: function (row) {\n        var cell = document.createElement('div');\n        s.hostElement.appendChild(cell);\n        var detailGrid = new wijmo.grid.FlexGrid(cell, {\n            headersVisibility: wijmo.grid.HeadersVisibility.Column,\n            autoGenerateColumns: false,\n            itemsSource: $scope.getProducts(row.dataItem.CategoryID),\n            isReadOnly: true,\n            columns: [\n                { header: 'ID', binding: 'ProductID' },\n                { header: 'Name', binding: 'ProductName' },\n                { header: 'Qty/Unit', binding: 'QuantityPerUnit' },\n                { header: 'Unit Price', binding: 'UnitPrice' },\n                { header: 'Discontinued', binding: 'Discontinued' }\n            ]\n        });\n        cell.parentElement.removeChild(cell);\n        return cell;\n    },\n\n    // remove details from items with odd CategoryID\n    rowHasDetail: function (row) {\n        return row.dataItem.CategoryID % 2 == 0;\n    }\n});</pre>\n        <wj-flex-grid \n            :items-source=\"categories\"\n            :is-read-only=\"true\"\n            :initialized=\"initDetailProvider\">\n            <wj-flex-grid-column header=\"Name\" binding=\"CategoryName\"></wj-flex-grid-column>\n            <wj-flex-grid-column header=\"Description\" binding=\"Description\" width=\"*\"></wj-flex-grid-column>\n        </wj-flex-grid>\n\n        <h3>\n            Using the <b>wj-flex-grid-detail</b> directive</h3>\n        <p>\n            This grid uses the <b>wj-flex-grid-detail</b> directive.\n            The directive contains a template with a child FlexGrid that shows\n            the products in the category represented by the main row.</p>\n        <p>\n            The markup looks like this:</p>\n        <pre>\n &lt;wj-flex-grid allow-dragging=\"Both\"\n               :items-source=\"categories\"\n               :is-read-only=\"true\"&gt;\n     &lt;wj-flex-grid-column header=\"Name\" binding=\"CategoryName\"&gt;&lt;/wj-flex-grid-column&gt;\n     &lt;wj-flex-grid-column header=\"Description\" binding=\"Description\" width=\"*\"&gt;&lt;/wj-flex-grid-column&gt;\n     &lt;wj-flex-grid-detail  :max-height=\"850\" detail-visibility-mode=\"ExpandSingle\" :is-animated=\"true\" &gt;  \n         &lt;template slot-scope=\"props\"&gt;                     \n             &lt;wj-flex-grid :items-source=\"getProducts(props.dataItem.CategoryID)\"\n                           :is-read-only=\"true\"&gt;\n                 &lt;wj-flex-grid-column header=\"ID\" binding=\"ProductID\"&gt;&lt;/wj-flex-grid-column&gt;\n                 &lt;wj-flex-grid-column header=\"Name\" binding=\"ProductName\"&gt;&lt;/wj-flex-grid-column&gt;\n                 &lt;wj-flex-grid-column header=\"Qty/Unit\" binding=\"QuantityPerUnit\"&gt;&lt;/wj-flex-grid-column&gt;\n                 &lt;wj-flex-grid-column header=\"Unit Price\" binding=\"UnitPrice\"&gt;&lt;/wj-flex-grid-column&gt;\n                 &lt;wj-flex-grid-column header=\"Discontinued\" binding=\"Discontinued\"&gt;&lt;/wj-flex-grid-column&gt;\n             &lt;/wj-flex-grid&gt;\n           &lt;/template&gt;\n     &lt;/wj-flex-grid-detail&gt;\n &lt;/wj-flex-grid&gt;\n</pre>\n\n                <wj-flex-grid allow-dragging=\"Both\"\n                              :items-source=\"categories\"\n                              :is-read-only=\"true\">\n                    <wj-flex-grid-column header=\"Name\" binding=\"CategoryName\"></wj-flex-grid-column>\n                    <wj-flex-grid-column header=\"Description\" binding=\"Description\" width=\"*\"></wj-flex-grid-column>\n                    <wj-flex-grid-detail  :max-height=\"850\" :detail-visibility-mode=\"detailVisibilityMode\" :is-animated=\"isAnimated\" >  \n                        <template slot-scope=\"props\">                     \n                            <wj-flex-grid :items-source=\"getProducts(props.item.CategoryID)\"\n                                          :is-read-only=\"true\">\n                                <wj-flex-grid-column header=\"ID\" binding=\"ProductID\"></wj-flex-grid-column>\n                                <wj-flex-grid-column header=\"Name\" binding=\"ProductName\"></wj-flex-grid-column>\n                                <wj-flex-grid-column header=\"Qty/Unit\" binding=\"QuantityPerUnit\"></wj-flex-grid-column>\n                                <wj-flex-grid-column header=\"Unit Price\" binding=\"UnitPrice\"></wj-flex-grid-column>\n                                <wj-flex-grid-column header=\"Discontinued\" binding=\"Discontinued\"></wj-flex-grid-column>\n                            </wj-flex-grid>\n                          </template>\n                    </wj-flex-grid-detail>\n                </wj-flex-grid>\n\n        <!-- toggle detail animation -->\n        <p>\n            Select the value for the <b>isAnimated</b> property to \n            determine whether to use animation when showing row details.</p>\n        <wj-menu :header=\"'isAnimated: ' + isAnimated\"  \n                :selected-value=\"isAnimated\"\n                :items-source=\"animatedOptions\" \n                :item-clicked=\"animatedMenuItemClicked\">\n        </wj-menu>\n\n        <!-- select detailVisibilityMode -->\n        <p>\n            Select the value for the <b>detailVisibilityMode</b> property to \n            determine when the row details are visible.</p>\n        <wj-menu  :header=\"'detailVisibilityMode: ' + detailVisibilityMode\" \n                    :items-source=\"detailVisibilityModes\" \n                    :selected-value=\"detailVisibilityMode\"\n                    :item-clicked=\"detailVisibilityModeClicked\">\n        </wj-menu>\n\n        <h3>\n            Using the <b>wj-flex-grid-detail</b> directive with another template</h3>\n        <p>\n            The grid below uses the <b>wj-flex-grid-detail</b> directive and specifies\n            a template defined as HTML content, including a list created with an\n            <b>v-for</b> directive.</p>\n        <p>\n            The markup looks like this:</p>\n        <pre v-pre>\n        &lt;wj-flex-grid \n            :items-source=\"categories\"\n            :is-read-only=\"true\"&gt;\n            &lt;wj-flex-grid-column header=\"Name\" binding=\"CategoryName\"&gt;&lt;/wj-flex-grid-column&gt;\n            &lt;wj-flex-grid-column header=\"Description\" binding=\"Description\" width=\"*\"&gt;&lt;/wj-flex-grid-column&gt;\n            &lt;wj-flex-grid-detail detail-visibility-mode=\"ExpandSingle\" :is-animated=\"true\"&gt;\n                &lt;template slot-scope=\"props\"&gt;\n                    ID: &lt;b&gt;{{props.item.CategoryID}}&lt;/b&gt;&lt;br /&gt;\n                    Name: &lt;b&gt;{{props.item.CategoryName}}&lt;/b&gt;&lt;br /&gt;\n                    Description: &lt;b&gt;{{props.item.Description}}&lt;/b&gt;&lt;br /&gt;\n                    &lt;ol&gt;\n                        &lt;li v-for=\"p in getProducts(props.item.CategoryID).items\"&gt;{{p.ProductName}}&lt;/li&gt;\n                    &lt;/ol&gt;\n                &lt;/template&gt;\n            &lt;/wj-flex-grid-detail&gt;\n        &lt;/wj-flex-grid&gt;\n</pre>\n        <wj-flex-grid \n            :items-source=\"categories\"\n            :is-read-only=\"true\">\n            <wj-flex-grid-column header=\"Name\" binding=\"CategoryName\"></wj-flex-grid-column>\n            <wj-flex-grid-column header=\"Description\" binding=\"Description\" width=\"*\"></wj-flex-grid-column>\n            <wj-flex-grid-detail detail-visibility-mode=\"ExpandSingle\" :is-animated=\"true\">\n                <template slot-scope=\"props\">\n                    ID: <b>{{props.item.CategoryID}}</b><br />\n                    Name: <b>{{props.item.CategoryName}}</b><br />\n                    Description: <b>{{props.item.Description}}</b><br />\n                    <ol>\n                        <li v-for=\"p in getProducts(props.item.CategoryID).items\">{{p.ProductName}}</li>\n                    </ol>\n                </template>\n            </wj-flex-grid-detail>\n        </wj-flex-grid>\n        </div>\n    ",
    data: function () {
        var url = 'https://services.odata.org/Northwind/Northwind.svc';
        return {
            categories: new wjcOdata.ODataCollectionView(url, 'Categories', {
                sortOnServer: false
            }),
            products: new wjcOdata.ODataCollectionView(url, 'Products', {
                sortOnServer: false
            }),
            isAnimated: true,
            animatedOptions: [true, false],
            animatedHeader: 'isAnimated: true',
            detailVisibilityMode: 'ExpandSingle',
            detailVisibilityModeHeader: 'detailVisibilityMode: ExpandSingle',
            detailVisibilityModes: ['Code', 'Selection', 'ExpandSingle', 'ExpandMulti']
        };
    },
    methods: {
        getProducts: function (categoryID) {
            var view = this.products[categoryID];
            if (!view) {
                view = new wjcCore.CollectionView(this.products.sourceCollection);
                view.filter = function (item) {
                    return item.CategoryID == categoryID;
                };
                this.products[categoryID] = view;
            }
            return view;
        },
        initDetailProvider: function (s, e) {
            var _this = this;
            var dp = new wjcGridDetail.FlexGridDetailProvider(s, {
                // use animation when showing details
                isAnimated: true,
                // limit height of detail rows
                maxHeight: 250,
                // create detail cells for a given row
                createDetailCell: function (row) {
                    var cell = document.createElement('div');
                    s.hostElement.appendChild(cell);
                    var detailGrid = new wjcGrid.FlexGrid(cell, {
                        headersVisibility: wjcGrid.HeadersVisibility.Column,
                        autoGenerateColumns: false,
                        itemsSource: _this.getProducts(row.dataItem.CategoryID),
                        isReadOnly: true,
                        columns: [
                            { header: 'ID', binding: 'ProductID' },
                            { header: 'Name', binding: 'ProductName' },
                            { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
                            { header: 'Unit Price', binding: 'UnitPrice' },
                            { header: 'Discontinued', binding: 'Discontinued' }
                        ]
                    });
                    cell.parentElement.removeChild(cell);
                    return cell;
                },
                // remove details from items with odd CategoryID
                rowHasDetail: function (row) {
                    return row.dataItem.CategoryID % 2 == 0;
                }
            });
        },
        animatedMenuItemClicked: function (s, e) {
            this.isAnimated = s.selectedValue;
        },
        detailVisibilityModeClicked: function (s, e) {
            this.detailVisibilityMode = s.selectedValue;
        }
    },
});
new exports.Vue({
    el: '#app'
});
//# sourceMappingURL=app.js.map