/*
    *
    * Wijmo Library 5.20181.462
    * http://wijmo.com/
    *
    * Copyright(c) GrapeCity, Inc.  All rights reserved.
    *
    * Licensed under the GrapeCity Commercial License.
    * sales@wijmo.com
    * wijmo.com/products/wijmo-5/license/
    *
    */
declare var Vue: any;
/**
 * Wijmo interop module for <a href="https://vuejs.org/">Vue</a>.
 *
 * This module provides Vue components that encapsulate Wijmo controls.
 *
 * To use it, your application must include references to the Vue
 * framework, as well as the regular Wijmo CSS and js files.
 *
 * To add Wijmo controls to Vue pages, include the appropriate
 * tags in your HTML files. For example, the code below adds
 * an @see:InputNumber control to a Vue page:
 *
 * <pre>&lt;wj-input-number
 *   format="c2"
 *   placeholder="Sales"
 *   :value.sync="view.currentItem.sales"
 *   :value-changed="refreshView"
 *   :min="0"
 *   :max="10000"
 *   :step="100"
 *   :is-required="false"&gt;
 * &lt;/wj-input-number&gt;</pre>
 *
 * The example illustrates the following important points:
 *
 * <ol>
 *   <li>
 *      Wijmo controls have tag names that start with the "wj" prefix, followed by
 *      the control name using lower-case and hyphen separators.</li>
 *   <li>
 *      The tag attribute names match the control's properties and events.</li>
 *   <li>
 *      Colons before attribute names indicate the attribute value should be
 *      interpreted as JavaScript expressions (e.g. <code>:min="0"</code>).</li>
 *   <li>
 *      Event handlers are specified the same way as regular properties
 *      (e.g. <code>:value-changed="refreshView"</code>).</li>
 *   <li>
 *      The <code>.sync</code> suffix after attribute names creates two-way
 *      bindings (e.g. <code>:value.sync="view.currentItem.sales"</code>).</li>
 * </ol>
 *
 * All Wijmo Vue components include an "initialized" event that is
 * raised after the control has been added to the page and initialized.
 * You can use this event to perform additional initialization in addition
 * to setting properties in markup. For example:
 *
 * <pre>&lt;wj-flex-grid :initialized="initGrid"&gt;
 * &lt;/wj-flex-grid&gt;</pre>

 * <pre>// Vue application
 * var app = new Vue({
 *   el: '#app',
 *   methods: {
 *     initGrid: function(s, e) {
 *
 *       // assign a custom MergeManager to the grid
 *       s.mergeManager = new CustomMergeManager(s);
 *
 *     }
 *   }
 * });</pre>
 *
 * All Wijmo Vue components include a "control" pseudo-property that allows you
 * to use the control's properties in the markup. For example:
 *
 * <pre>&lt;wj-list-box style="height:150px;width:250px;"
 *   :items-source="countries"
 *   control="listBox"&gt;
 * &lt;/wj-list-box&gt;
 * &lt;p&gt;
 *   selectedIndex: {{ listBox.selectedIndex }}&lt;/p&gt;
 * &lt;p&gt;
 *   selectedValue: {{ listBox.selectedValue }}&lt;/p&gt;</pre>
 *
 * The markup sets the controller's <b>listBox</b> property to the instance of
 * the <b>ListBox</b> control, so it can be used in markup.
 *
 * It is important that the <b>listBox</b> property be defined in <b>data</b>
 * object of the containing Vue context, or the component properties will not
 * be updated properly. For example:
 *
 * <pre>// Vue application
 * var app = new Vue({
 *   el: '#app',
 *   data: {
 *     listBox: null // will receive a reference to the ListBox control
 *   }
 * });</pre>
 */
