Thanood

<template>
  <require from="./au-input"></require>
  <md-colors></md-colors>
   
  <au-input label="A" value.bind="foo.a" percent.bind="foo.percent" salary.bind="foo.salary"></au-input> 
  
  <au-input label="B" value.bind="foo.b" percent.bind="foo.percent" salary.bind="foo.salary"></au-input> 
  
  <md-input md-label="Test" md-value.bind="foo.a & validate" md-validate="true"
      md-validate-success="good">

Thanood

<template>
   <select md-select.ref="select" md-select="label: select a value" value.two-way="selectedValue">
      <option value="" disabled selected>select an item</option>
      <option value="item1">item 1</option>
      <option value="item2">item 2</option>
      <option value="item3">item 3</option>
      <option value="item4">item 4</option>
    </select>
  <button md-button md-waves="color: light;" click.delegate="triggerSelect()">trigger select</button>
</template>

Thanood

<template>
  <div>
    <p>
      <md-radio md-name="myOption" md-value="option1" md-checked.bind="choice">My <strong>awesome</strong> Option 1</md-radio>
      <md-radio md-name="myOption" md-value="option2" md-checked.bind="choice">Option 2</md-radio>
      <md-radio md-name="myOption" md-value="option3" md-checked.bind="choice">Option 3</md-radio>
    </p>
    <p>
      Your choice: ${choice}
    </p>

Thanood

<template>
  <p repeat.for="product of products ">
    <md-checkbox click.delegate="onClick(product)" md-model.bind="product" md-checked.bind="selectedProducts ">
        ${product.name}
    </md-checkbox>
  </p>
  <p>
    Selected products:
    <ul>
      <li repeat.for="product of selectedProducts">${product.name}</li>

Thanood

md-collection-item.collection-item.selected {
  background-color: #ccc;
}

md-collection-item.collection-item.disabled {
  background-color: #eee;
}

Thanood

md-collection-item.collection-item.selected {
  background-color: #ccc;
}

md-collection-item.collection-item.disabled {
  background-color: #eee;
}


.icon

Thanood

<template>
  <!--<require from="materialize/dist/css/materialize.css"></require>-->
  <div>
    <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
      <a ref="tap" md-button="floating: true; large: true;" md-waves="color: light; circle: true;">
        <i class="large material-icons">mode_edit</i>
      </a>
    </div>
    <md-tap-target md-ref.bind="tap" view-model.ref="tapTarget">
      <h5>I'm here!</h5>

Thanood

<template>
  <div>
    <md-input md-label="put some text here" md-value.bind="textValue" md-disabled.bind="disabledValue"></md-input><br />
    You entered: ${textValue}<br />
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setText()">set text to something</button>
	  <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setDisabled()">Toggle Input Disabling</button>
	  
	  <md-input view-model.ref="inputElement" md-label="readonly - bound to the field above" md-value.bind="textValue" md-readonly.bind="true"></md-input><br />
  </div>
  <div>

Thanood

<template>
  <div>
    <md-input md-label="put some text here" md-value.bind="textValue" md-disabled.bind="disabledValue"></md-input><br />
    You entered: ${textValue}<br />
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setText()">set text to something</button>
	  <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setDisabled()">Toggle Input Disabling</button>
	  
	  <md-input view-model.ref="inputElement" md-label="readonly - bound to the field above" md-value.bind="textValue" md-readonly.bind="true"></md-input><br />
  </div>
  <div>

Thanood

<template>
  <!-- The following require is required as a workaround for last version of materializecss.   -->
  <require from="materialize/dist/css/materialize.css"></require>
  <require from="./md-select2"></require>
  
  <!-- i18n support.   -->
  <br/>
  <div>
    <h4>i18n support</h4> 
    <select md-select2="label.two-way: translateMe;" value.two-way="language" change.trigger="updateLanguage()">