t-input.html

<link rel="import" href="../polymer/polymer.html" />

<link rel="import" href="t-master-input.html" />
<link rel="import" href="t-textarea.html" />

<!--
`<t-input>` is a single-line text field with Material Design styling.

    <t-input label="Input label"></t-input>

It may include an optional error message or character counter.

    <t-input error-message="Invalid input!" label="Input label"></t-input>
    <t-input char-counter label="Input label"></t-input>

For textarea pass multi-line as attribute

    <t-input multi-line label="Textarea label"></t-input>

	### Validation

	Currently only `required` and `maxlength` validation is supported on textarea.

See `Polymer.PaperInputBehavior` for more API docs.

### Styling

See `Polymer.PaperInputContainer` for a list of custom properties used to
style this element.

-->
<dom-module id="t-input">

		<template>

	<style>

	:host , #input{
	  display: block;
	  outline: none;
	}


</style>		
			<template is="dom-if" if="[[!multiLine]]">
				<t-master-input id="input" label="{{label}}" type="{{type}}" min="{{min}}" max="{{max}}" validate-on-blur="{{validateOnBlur}}" auto-validate$="{{autoValidate}}"  disabled$="{{disabled}}"  no-label-float$="{{noLabelFloat}}" char-counter$="{{charCounter}}" maxlength="{{maxLength}}" pattern="{{pattern}}" error-message="{{errorMessage}}" prevent-invalid-input$="{{preventInvalidInput}}" required$="{{required}}" value="{{value}}" on-value-change="_invalid" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]" autocomplete$="[[autocomplete]]"></t-master-input>
			</template>
			<template is="dom-if" if="[[multiLine]]">
				<t-textarea id="input" label="{{label}}" disabled$="{{disabled}}" validate-on-blur="{{validateOnBlur}}"  no-label-float$="{{noLabelFloat}}" char-counter$="{{charCounter}}"  maxlength="{{maxLength}}" value="{{value}}" error-message="{{errorMessage}}" rows$="{{rows}}" max-rows$="{{maxRows}}" required$="{{required}}" ></t-textarea>
			</template>
		</template>

</dom-module>

<script>
Polymer({

	is: "t-input",

	properties:{

	    /**
	     * Name property
	    */
	    name: {
	      type: String,
	      value: '',
	      reflectToAttribute: true
	    },		

		/**
       * The label for this input. Bind this to `<paper-input-container>`'s `label` property.
       */
		label: {
			type:String,
			value:"Untitled Input Field",
			reflectToAttribute: true
		},

		/**
       * The type of the input. The supported types are `text`, `number` and `password`. Bind this
       * to the `<input is="iron-input">`'s `type` property.
       */
		type: {
			type:String,
			reflectToAttribute: true
		},

		/**
       * A pattern to validate the `input` with. Bind this to the `<input is="iron-input">`'s
       * `pattern` property.
       */
		pattern: {
			type:String,
			reflectToAttribute: true
		},

		/**
       * Set to true to show a character counter.
       */
		charCounter:  {
			type: Boolean,
			value: false,
			reflectToAttribute: true
		},

		/**
       * Set to true to validate on blur
       */
		validateOnBlur:  {
			type: Boolean,
			value: true
		},

 		/**
       * Set to true to prevent the user from entering invalid input. Bind this to the
       * `<input is="iron-input">`'s `preventInvalidInput` property.
       */
		preventInvalidInput:{
			type: Boolean
		},

		/**
       * The error message to display when the input is invalid. Bind this to the
       * `<paper-input-error>`'s content, if using.
       */
		errorMessage: {
			type:String,
			value:'required',
			reflectToAttribute: true
		},

		/**
       * Set to true to disable the floating label. Bind this to the `<paper-input-container>`'s
       * `noLabelFloat` property.
       */
		noLabelFloat: {
			type: Boolean,
			value: false,
			reflectToAttribute: true
		},

		/**
       * The maximum length of the input value. Bind this to the `<input is="iron-input">`'s
       * `maxlength` property.
       */
		maxLength: {
			type:Number,
			reflectToAttribute: true
		},

		/**
	       * The minimum (numeric or date-time) input value.
	       * If you're using PaperInputBehavior to implement your own paper-input-like
	       * element, bind this to the `<input is="iron-input">`'s `min` property.
	       */
	      min: {
	        type: String
	      },

	      /**
	       * The maximum (numeric or date-time) input value.
	       * Can be a String (e.g. `"2000-1-1"`) or a Number (e.g. `2`).
	       * If you're using PaperInputBehavior to implement your own paper-input-like
	       * element, bind this to the `<input is="iron-input">`'s `max` property.
	       */
	      max: {
	        type: String
	      },


		/**
       * Set to true to auto-validate the input value. Bind this to the `<paper-input-container>`'s
       * `autoValidate` property.
       */
       autoValidate:  {
			type: Boolean,
			value: false,
			reflectToAttribute: true
		},

		/**
       * Set to true to mark the input as required. Bind this to the `<input is="iron-input">`'s
       * `required` property.
       */
		required:  {
			type: Boolean,
			value: false,
			reflectToAttribute: true
		},

		/**
       * Set to true to switch to a text-area
       */
		multiLine: {
			type: Boolean,
			value: false,
			reflectToAttribute: true
		},

		/**
       * Set to true to disable this input. 
       */
		disabled: {
			type: Boolean,
			value: false,
			reflectToAttribute: true
		},


		/**
       * The initial number of rows.
       *
       * @attribute rows
       * @type number
       * @default 3
       */
	      rows: {
	        type: Number,
	        value: 3
	      },
		
		/**
       * The initial number of rows.
       *
       * @attribute rows
       * @type number
       * @default 3
       */
	      maxRows: {
	        type: Number,
	        value: 10
	      },

		/**
       * The value for this input. Bind this to the `<input is="iron-input">`'s `bindValue`
       * property, or the value property of your input that is `notify:true`.
       */
		value: {
			type:String,
			notify:true,
			reflectToAttribute: true
		},

		 // HTMLInputElement attributes for binding if needed
	      /**
	       * If you're using PaperInputBehavior to implement your own paper-input-like
	       * element, bind this to the `<input is="iron-input">`'s `autocomplete` property.
	       */
	      autocomplete: {
	        type: String,
	        value: 'off'
	      },

			// Nonstandard attributes for binding if needed
	      /**
	       * If you're using PaperInputBehavior to implement your own paper-input-like
	       * element, bind this to the `<input is="iron-input">`'s `autocapitalize` property.
	       */
	      autocapitalize: {
	        type: String,
	        value: 'none'
	      },
	      /**
	       * If you're using PaperInputBehavior to implement your own paper-input-like
	       * element, bind this to the `<input is="iron-input">`'s `autocorrect` property.
	       */
	      autocorrect: {
	        type: String,
	        value: 'off'
	      }

	}, 

	_checkRowValidity: function(row){
		if(row <= 1)
			return false;
		return true;
	},

	validate: function(){
		if ((typeof(this.value)).toLowerCase() === 'string') {
			this.value = this.value.trim();}
		return Polymer.dom(this.root).querySelector('#input').validate();
	}
});	
</script>