Aurelia KendoUI component - problem report

app.html

<!-- put your view here  -->
<template>
  <require from="./dynamic-element"></require>
  <form id="ticketsForm" submit.delegate="submit($event)" ak-validator="k-widget.two-way: validator">
    <ul id="fieldlist">
      <dynamic-element elements.bind="elements"></dynamic-element>
    </ul>
    <p></p>
    <button class="k-button k-primary" type="submit">Submit</button>
    <p></p>
    <div class="status" ref="status"></div>
  </form>
</template>

app.js

/*  put your view model code here */
export class App {
  elements = [
    {
      htmlElement: "input",
      id: "fullname",
      type: "text",
      name: "fullname",
      class: "k-textbox",
      placeholder:  "Full Name",
      labelClass: "required",
      labelText: "Your Name: ",
      validationRequired: true,
      //validationType: "data-text",
      validationMessage: "Enter {0}",
      style: "width: 220px;"
    },
    {
      htmlElement: "input",
      id: "email",
      type:    "email",
      name: "email",
      class: "k-textbox",
      placeholder:  "e.g. myname@example.net",
      labelClass: "required",
      labelText: "Email: ",
      validationRequired: true,
      //validationType: "data-email",
      validationMessage: " Email format is not valid ",
      style: "width: 220px;"
    }

  ]
  
  data = [
    '12 Angry Men',
    'Il buono, il brutto, il cattivo.',
    'Inception',
    'One Flew Over the Cuckoo\'s Nest',
    'Pulp Fiction',
    'Schindler\'s List',
    'The Dark Knight',
    'The Godfather',
    'The Godfather: Part II',
    'The Shawshank Redemption'
  ];
  
  
  submit(event) {
    event.preventDefault();
    console.log(this.validator.validate());
    if (this.validator.validate()) {
      $(this.status).text('Hooray! You validated!')
      .removeClass('invalid')
      .addClass('valid');
    } else {
      $(this.status).text('Oops! There is invalid data in the form.')
      .removeClass('valid')
      .addClass('invalid');
    }
  }
}

dynamic-element.html

<template>
  <div ref="container">
  </div>
</template>

dynamic-element.js

import {bindable, inject} from 'aurelia-framework';
import {TemplatingEngine} from 'aurelia-templating';
import {createOverrideContext} from 'aurelia-binding';

@inject(TemplatingEngine)
export class DynamicElement {
  @bindable elements;
  @bindable value;
  
  constructor(templatingEngine) {
    this.templatingEngine = templatingEngine;
  }
  
  attached() {

    console.log(this.elements);

    for(let element of this.elements) {
      
      console.log(element);
      
      // create the li that will contain the element
      let li = document.createElement('li');
      
      // create the label that will be associated with the element
      // then set the text of the label
      let label = document.createElement('Label');
      label.innerHTML = element.labelText;
    
      let newElement = document.createElement(element.htmlElement);
      
      // pre-create attributes based on element object model
      for(let item in element) {
        newElement.setAttribute(item, element[item]);
      }

      // check to see if we want validation on the element.
      // if so, then create the 'required' attribute with no value
      if(element.validationRequired)
        newElement.setAttribute('require', '');
        
      // check the type of element and set various attributes based on the type
        switch (element.type) {
          case 'email':
              label.setAttribute('for', element.id);
              label.setAttribute('class', element.labelClass)
              newElement.setAttribute('data-email-msg', element.validationMessage);
          break;
          case 'text':
              label.setAttribute('for', element.id);
              label.setAttribute('class', element.labelClass)
              newElement.setAttribute('validationMessage', element.validationMessage);
          break;          
          case 'amount':
              newElement.setAttribute('data-max-msg', element.validationMessage);
              newElement.setAttribute('ak-numerictextbox', element.amountBindings);
          break;
          case 'tel':
              label.setAttribute('for', element.id);
              label.setAttribute('class', element.labelClass)
              newElement.setAttribute('validationMessage', element.validationMessage);
          break;
          case 'checkbox':
              newElement.setAttribute('validationMessage', element.validationMessage);
          break;
        }
      
      
      // setup an element specific value bind
      newElement.setAttribute('value.bind', element.name + 'Value');
    
      // add the label and element to the li
      // and then add the li to the container
      li.appendChild(label);
      li.appendChild(newElement);
      this.container.appendChild(li);
    }
    
    

    
    let view = this.templatingEngine.enhance({
      element: this.container, 
      bindingContext: this, 
      overrideContext: createOverrideContext(this)
    });
    
    view.attached();
  }
}

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>
    
    <style>
      #fieldlist {
        margin: 0;
        padding: 0;
      }
      
      #fieldlist li {
        list-style: none;
        padding-bottom: .7em;
        text-align: left;
      }
      
      #fieldlist label {
        display: block;
        padding-bottom: .3em;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 12px;
        color: #444;
      }
      
      #fieldlist li.status {
        text-align: center;
      }
      
      #fieldlist li .k-widget:not(.k-tooltip),
      #fieldlist li .k-textbox {
        margin: 0 5px 5px 0;
      }
      
      .confirm {
        padding-top: 1em;
      }
      
      .valid {
        color: green;
      }
      
      .invalid {
        color: red;
      }
      
      #fieldlist li input[type="checkbox"] {
        margin: 0 5px 0 0;
      }
      
      span.k-widget.k-tooltip-validation {
        display; inline-block;
        width: 160px;
        text-align: left;
        border: 0;
        padding: 0;
        margin: 0;
        background: none;
        box-shadow: none;
        color: red;
      }
      
      .k-tooltip-validation .k-warning {
        display: none;
}
    </style>
  </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', kendo => kendo.pro());

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

problem-details.md

Add any additional information here