gist-master

<template>
  <require from="aurelia-kendoui-bridge/chart/chart"></require>
  <ak-chart  k-title.bind="{text: 'Hybrid car mileage report'}"
            k-legend.bind="{position: 'top'}"
            k-series.bind="series"
            k-value-axis.bind="valueAxis"
            k-category-axis.bind="categoryAxis">
  </ak-chart>
</template>

gist-master

<template>
  <require from="aurelia-kendoui-bridge/chart/chart"></require>
  <ak-chart  k-title.bind="{text: 'Charge current vs. charge time'}"
            k-legend.bind="{visible: true}"
            k-series-defaults.bind="{type: 'scatterLine'}"
            k-series.bind="series"
            k-x-axis.bind="xAxis"
            k-y-axis.bind="yAxis"
            k-tooltip.bind="tooltip">
  </ak-chart>

gist-master

<template>
  <require from="aurelia-kendoui-bridge/autocomplete/autocomplete"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>
  <div id="example">
    <div class="demo-section k-content">
      <p><strong>Find a customer:</strong></p>

      <ak-autocomplete k-data-source.bind="datasource"
                      k-height.bind="400"
                      k-data-text-field="ContactName">

gist-master

<template>
  <require from="./logger.js"></require>
  <require from="aurelia-kendoui-bridge/dropdownlist/dropdownlist"></require>
  
  <div id="example">
    <div class="demo-section k-content">
      <h4>dropdownlist</h4>
      <ak-drop-down-list k-data-text-field="text"
                        k-data-value-field="value"
                        k-data-source.bind="data"

gist-master

<template>
  <require from="./flat.css!css"></require>
  <require from="aurelia-kendoui-bridge/flatcolorpicker/flatcolorpicker"></require>
  
  <div class="demo-section hidden-on-narrow k-content wide">
      <div id="bike">
          <div id="bike-tail" css="background-color: ${ tailBackground }"></div>
          <div id="bike-head" css="background-color: ${ headBackground }"></div>
      </div>

gist-master

<template>
  <require from="aurelia-kendoui-bridge/chart/chart"></require>
  <ak-chart  k-title.bind="{text: 'Olympic Medals won by USA'}"
            k-legend.bind="legend"
            k-series-defaults.bind="seriesDefaults"
            k-series.bind="series"
            k-value-axis.bind="valueAxis"
            k-category-axis.bind="categoryAxis"
            k-tooltip.bind="tooltip">
  </ak-chart>

gist-master

<template>
  <require from="aurelia-kendoui-bridge/spreadsheet/spreadsheet"></require>
  <require from="./logger"></require>
  
  <div id="example">
    <ak-spreadsheet style="width: 100%"
                   k-sheets.bind="sheets"
                   k-on-change.delegate="onChange($event.detail)"
                   k-on-render.delegate="logger.log('render')"
                   k-on-excel-export.delegate="logger.log('excel export')">

gist-master

<template>
  <require from="aurelia-kendoui-bridge/datetimepicker/datetimepicker"></require>

  <div id="example">
    <div class="demo-section k-content" style="text-align: center;">
			<h4>Disable weekends</h4>
			<input ak-datetimepicker="k-value.bind: firstDate" k-disable-dates.bind="['sa', 'su']"/>

			<h4 style="margin-top:1em">Disable Federal Holidays in USA in 2015</h4>
			<input ak-datetimepicker="k-value.bind: today" k-dates.bind="holidays"

gist-master

<template>
  <require from="aurelia-kendoui-bridge/button/button"></require>
  <require from="./basic-use.css"></require>
  <div id="example" class="btn-basic-use">
      <div class="demo-section k-content">
          <div>
              <h4>Basic Button</h4>
              <p>
                  <button ak-button class="k-primary">Primary Button</button>
                  <button ak-button>Button</button>

gist-master

<template>
  <require from="aurelia-kendoui-bridge/chart/chart"></require>
  <ak-chart  k-title.bind="{text: 'World population by age group and sex'}"
            k-legend.bind="legend"
            k-series-defaults.bind="seriesDefaults"
            k-series.bind="series"
            k-value-axis.bind="valueAxis"
            k-category-axis.bind="categoryAxis"
            k-tooltip.bind="tooltip">
  </ak-chart>