Toolbar: integration with editors

app.html

<template>
  <require from="./integration-with-editors.css"></require>
  <div id="example">
    <div class="demo-section k-content wide">
        <h4>Customize the element</h4>
        <ak-toolbar id="toolbar"
                   k-resizable.bind="false"
                   k-on-toggle.delegate="onToggle($event.detail)">
          <ak-toolbar-item>
            <ak-template>
              <label>SHAPE:</label>
              <ak-drop-down-list k-data-text-field="text"
                                k-data-value-field="value"
                                k-value.two-way="shape"
                                k-data-source.bind="[
                            { text: 'Rectangle', value: 0 },
                            { text: 'Rounded rectangle', value: 30 },
                            { text: 'Circle/Ellipse', value: 300 }]">
              </ak-drop-down-list>
            </ak-template>
          </ak-toolbar-item>
          <ak-toolbar-item k-type="separator"></ak-toolbar-item>
          <ak-toolbar-item>
            <ak-template>
              <label>H:</label>
              <input ak-numerictextbox="k-value.two-way: height; k-decimals.bind: 0; k-format: n0; k-max.bind: 300; k-min.bind: 50"
                     style='width: 70px;'/>
            </ak-template>
          </ak-toolbar-item>
          <ak-toolbar-item>
            <ak-template>
              <label>W:</label>
              <input ak-numerictextbox="k-value.two-way: width; k-decimals.bind: 0; k-format: n0; k-max.bind: 300; k-min.bind: 50"
                     style='width: 70px;'/>
            </ak-template>
          </ak-toolbar-item>
          <ak-toolbar-item k-type="separator"></ak-toolbar-item>
          <ak-toolbar-item>
            <ak-template>
              <label>POSITION:</label>
            </ak-template>
          </ak-toolbar-item>
          <ak-toolbar-item k-type="buttonGroup">
            <ak-toolbar-item-button k-text="Left" k-togglable.bind="true" k-group="position"></ak-toolbar-item-button>
            <ak-toolbar-item-button k-text="Center" k-togglable.bind="true" k-group="position" k-selected.bind="true"></ak-toolbar-item-button>
            <ak-toolbar-item-button k-text="Right" k-togglable.bind="true" k-group="position"></ak-toolbar-item-button>
          </ak-toolbar-item>
          <ak-toolbar-item k-type="separator"></ak-toolbar-item>
          <ak-toolbar-item>
            <ak-template>
              <label>BACKGROUND:</label>
              <input ak-color-picker="k-value.two-way: backColor; ak-buttons.bind: false"/>
            </ak-template>
          </ak-toolbar-item>
          <ak-toolbar-item k-type="separator"></ak-toolbar-item>
          <ak-toolbar-item>
            <ak-template>
              <label>BORDER:</label>
              <input ak-color-picker="k-value.two-way: borderColor; ak-buttons.bind: false"/>
            </ak-template>
          </ak-toolbar-item>
          <ak-toolbar-item>
            <ak-template>
              <ak-drop-down-list k-data-text-field="text"
                                k-data-value-field="value"
                                k-value.two-way="borderStyle"
                                k-data-source.bind="[
                            { text: 'Solid', value: 'solid' },
                            { text: 'Dashed', value: 'dashed' },
                            { text: 'Dotted', value: 'dotted' }]">
                <select style='width: 100px;'></select>
              </ak-drop-down-list>
            </ak-template>
          </ak-toolbar-item>
        </ak-toolbar>
    </div>
    <div class="box wide">
        <div id="target" css="float: ${float}; width: ${width}px; height: ${height}px; background-color: ${backColor}; border-color: ${borderColor}; border-style: ${borderStyle}"></div>
    </div>
  </div>

  <style>
    #target {
      border: 3px solid #333333;
      border-radius: 0;
      background-color: #ffffff;
      height: 150px;
      width: 150px;
      margin: 0 auto;
    }
  </style>
</template>

app.js

export class IntegrationWithEditors {
  width = 150;
  height = 150;
  backColor = '#ffffff';
  borderColor = '#333333';
  borderStyle = 'solid';
  float = 'none';

  onToggle(e) {
    let position = e.target.text().toLowerCase();

    if (position === 'center') {
      position = 'none';
    }

    this.float = position;
  }
}

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>

integration-with-editors.css

#toolbar {
    margin: 1em 0;
    padding: 0 .9em;
}

#toolbar label {
    font-size: .85em;
    font-weight: bold;
}
#toolbar .k-separator {
    margin: 0 .9em;
}

.k-numeric-wrap {
  display: inline-block;
}

k-drop-down-list {
  width: 150px;
}

main.js

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

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