From 33431ae1b345b9f2c9a2a5f23afd3d938215cee3 Mon Sep 17 00:00:00 2001
From: Brent Hosie <brent.hosie@infusionsoft.com>
Date: Thu, 16 Jul 2015 22:07:12 -0600
Subject: [PATCH 1/4] polymer 1 brought in. changed out core-icons for
 iron-icons. most attributes set up. css broken out in to its own stylesheet.

---
 bower.json           |   8 +++-
 clearable-input.css  |  16 +++++++
 clearable-input.html | 108 +++++++++++++++++++++++++++----------------
 demo.html            |   2 +-
 4 files changed, 91 insertions(+), 43 deletions(-)
 create mode 100644 clearable-input.css

diff --git a/bower.json b/bower.json
index 5a56fad..a6e1f21 100644
--- a/bower.json
+++ b/bower.json
@@ -17,7 +17,11 @@
     "tests"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^0.5",
-    "core-icons": "Polymer/core-icons#0.5"
+    "polymer": "Polymer/polymer#^1.0.0",
+    "iron-icons": "PolymerElements/iron-icons#~1.0.3"
+  },
+  "resolutions": {
+    "polymer": "^1.0.0",
+    "webcomponentsjs": "^0.7.2"
   }
 }
diff --git a/clearable-input.css b/clearable-input.css
new file mode 100644
index 0000000..73e3248
--- /dev/null
+++ b/clearable-input.css
@@ -0,0 +1,16 @@
+span.wrapper {
+    position: relative;
+}
+#iconWrapper {
+    position: absolute;
+    display: block;
+    right: 5px;
+    top: 0px;                
+    cursor: pointer;
+    width: 12px;
+    height: 12px;
+}
+#iconWrapper core-icon {
+	width: 12px;
+	height: 12px;
+}
\ No newline at end of file
diff --git a/clearable-input.html b/clearable-input.html
index 3fa1689..7a42e24 100644
--- a/clearable-input.html
+++ b/clearable-input.html
@@ -9,32 +9,15 @@
 -->
 
 <link rel="import" href="../polymer/polymer.html"/>
-<link rel="import" href="../core-icons/core-icons.html">
-
-<polymer-element name="clearable-input" attributes="placeholder value readonly isDisabled backgroundColor color icon">
-	<template>
-		<style>
-			span.wrapper {
-                position: relative;
-            }
-            #iconWrapper {
-                position: absolute;
-                display: block;
-                right: 5px;
-                top: 0px;                
-                cursor: pointer;
-                width: 12px;
-                height: 12px;
-            }
-            #iconWrapper core-icon {
-            	width: 12px;
-            	height: 12px;
-            }
-		</style>
+<link rel="import" href="../iron-icons/iron-icons.html">
+
+<dom-module id="clearable-input">
+	<link rel="stylesheet" type="text/css" href="./clearable-input.css"/>
+	<template>		
 		<span class="wrapper">
-            <input type="text" id="textInput" placeholder="{{placeholder}}" value="{{value}}" on-click="{{fireClicked}}" on-change="{{valueChanged}}" on-keydown="{{valueChanged}}" on-cut="{{valueChanged}}" on-paste="{{valueChanged}}"/>
+            <input type="text" id="textInput" placeholder="{{placeholder}}" value="{{value}}" on-click="fireClicked" on-input="valueChanged"/>
             <div id="iconWrapper">
-            	<core-icon id="clearInput" icon="{{icon}}" on-click="{{testClearInput}}" hidden?="{{clearHidden}}"></core-icon>
+            	<iron-icon id="clearInput" icon="{{icon}}" on-click="testClearInput" hidden$="{{clearHidden}}"></iron-icon>
             <div>
         </span>
 	</template>
