Thanood

<template>
  <require from="./my-component"></require>
  <require from="./jsonValueConverter"></require>
  <h1>Please observe console log</h1>
  
  <my-component items.bind="items"></my-component>
  
  <div>
    items:
    <ul>

Thanood

<template>
  <md-file disabled.bind="true" md-caption="upload file" view-model.ref="fileInput" md-label-value.bind="labelValue"></md-file>
  <div if.bind="selectedFile">
    selected file: ${selectedFile.name} (${selectedFile.size} bytes)
  </div>
</template>

Thanood

<template>
  <div class="dropdown-sample">
    <table>
      <tr repeat.for="n of 5">
        <td>line ${n+1}</td>
        <td>
          <a md-button md-dropdown="ref.bind: dropdown;">drop me!</a>
          <ul ref="dropdown">
            <li><a click.trigger="showToast($event)">one</a></li>
            <li><a click.trigger="showToast($event)">two</a></li>

Thanood

<template>
  <a disabled md-sidenav-collapse="ref.bind: sideNav;" md-sidenav-collapse.ref="sidenavController" md-button="flat: true;" md-waves>
    Standard SideNav Toggle
  </a>
  <div>
    <button md-button click.delegate="openSideNav()">open sidenav</button>
  </div>
  <md-sidenav view-model.ref="sideNav">
    <ul>
      <li md-waves><a href="#">About</a></li>

Thanood

<template>
  <require from="./error-dialog"></require>
  <error-dialog view-model.ref="errorDialog"></error-dialog>
  <div>
    <button md-button click.delegate="openDialog()">open dialog</button>
  </div>
</template>

Thanood

<template>
  <a md-sidenav-collapse="ref.bind: sideNav;" md-button md-waves ref="trigger">Toggle SideNav</a>
  <md-sidenav view-model.ref="sideNav">
    <ul>
      <li md-waves><a href="#">About</a></li>
      <li md-waves><a href="#">Installation</a></li>
      <li md-waves><a href="#">Project Status</a></li>
      <li md-waves><a href="#">Help/Docs</a></li>
    </ul>
  </md-sidenav>

Thanood

Indicator issue when using tabs with waves

Waves make the container position: relative; and because of that the position of the child (a in the tab li) cannot be calculated correctly, it's always at left: 0.

To work around this, set this in a css file (like in app.css here):

[md-tabs] .waves-effect {
  position: static;
}

Thanood

[md-tabs] .waves-effect {
  position: static;
}

Thanood

/* add this css to prevent the icon from appearing below the datepicker input */
.date-picker + i.material-icons {
  margin-left: -24px;
  line-height: 1;
  margin-top: 12px;
  cursor: pointer;
}

Thanood

export class MaterializeFormValidationRenderer {

  className = 'md-input-validation';
  classNameFirst = 'md-input-validation-first';

  render(instruction) {
    for (let { result, elements } of instruction.unrender) {
      for (let element of elements) {
        this.remove(element, result);
      }