<script>
/**
	Input

		// Can be created dynamically
		var input = new OreeshInput();
	
	
		<!-- Or via HTML -->
		<oreesh-input value="hello"></oreesh-dialog>
	
	@class oreesh-input
**/
/**
	Decide whether to resize text field automatically.

	@attribute auto-resize
	@type Boolean
**/
/**
	Disables the textfield from user interaction.

	@attribute disabled
	@type Boolean
**/
/**
	Same as the HTML input type attribute.  Default value is `text`.

	@default text
	@attribute type
	@type String
**/
/**
	Same as the HTML input placeholder attribute.

	@attribute placeholder
	@type String
**/
/**
	The string value of the text field.  Can be used to set an initial value, and always reflects the current value.

	@attribute value
	@type String
**/
/**
	A string representing a regualar expression.  This is inteded for validating the value of the of the oreesh-input.
	The value of the oreesh-input is checked on every `keyup` event and `keydown` event; if the value doesn't match the pattern, the invalid styling is applied, and the `pattern-invalid` attribute is set to `true`.

	Examples:

		<!-- Only letters -->
		<oreesh-input pattern="^[a-zA-Z]*$"></oreesh-input>

		<!-- Contains the substring 'tyler' -->
		<oreesh-input pattern="tyler"></oreesh-input>

	@attribute pattern
	@type String
**/
/**
	Read-only property representing the state of the value with respect to the `pattern` attribute.

	@attribute pattern-invalid
	@type Boolean
**/
/**
	You may specify the maximum length of the value of the oreesh-input.  If the value's length is greater than the `max-length`, the invalid styling is applied, and the `invalid-length` attribute is set to `true`.

	@attribute max-length
	@type Number
**/
/**
	You may specify the minimum length of the value of the oreesh-input.  If the value's length is less than the `min-length`, the invalid styling is applied, and the `invalid-length` attribute is set to `true`.

	@attribute min-length
	@type Number
**/
/**
	Read-only property representing the state of the value with respect to the `min-length` and `max-length	` attributes.

	@attribute length-invalid
	@type Boolean
**/

</script>

<dom-module id="oreesh-input">
	<template>
		<link rel="stylesheet" is="custom-style" href="./oreesh-input.css">
		<div class="invisible"></div>

		<div class="wrapper">
			<input type="{{type}}" value="{{value}}" placeholder="{{placeholder}}">
		</div>
	</template>

</dom-module>

<script src="./oreesh-input.js"></script>