tef_input.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-style/core-style.html">
<link rel="import" href="tef_input_styles.html">

<polymer-element name="tef-input" attributes="placeholder multiline image value label small large block validation">
    <template>
        <core-style ref="tef-input"></core-style>
        <template if="{{label}}">
                <label>{{label}}</label>
        </template>
        <template if="{{!multiline && !image && !validation}}">
                <input id="input" class="tef-input {{tefrow ? 'tef-row' : ''}} {{small ? 'small' : ''}} {{large ? 'large' : ''}} {{block ? 'block' : ''}}" placeholder={{placeholder}} value={{value}}>
        </template>
        <template if="{{multiline}}">
            <textarea id="input" class="tef-input {{tefrow ? 'tef-row' : ''}} {{small ? 'small' : ''}} {{large ? 'large' : ''}} {{block ? 'block' : ''}}" placeholder={{placeholder}} value={{value}}>
            </textarea>
        </template>
        <template if="{{image}}">
            <div class="{{tefrow ? 'tef-row' : ''}}">
                <input class="tef-input icon {{small ? 'small' : ''}} {{large ? 'large' : ''}} {{block ? 'block' : ''}}" placeholder={{placeholder}} value={{value}}>
                <i icon="search"></i>
            </div>
        </template>
        <template if="{{validation}}">
             <div class="{{tefrow ? 'tef-row' : ''}} tef-{{validation}}"> 
                 <input class="tef-input {{small ? 'small' : ''}} {{large ? 'large' : ''}} {{block ? 'block' : ''}}" placeholder={{placeholder}} value={{value}} > 
                 <div class="tef-message"> 
                     <content></content>
                 </div> 
            </div>
        </template>
    </template>
	<script>
        Polymer({
            publish: {
                label: {
                    value: "",
                    reflect: true
                },
                multiline: {
                    value: false,
                    reflect: true
                },
                image: {
                    value:"",
                    reflect: true
                },
                tefrow: {
                    value: false,
                    reflect: true
                },
                small: {
                    value: false,
                    reflect: true
                },
                large: {
                    value: false,
                    reflect: true
                },
                block: {
                    value: false,
                    reflect: true
                },
                validation: {
                    value: "",
                    reflect: true
                }
            }
        });				
	</script>	
</polymer-element>