Toolbar: resize

app.html

<template>
  <div id="example">
    <div class="demo-section k-content wide">
      <ak-toolbar>
        <ak-toolbar-item k-overflow="never">
          <ak-template>
            <img src='http://demos.telerik.com/kendo-ui/content/web/toolbar/user.png' class='user-image'/>
          </ak-template>
        </ak-toolbar-item>
        <ak-toolbar-item k-type="button" k-text="Send" k-overflow="never"></ak-toolbar-item>
        <ak-toolbar-item k-type="button" k-text="Discard" k-overflow="never"></ak-toolbar-item>
        <ak-toolbar-item k-type="separator"></ak-toolbar-item>
        <ak-toolbar-item k-type="splitButton"
                        k-image-url="http://demos.telerik.com/kendo-ui/content/web/toolbar/save.png"
                        k-text="Save"
                        k-menu-buttons.bind="[
          	{ imageUrl: 'http://demos.telerik.com/kendo-ui/content/web/toolbar/save.png', text: 'Save as' },
          	{ imageUrl: 'http://demos.telerik.com/kendo-ui/content/web/toolbar/upload.png', text: 'Upload to drive' }
        ]"></ak-toolbar-item>
        <ak-toolbar-item k-type="splitButton"
                        k-image-url="http://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png"
                        k-text="Reply"
                        k-menu-buttons.bind="[
            { imageUrl: 'http://demos.telerik.com/kendo-ui/content/web/toolbar/save.png',  text: 'Reply All' },
            { imageUrl: 'http://demos.telerik.com/kendo-ui/content/web/toolbar/forward.png', text: 'Forward' },
            { imageUrl: 'http://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png', text: 'Reply & Delete' }
        ]">
        </ak-toolbar-item>
        <ak-toolbar-item k-type="separator"></ak-toolbar-item>
        <ak-toolbar-item k-overflow="never">
          <ak-template>
            <span>
              <label>Contacts:</label>
              <ak-drop-down-list k-option-label="Ann Devon"
                                k-data-text-field="text"
                                k-data-value-field="value"
                                k-data-source.bind="[
                                  { text: 'Ana Trujillo', value: 1 },
                                  { text: 'Antonio Moreno', value: 2 },
                                  { text: 'Christina Berglund', value: 3 },
                                  { text: 'Felipe Izquierdo', value: 4 }
                                ]">
              </ak-drop-downlist>
            </span>
          </ak-template>
        </ak-toolbar-item>
        <ak-toolbar-item k-overflow="never">
          <ak-template>
            <div>
              <label>Labels:</label>
              <ak-drop-down-list k-option-label="Forums"
                                k-data-text-field="text"
                                k-data-value-field="value"
                                k-data-source.bind="[
                                  { text: 'Follow up', value: 1 },
                                  { text: 'Misc', value: 2 },
                                  { text: 'Priority', value: 3 },
                                  { text: 'Deleted Messages', value: 4 }
                                ]">
              </ak-drop-downlist>
            </div>
          </ak-template>
          <ak-template for="overflowTemplate">
            <span></span>
          </ak-template>
        </ak-toolbar-item>
        <ak-toolbar-item k-type="separator"></ak-toolbar-item>
        <ak-toolbar-item k-type="buttonGroup">
          <ak-toolbar-item-button k-image-url="http://demos.telerik.com/kendo-ui/content/web/toolbar/done.png" k-text="Done" k-togglable.bind="true" k-group="category"></ak-toolbar-item-button>
          <ak-toolbar-item-button k-image-url="http://demos.telerik.com/kendo-ui/content/web/toolbar/todo.png" k-text="To Do" k-togglable.bind="true" k-group="category"></ak-toolbar-item-button>
          <ak-toolbar-item-button k-image-url="http://demos.telerik.com/kendo-ui/content/web/toolbar/important.png" k-text="Important" k-togglable.bind="true" k-group="category"></ak-toolbar-item-button>
        </ak-toolbar-item>
      </ak-toolbar>
    </div>
  </div>
</template>

app.js

export class Resize {}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}