@@ -43,6 +26,51 @@
 			"use strict";
 
 			Polymer({
+				is: "clearable-input",
+
+				properties: {
+					placeholder: {
+						type: String,
+						value: "",
+						notify: true
+					},
+					value: {
+						type: String,
+						value: "",
+						observer: "valueChanged",
+						notify: true
+					},
+					readonly: {
+						type: Boolean,
+						value: false,
+						notify: true
+					},
+					isDisabled: {
+						type: Boolean,
+						value: false,
+						notify: true
+					},
+					backgroundColor: {
+						type: String,
+						value: "#FFF",
+						notify: true
+					},
+					color: {
+						type: String,
+						value: "#000",
+						notify: true
+					},
+					icon: {
+						type: String,
+						value: "clear",
+						notify: true
+					},
+					clearHidden: {
+						type: Boolean,
+						value: true,
+						notify: true
+					}
+				},
 				/**
 	            * The placeholder of the text input
 	            *
@@ -51,7 +79,7 @@
 	            * @type string
 	            * @default ''
 	            */
-				placeholder: '',
+
 				/**
 	            * The value of the text input
 	            *
@@ -60,7 +88,7 @@
 	            * @type string
 	            * @default ''
 	            */
-				value: '',
+
 				/**
 	            * The background color of the text input. This field supports
 	            * hexidecimal and standard html colors.
@@ -70,7 +98,7 @@
 	            * @type string
 	            * @default '#FFF'
 	            */
-				backgroundColor: '#FFF',
+
 				/**
 	            * The color of the text input's text, and text input's clear button.
 	            * This field supports hexidecimal and standard html colors.
@@ -80,7 +108,7 @@
 	            * @type string
 	            * @default '#000'
 	            */
-				color: '#000',
+
 				/**
 	            * Whether or not to show the clear input
 	            *
@@ -89,7 +117,7 @@
 	            * type boolean
 	            * default true
 	            */
-				clearHidden: true,
+				
 
 				/**
 				* On Polymer ready, set defaults
@@ -103,7 +131,7 @@
 		            * @type boolean
 		            * @default undefined
 		            */
-					this.$.textInput.readOnly = (this.readonly !== void 0);
+					// this.$.textInput.readOnly = (this.readonly !== void 0);
 					/**
 		            * If set on the element, makes the text input disabled. The text input will not be clearable.
 		            * isDisabled overrides readonly.
@@ -113,22 +141,22 @@
 		            * @type boolean
 		            * @default undefined
 		            */
-					this.$.textInput.disabled = (this.isDisabled !== void 0);
+					// this.$.textInput.disabled = (this.isDisabled !== void 0);
 					/**
-		            * The core-icon that's used for clearing the input text
+		            * The iron-icon that's used for clearing the input text
 		            *
 		            * @attribute icon
 		            * @access public
 		            * @type string
 		            * @default 'clear'
 		            */
-					if(typeof this.icon !== 'string' || this.icon.length === 0) {
-						this.icon = "clear";
-					}
+					// if(typeof this.icon !== 'string' || this.icon.length === 0) {
+					// 	this.icon = "clear";
+					// }
 
-					setInterval(function() {
-						this.clearHidden = this.$.textInput.value.length === 0 || this.isDisabled !== void 0;
-					}.bind(this), 100);
+					// setInterval(function() {
+					// 	this.clearHidden = this.$.textInput.value.length === 0 || this.isDisabled !== void 0;
+					// }.bind(this), 100);
 
 
 				},
@@ -198,9 +226,9 @@
                     *
                     * @event inputclicked
                     */
-					this.fire('inputclicked')
+					this.fire('inputclicked');
 				}
 			});
 		})();
 	</script>
-</polymer-element>
\ No newline at end of file
+</dom-element>
\ No newline at end of file
diff --git a/demo.html b/demo.html
index b7b0ed7..3017f22 100644
--- a/demo.html
+++ b/demo.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset='utf-8'>
   <title>clearable-input</title>
-    <script src="../webcomponentsjs/webcomponents.js"></script>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="clearable-input.html">
 </head>
 <style>

From 707b6fafcd3c00edf3a62308178200d9e3cd18e3 Mon Sep 17 00:00:00 2001
From: Brent Hosie <brent.hosie@infusionsoft.com>
Date: Thu, 16 Jul 2015 23:38:03 -0600
Subject: [PATCH 2/4] upgrade for javascript in place

---
 clearable-input.css  |  15 ++-
 clearable-input.html | 255 +++++++++++++++++++++++++------------------
 demo.html            |   8 +-
 3 files changed, 161 insertions(+), 117 deletions(-)

