d-md-components/select/views/index.html

A pack of components for Derby according to Google's Material Design based upon mdl (getmdl.io).

<index: attributes="optionList value key text class">
  <div class="mdl-textfield mdl-textfield--floating-label d-md-select is-dirty{{if invalid}} is-invalid{{/if}}{{if class}} {{class}}{{/if}}">
    <input as="outputField" class="d-md-select-selected mdl-textfield__input" on-click="willSelect()" on-focus="willSelect()" value="{{selected[text]}}" readonly />
    <i class="material-icons d-md-select-icon">arrow_drop_down</i>
      {{if selectOptionsVisible}}
        <ul as="optionListDropdown" class="d-md-select-options-list mdl-shadow--2dp{{if selectOptionsVisible}} d-md-select-options-list--showing{{/if}}" 
            style="{{if selectedIndex === 1 && optionList.length > 1}}top: -25px; transform-origin: 10px 40px{{/if}}
                   {{if selectedIndex > 1 && optionList.length > 2}}top: -65px; transform-origin: 10px 80px{{/if}}"
            on-create="addCloseListener(), adjustDropdown(selectedIndex)" 
            on-destroy="removeCloseListener()"
            >
          {{each optionList as #option, #index}}
            <li class="d-md-select-option{{if #option[key] === selected[key]}} d-md-select-option-selected{{/if}}{{if #index === focusedIndex}} options---option--focused{{/if}}" on-click="select(#option, #index), validate()">{{#option[text]}}</li>
          {{/each}}
        </ul>
      {{/if}}
    <label class="mdl-textfield__label" for="team-select">{{label}}</label>
    <span class="mdl-textfield__error">{{invalidMessage}}</span>
  </div>