declare module wijmo.vue {
    /**
     * Vue component that includes a given HTML fragment into the document.
     *
     * The <b>wj-include</b> component takes a <b>src</b> attribute that
     * specifies a file to load and include into the document. For example:
     *
     * <pre>&lt;wj-popup control="modalDialog" :modal="true" :hide-trigger="None"&gt;
     *   &lt;wj-include src="includes/dialog.htm"&gt;&lt;/wj-include&gt;
     * &lt;/wj-popup&gt;</pre>
     */
    var WjInclude: any;
    /**
     * Vue filter that applies globalized formatting to dates and numbers.
     *
     * For example, the code below uses the <b>wj-format</b> filter to format
     * a number as a currency value and a date as a short date using the
     * current Wijmo culture:
     *
     * <pre>&lt;p&gt;value: {&#8203;{ theAmount | wj-format 'c' }}&lt;/p&gt;
     * &lt;p&gt;date: {&#8203;{ theDate | wj-format 'd' }}&lt;/p&gt;</pre>
     */
    var WjFormat: any;
    /**
     * Vue component that encapsulates the @see:wijmo.nav.TreeView control.
     */
    var WjTreeView: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.AutoComplete control.
     */
    var WjAutoComplete: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.Calendar control.
     */
    var WjCalendar: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.ColorPicker control.
     */
    var WjColorPicker: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.ComboBox control.
     */
    var WjComboBox: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.InputColor control.
     */
    var WjInputColor: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.InputDate control.
     */
    var WjInputDate: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.InputDateTime control.
     */
    var WjInputDateTime: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.InputMask control.
     */
    var WjInputMask: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.InputNumber control.
     */
    var WjInputNumber: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.InputTime control.
     */
    var WjInputTime: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.ListBox control.
     */
    var WjListBox: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.MultiSelect control.
     */
    var WjMultiSelect: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.MultiAutoComplete control.
     */
    var WjMultiAutoComplete: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.Menu control.
     */
    var WjMenu: any;
    /**
     * Vue component that encapsulates the @see:wijmo.input.Popup control.
     */
    var WjPopup: any;
    /**
     * Vue component that encapsulates the @see:wijmo.grid.FlexGrid control.
     *
     * The example below shows how to instantiate and initialize a
     * @see:wijmo.grid.FlexGrid control using Vue markup:
     *
     * <pre>&lt;wj-flex-grid
     *   :items-source="data"&gt;
     *   &lt;wj-flex-grid-column binding="name" header="Name"&gt;
     *   &lt;/wj-flex-grid-column&gt;
     *   &lt;wj-flex-grid-column binding="sales" header="Sales" format="c0"&gt;
     *   &lt;/wj-flex-grid-column&gt;
     *   &lt;wj-flex-grid-column binding="expenses" header="Expenses" format="c0"&gt;
     *   &lt;/wj-flex-grid-column&gt;
     *   &lt;wj-flex-grid-column binding="active" header="Active"&gt;
     *   &lt;/wj-flex-grid-column&gt;
     *   &lt;wj-flex-grid-column binding="date" header="Date"&gt;
     *   &lt;/wj-flex-grid-column&gt;
     * &lt;/wj-flex-grid&gt;</pre>
     *
     * The code sets the <b>itemsSource</b> property to a collection that contains the grid
     * data, then specifies the columns to display using <b>wj-flex-grid-column</b>
     * components.
     */
    var WjFlexGrid: any;
    /**
     * Vue component that represents a @see:wijmo.grid.Column in a
     * @see:wijmo.grid.FlexGrid control.
     */
    var WjFlexGridColumn: any;
    /**
     * Vue component that represents a @see:wijmo.grid.filter.FlexGridFilter in a
     * @see:wijmo.grid.FlexGrid control.
     *
     * The example below shows how to instantiate and initialize a
     * @see:wijmo.grid.FlexGrid control with a filter using Vue markup:
     *
     * <pre>&lt;wj-flex-grid
     *   :items-source="data"&gt;
     *   &lt;wj-flex-grid-filter&gt;&lt;/wj-flex-grid-filter&gt;
     * &lt;/wj-flex-grid&gt;</pre>
     */
    var WjFlexGridFilter: any;
    /**
     * Vue component that encapsulates the @see:wijmo.chart.FlexChart control.
     *
     * The example below shows how to instantiate and initialize a
     * @see:wijmo.chart.FlexChart control using Vue markup:
     *
     * <pre>&lt;wj-flex-chart
     *     :items-source="data"
     *     binding-x="country"
     *     :header="props.header"
     *     :footer="props.footer"&gt;
     *
     *     &lt;wj-flex-chart-legend :position="props.legendPosition"&gt;
     *     &lt;/wj-flex-chart-legend&gt;
     *     &lt;wj-flex-chart-axis wj-property="axisX" :title="props.titleX"&gt;
     *     &lt;/wj-flex-chart-axis&gt;
     *     &lt;wj-flex-chart-axis wj-property="axisY" :title="props.titleY"&gt;
     *     &lt;/wj-flex-chart-axis&gt;
     *
     *     &lt;wj-flex-chart-series name="Sales" binding="sales"&gt;
     *     &lt;/wj-flex-chart-series&gt;
     *     &lt;wj-flex-chart-series name="Expenses" binding="expenses"&gt;
     *     &lt;/wj-flex-chart-series&gt;
     *     &lt;wj-flex-chart-series name="Downloads" binding="downloads"&gt;
     *     &lt;/wj-flex-chart-series&gt;
     * &lt;/wj-flex-chart&gt;</pre>
     *
     * The code sets the <b>itemsSource</b> property to a collection that contains the chart
     * data and the <b>bindingX</b> property to the data property that contains the chart X values.
     * It also sets the chart's <b>header</b> and <b>footer</b> properties to define titles to
     * show above and below the chart.
     *
     * The <b>wj-flex-chart-legend</b> and <b>wj-flex-chart-axis</b> components are used to
     * customize the chart's legend and axes.
     *
     * Finally, three <b>wj-flex-chart-series</b> components are used to specify the data
     * properties to be shown on the chart.
     */
    var WjFlexChart: any;
    /**
     * Vue component that represents a @see:wijmo.chart.Series in a
     * @see:wijmo.chart.FlexChart control.
     */
    var WjFlexChartSeries: any;
    /**
     * Vue component that represents the @see:wijmo.chart.Legend in a
     * @see:wijmo.chart.FlexChart control.
     */
    var WjFlexChartLegend: any;
    /**
     * Vue component that represents a @see:wijmo.chart.Axis in a
     * @see:wijmo.chart.FlexChart control.
     */
    var WjFlexChartAxis: any;
    /**
     * Vue component that encapsulates the @see:wijmo.gauge.RadialGauge control.
     *
     * The example below shows how to instantiate and initialize a
     * @see:wijmo.gauge.RadialGauge control using Vue markup:
     *
     * <pre>&lt;wj-radial-gauge
     *     :min="0" :max="1000" :step="50" :is-read-only="false"
     *     format="c0" :thumb-size="12" :show-text="Value"
     *     :show-ranges="false"
     *     :value.sync="sales"&gt;
     *     &lt;wj-range wj-property="face" :thickness="0.5"&gt;
     *     &lt;/wj-range&gt;
     *     &lt;wj-range wj-property="pointer" :thickness="0.5"&gt;
     *     &lt;/wj-range&gt;
     *     &lt;wj-range :min="0" :max="333" color="red"&gt;
     *     &lt;/wj-range&gt;
     *     &lt;wj-range :min="333" :max="666" color="gold"&gt;
     *     &lt;/wj-range&gt;
     *     &lt;wj-range :min="666" :max="1000" color="green"&gt;
     *     &lt;/wj-range&gt;
     * &lt;/wj-radial-gauge&gt;</pre>
     *
     * The code <b>min</b>, <b>max</b>, <b>step</b>, and <b>isReadOnly</b> properties
     * to define the range of the gauge and to allow users to edit its value.
     * Next, it binds the gauge's <b>value</b> property to a <b>sales</b> variable
     * in the controller.
     *
     * Then it sets the <b>format</b>, <b>thumbSize</b>, and <b>showRanges</b>
     * properties to define the appearance of the gauge. Finally, the markup sets
     * the thickness of the <b>face</b> and <b>pointer</b> ranges, and extra ranges
     * that will control the color of the <b>value</b> range depending on the gauge's
     * current value.
     */
    var WjRadialGauge: any;
    /**
     * Vue component that encapsulates the @see:wijmo.gauge.LinearGauge control.
     *
     * The example below shows how to instantiate and initialize a
     * @see:wijmo.gauge.LinearGauge control using Vue markup:
     *
     * <pre>&lt;wj-linear-gauge
     *     :min="0" :max="1000" :step="50" :is-read-only="false"
     *     format="c0" :thumb-size="20"
     *     :show-ranges="false"
     *     :value.sync="sales"&gt;
     *     &lt;wj-range wj-property="face" :thickness="0.5"&gt;
     *     &lt;/wj-range&gt;
     *     &lt;wj-range wj-property="pointer" :thickness="0.5"&gt;
     *     &lt;/wj-range&gt;
     *     &lt;wj-range :min="0" :max="333" color="red"&gt;
     *     &lt;/wj-range&gt;
     *     &lt;wj-range :min="333" :max="666" color="gold"&gt;
     *     &lt;/wj-range&gt;
     *     &lt;wj-range :min="666" :max="1000" color="green"&gt;
     *     &lt;/wj-range&gt;
     * &lt;/wj-linear-gauge&gt;</pre>
     *
     * The code <b>min</b>, <b>max</b>, <b>step</b>, and <b>isReadOnly</b> properties
     * to define the range of the gauge and to allow users to edit its value.
     * Next, it binds the gauge's <b>value</b> property to a <b>sales</b> variable
     * in the controller.
     *
     * Then it sets the <b>format</b>, <b>thumbSize</b>, and <b>showRanges</b>
     * properties to define the appearance of the gauge. Finally, the markup sets
     * the thickness of the <b>face</b> and <b>pointer</b> ranges, and extra ranges
     * that will control the color of the <b>value</b> range depending on the gauge's
     * current value.
     */
    var WjLinearGauge: any;
    /**
     * Vue component that encapsulates the @see:wijmo.gauge.BulletGraph control.
     */
    var WjBulletGraph: any;
    /**
     * Vue component that represents a @see:wijmo.gauge.Range in a
     * @see:wijmo.gauge.Gauge control.
     */
    var WjRange: any;
    /**
     * Vue component that encapsulates the @see:wijmo.olap.PivotPanel control.
     */
    var WjPivotPanel: any;
    /**
     * Vue component that encapsulates the @see:wijmo.olap.PivotGrid control.
     */
    var WjPivotGrid: any;
    /**
     * Vue component that encapsulates the @see:wijmo.olap.PivotChart control.
     */
    var WjPivotChart: any;
}