diff --git a/clearable-input.css b/clearable-input.css
index 73e3248..0565f02 100644
--- a/clearable-input.css
+++ b/clearable-input.css
@@ -1,16 +1,21 @@
-span.wrapper {
+:host span.wrapper {
     position: relative;
 }
-#iconWrapper {
-    position: absolute;
+:host #iconWrapper {
+    /*position: absolute;
     display: block;
     right: 5px;
-    top: 0px;                
+    top: 0px; */
+    position:relative;
     cursor: pointer;
     width: 12px;
     height: 12px;
 }
-#iconWrapper core-icon {
+:host #iconWrapper iron-icon {
+    position: absolute;
+    display: block;
+    right: 5px;
+    top: 0px; 
 	width: 12px;
 	height: 12px;
 }
\ No newline at end of file
diff --git a/clearable-input.html b/clearable-input.html
index 7a42e24..9e09a98 100644
--- a/clearable-input.html
+++ b/clearable-input.html
@@ -12,12 +12,13 @@
 <link rel="import" href="../iron-icons/iron-icons.html">
 
 <dom-module id="clearable-input">
-	<link rel="stylesheet" type="text/css" href="./clearable-input.css"/>
+	<link rel="import" type="css" href="./clearable-input.css"/>
+	
 	<template>		
 		<span class="wrapper">
-            <input type="text" id="textInput" placeholder="{{placeholder}}" value="{{value}}" on-click="fireClicked" on-input="valueChanged"/>
-            <div id="iconWrapper">
-            	<iron-icon id="clearInput" icon="{{icon}}" on-click="testClearInput" hidden$="{{clearHidden}}"></iron-icon>
+            <input type="text" id="textInput" placeholder="{{placeholder}}" value="{{value::input}}" on-click="fireClicked" on-input="_valueChanged"/>
+            <div id="iconWrapper" hidden$="{{_isClearHidden}}">
+            	<iron-icon id="clearInput" icon="{{icon}}" on-click="_testClearInput"></iron-icon>
             <div>
         </span>
 	</template>
@@ -29,119 +30,58 @@
 				is: "clearable-input",
 
 				properties: {
+					/**
+		            * The placeholder of the text input
+		            *
+		            * @attribute placeholder
+		            * @access public
+		            * @type string
+		            * @default ''
+		            */
 					placeholder: {
 						type: String,
 						value: "",
 						notify: true
 					},
+					/**
+		            * The value of the text input
+		            *
+		            * @attribute value
+		            * @access public
+		            * @type string
+		            * @default ''
+		            */
 					value: {
 						type: String,
 						value: "",
-						observer: "valueChanged",
+						observer: "_valueChanged",
 						notify: true
 					},
-					readonly: {
-						type: Boolean,
-						value: false,
-						notify: true
-					},
-					isDisabled: {
-						type: Boolean,
-						value: false,
-						notify: true
-					},
-					backgroundColor: {
-						type: String,
-						value: "#FFF",
-						notify: true
-					},
-					color: {
-						type: String,
-						value: "#000",
-						notify: true
-					},
-					icon: {
-						type: String,
-						value: "clear",
-						notify: true
-					},
-					clearHidden: {
-						type: Boolean,
-						value: true,
-						notify: true
-					}
-				},
-				/**
-	            * The placeholder of the text input
-	            *
-	            * @attribute placeholder
-	            * @access public
-	            * @type string
-	            * @default ''
-	            */
-
-				/**
-	            * The value of the text input
-	            *
-	            * @attribute value
-	            * @access public
-	            * @type string
-	            * @default ''
-	            */
-
-				/**
-	            * The background color of the text input. This field supports
-	            * hexidecimal and standard html colors.
-	            *
-	            * @attribute backgroundColor
-	            * @access public
-	            * @type string
-	            * @default '#FFF'
-	            */
-
-				/**
-	            * The color of the text input's text, and text input's clear button.
-	            * This field supports hexidecimal and standard html colors.
-	            *
-	            * @attribute color
-	            * @access public
-	            * @type string
-	            * @default '#000'
-	            */
-
-				/**
-	            * Whether or not to show the clear input
-	            *
-	            * attribute clearHidden
-	            * access public
-	            * type boolean
-	            * default true
-	            */
-				
-
-				/**
-				* On Polymer ready, set defaults
-				*/
-				ready: function() {
 					/**
 		            * If set on the element, makes the text input readonly. The text input is still clearable.
 		            *
-		            * @attribute readonly
+		            * @attribute isReadOnly
 		            * @access public
 		            * @type boolean
 		            * @default undefined
 		            */
-					// this.$.textInput.readOnly = (this.readonly !== void 0);
+					isReadOnly: {
+						type: Boolean,
+						value: void 0,
+					},
 					/**
 		            * If set on the element, makes the text input disabled. The text input will not be clearable.
-		            * isDisabled overrides readonly.
+		            * isDisabled overrides isReadOnly.
 		            *
 		            * @attribute isDisabled
 		            * @access public
 		            * @type boolean
 		            * @default undefined
 		            */
-					// this.$.textInput.disabled = (this.isDisabled !== void 0);
+					isDisabled: {
+						type: Boolean,
+						value: void 0,
+					},
 					/**
 		            * The iron-icon that's used for clearing the input text
 		            *
@@ -150,26 +90,39 @@
 		            * @type string
 		            * @default 'clear'
 		            */
-					// if(typeof this.icon !== 'string' || this.icon.length === 0) {
-					// 	this.icon = "clear";
-					// }
-
-					// setInterval(function() {
-					// 	this.clearHidden = this.$.textInput.value.length === 0 || this.isDisabled !== void 0;
-					// }.bind(this), 100);
-
-
+					icon: {
+						type: String,
+						value: "clear",
+						notify: true
+					},
+					/**
+		            * Whether or not to show the clear input
+		            *
+		            * attribute _isClearHidden
+		            * access public
+		            * type boolean
+		            * default true
+		            */
+					_isClearHidden: false
+				},
+				
+				/**
+				* On Polymer ready, set defaults
+				*/
+				ready: function() {
+					this._resolveDisabledUI();
+					this._resolveReadOnlyUI();
 				},
 
 				/**
 				* Tests whether or not clicking on the clear button should clear the value.
 				* Returns true if the isDisabled attribute is not set, false otherwise.
 				*
-				* function testClearInput
-				* access public
+				* function _testClearInput
+				* access private
 				* returns boolean
 				*/
