Menu: context menu

app.html

<template>
  <require from="./context-menu.css!css"></require>
  <require from="aurelia-kendoui-bridge/listview/listview"></require>
  <require from="aurelia-kendoui-bridge/dropdownlist/dropdownlist"></require>
  <require from="aurelia-kendoui-bridge/contextmenu/contextmenu"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>

  <div id="example">
    <div class="demo-section k-content wide">
      <h4>WebMail</h4>
      <ak-list-view k-data-source.bind="dataSource" id="listview-context-menu">
        <ak-template>
          <div class="product">
            <img src="http://demos.telerik.com/kendo-ui/content/shared/images/employees/${FromID}.png" alt="${From}" />

            <h3>${Title}</h3>
            <p class="date">${Date}</p>
            <p>${From}</p>
          </div>
        </ak-template>
      </ak-list-view>
    </div>

    <div class="box">
      <h4>Orientation Settings</h4>
      <ul class="options">
        <li>
          <label for="orientation">orientation</label>
          <ak-drop-down-list k-value.two-way="orientation">
            <select id="orientation" name="orientation">
              <option value="horizontal">Horizontal</option>
              <option value="vertical">Vertical</option>
            </select>
          </ak-drop-down-list>
        </li>
      </ul>
      <br />
      <button ak-button click.delegate="apply()" style="width: 80px;">Apply</button>
    </div>


    <ul id="menu"
        ak-contextmenu="k-orientation.two-way: orientation; k-target: #listview-context-menu; k-filter: .product; k-animation.bind: animation;"
        ak-contextmenu.ref="contextVM">
      <li>
        <img src="http://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png" /> Reply
        <ul>
          <li><img src="http://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png" /> Reply to Sender</li>
          <li><img src="http://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png" /> Reply to All</li>
        </ul>
      </li>
      <li class="k-separator"></li>
      <li>
        <img src="http://demos.telerik.com/kendo-ui/content/web/toolbar/forward.png" />  Forward
      </li>
      <li class="k-separator"></li>
      <li>
        Label
        <ul>
          <li>None</li>
          <li class="k-separator"></li>
          <li><img src="http://demos.telerik.com/kendo-ui/content/web/toolbar/important.png" />Important</li>
          <li><img src="http://demos.telerik.com/kendo-ui/content/web/toolbar/todo.png" />Work</li>
          <li><img src="http://demos.telerik.com/kendo-ui/content/web/toolbar/done.png" />Personal</li>
          <li class="k-separator"></li>
          <li>New Label</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

app.js

export class ContextMenu {
  orientation = 'horizontal';
  dataSource = new kendo.data.DataSource({
    data: [{
      MailID: 1,
      FromID: 1,
      From: 'Ivo Nedkov',
      Date: '2/22/2009',
      Title: 'RE: New version of Telerik Trainer'
    }, {
      MailID: 2,
      FromID: 2,
      From: 'Jytte Petersen',
      Date: '2/22/2009',
      Title: 'RE: New version of Telerik Trainer'
    }, {
      MailID: 3,
      FromID: 3,
      From: 'Renate Messner',
      Date: '2/22/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 4,
      FromID: 4,
      From: 'Kevin Babcock',
      Date: '2/21/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 5,
      FromID: 5,
      From: 'Hari Kumar',
      Date: '2/21/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }, {
      MailID: 6,
      FromID: 3,
      From: 'Renate Messner',
      Date: '2/21/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 7,
      FromID: 6,
      From: 'Anne Dodsworth',
      Date: '2/21/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }, {
      MailID: 8,
      FromID: 7,
      From: 'Janet Leverling',
      Date: '2/21/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }, {
      MailID: 9,
      FromID: 9,
      From: 'Rober King',
      Date: '2/21/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }, {
      MailID: 10,
      FromID: 8,
      From: 'Laura Callahan',
      Date: '2/20/2009',
      Title: 'RE: Telerik Enters the ORM Space'
    }, {
      MailID: 11,
      FromID: 5,
      From: 'Hari Kumar',
      Date: '2/20/2009',
      Title: 'RE: New version of Telerik Trainer'
    }, {
      MailID: 12,
      FromID: 2,
      From: 'Jytte Petersen',
      Date: '2/20/2009',
      Title: 'RE: New version of Telerik Trainer'
    }, {
      MailID: 13,
      FromID: 4,
      From: 'Kevin Babcock',
      Date: '2/20/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 14,
      FromID: 3,
      From: 'Renate Messner',
      Date: '2/20/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 15,
      FromID: 1,
      From: 'Ivo Nedkov',
      Date: '2/20/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }],
    pageSize: 5
  });

  apply() {
    this.contextVM.recreate();
  }
}

context-menu.css

#listview-context-menu {
  padding: 0;
  margin-bottom: -1px;
  min-height: 300px;
}
.product {
  position: relative;
  height: 62px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(128,128,128,.3);
}
.product img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  margin: 10px;
  border: 1px solid #000;
  float: left;
}
.product h3 {
  margin: 0;
  padding: 15px 5px 1px 0;
  overflow: hidden;
  line-height: 1em;
  font-size: 1.1em;
  font-weight: bold;
}
.product p {
  font-size: .9em;
}
.product .date {
  float: right;
  margin: -8px 15px 0 0;
}
.k-listview:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

@media screen and (max-width: 620px) {
  .product h3 {
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 15px;
  }

}

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.2.714/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.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/1.0.0-beta.1.0.6/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');

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