-				testClearInput: function() {
+				_testClearInput: function() {
 					if(this.isDisabled === void 0) {
 						this.clearInput();
 						return true;
@@ -199,11 +152,13 @@
 				/**
 				* Is called when the value of the text input changes
 				*
-				* @method valueChanged
-				* @access public
-				* @returns undefined
+				* method _valueChanged
+				* access private
+				* returns undefined
 				*/
-				valueChanged: function() {
+				_valueChanged: function() {
+					this._resolveClearHiddenUI();
+
 					/**
                     * Fires when the the value of the text input is changed
                     *
@@ -212,6 +167,90 @@
 					this.fire('change');
 				},
 
+				/**
+				* Sets the input as is-disabled (non-clearable)
+				*
+				* @method setAsDisabled
+				* @access public
+				* @returns undefined
+				*/
+				setAsDisabled: function() {
+					this.isDisabled = true;
+					this._resolveDisabledUI();
+				},
+
+				/**
+				* Sets the input as is-read-only (clearable, non-editable)
+				*
+				* @method setAsReadOnly
+				* @access public
+				* @returns undefined
+				*/
+				setAsReadOnly: function() {
+					this.isReadOnly = true;
+					this._resolveReadOnlyUI();
+				},				
+
+				/**
+				* Fully enables the input, removing any restrictions
+				*
+				* @method enable
+				* @access public
+				* @returns undefined
+				*/
+				enable: function() {
+					this.isDisabled = void 0;
+					this.isReadOnly = void 0;
+					this._resolveDisabledUI();
+					this._resolveReadOnlyUI();
+				},
+
+				/**
+				* Adds/removes the disabled flag from the textInput based
+				* on the value of isDisabled
+				*
+				* method _resolveDisabledUI
+				* access private
+				* returns undefined
+				*/
+				_resolveDisabledUI: function() {
+					this.$.textInput.removeAttribute('disabled');
+					
+					if (this.isDisabled !== void 0) {
+						this.$.textInput.setAttribute('disabled', true);
+					}
+
+					this._resolveClearHiddenUI();
+				},
+
+				/**
+				* Adds/removes the readonly flag from the textInput based
+				* on the value of isReadOnly
+				*
+				* method _resolveReadOnlyUI
+				* access private
+				* returns undefined
+				*/
+				_resolveReadOnlyUI: function() {
+					this.$.textInput.removeAttribute('readonly');
+					
+					if (this.isReadOnly !== void 0) {
+						this.$.textInput.setAttribute('readonly', true);
+					}
+				},
+
+				/**
+				* Sets _isClearHidden to true if the textInput is disabled, or
+				* the textInput contains no value
+				*
+				* method _resolveClearHiddenUI
+				* access private
+				* returns undefined
+				*/
+				_resolveClearHiddenUI: function()  {
+					this._isClearHidden = this.value.length === 0 || this.isDisabled !== void 0;
+				},
+
 				/**
 				* Is called when the text input is clicked on. This will allow people to tell when the input itself is clicked,
 				* not when the clearable button is clicked
diff --git a/demo.html b/demo.html
index 3017f22..c267655 100644
--- a/demo.html
+++ b/demo.html
@@ -7,12 +7,12 @@
     <link rel="import" href="clearable-input.html">
 </head>
 <style>
-	div {
+	/*div {
 		border: 1px solid black;
 		margin-bottom: 10px;
 		padding: 10px;
 		width: 25%;
-	}
+	}*/
 </style>
 
 <body unresolved>
@@ -28,12 +28,12 @@
 
 <div>
 	<p>Read Only input with a value</p>
-	<clearable-input placeholder="Hello World" value="Foo" readonly></clearable-input>
+	<clearable-input placeholder="Hello World" value="Foo" is-read-only></clearable-input>
 </div>
 
 <div>
 	<p>Disabled input</p>
-	<clearable-input placeholder="Hello World" value="Foo" isDisabled></clearable-input>
+	<clearable-input placeholder="Hello World" value="Foo" is-disabled></clearable-input>
 </div>
 
 <div>

From c7b5a850c089ceeedaa78b2211b41a8d920c2765 Mon Sep 17 00:00:00 2001
From: Brent Hosie <brent.hosie@infusionsoft.com>
Date: Thu, 23 Jul 2015 14:49:14 -0600
Subject: [PATCH 3/4] demo updates

---
 demo.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/demo.html b/demo.html
index c267655..5c5ec6b 100644
--- a/demo.html
+++ b/demo.html
@@ -6,13 +6,13 @@
     <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="clearable-input.html">
 </head>
-<style>
-	/*div {
+<style is="custom-style">
+	div {
 		border: 1px solid black;
 		margin-bottom: 10px;
 		padding: 10px;
 		width: 25%;
-	}*/
+	}
 </style>
 
 <body unresolved>

From 3c320cc1bfb440f1df7e4a5f0b7eab3fa8a6e1c4 Mon Sep 17 00:00:00 2001
From: Brent Hosie <brent.hosie@infusionsoft.com>
Date: Thu, 23 Jul 2015 15:02:09 -0600
Subject: [PATCH 4/4] fixed css for iron-icon. got rid of support on the demo
 page for custom colors (style it yourself!!)

---
 clearable-input.css | 10 +++++-----
 demo.html           |  5 -----
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/clearable-input.css b/clearable-input.css
index 0565f02..5170925 100644
--- a/clearable-input.css
+++ b/clearable-input.css
@@ -6,16 +6,16 @@
     display: block;
     right: 5px;
     top: 0px; */
-    position:relative;
+
+
+    position:absolute;
     cursor: pointer;
     width: 12px;
     height: 12px;
+    top: 0px;
+    right: 5px;
 }
 :host #iconWrapper iron-icon {
-    position: absolute;
-    display: block;
-    right: 5px;
-    top: 0px; 
 	width: 12px;
 	height: 12px;
 }
\ No newline at end of file
diff --git a/demo.html b/demo.html
index 5c5ec6b..cee2388 100644
--- a/demo.html
+++ b/demo.html
@@ -35,11 +35,6 @@
 	<p>Disabled input</p>
 	<clearable-input placeholder="Hello World" value="Foo" is-disabled></clearable-input>
 </div>
-
-<div>
-	<p>Custom Colors</p>
-	<clearable-input placeholder="Hello World" value="Foo" backgroundColor="#000" color="white"></clearable-input>
-</div>
 </body>
 <script>
 </script>