Merge pull request #50 from ThomasCybulski/Feature/adding-more-paper-…

…input-properties

added validation for paper-chip-input

README.md

@@ -119,6 +119,14 @@ $ polymer serve
     <link rel="import" href="paper-chip-input.html">
     <link rel="import" href="paper-chip.html">
     <next-code-block></next-code-block>
+
+	<script>
+
+    function validate() {
+        document.getElementById('inputForValidation').validate();
+	}
+	
+	</script>
   </template>
 </custom-element-demo>
 ```
@@ -132,6 +140,14 @@ $ polymer serve
 </paper-chip-input>
 
 <paper-chip-input disabled label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>
+
+<paper-chip-input label="paper-chip-input cannot be empty" required auto-validate error-message="needs some text!" closable></paper-chip-input>
+
+<paper-chip-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]" closable></paper-chip-input>
+
+<paper-chip-input style="display: inline-block; width: calc(100% - 75px);" id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-chip-input>
+<button onclick="validate()">Validate</button>
+
 ```
 
 ## Example: Autocomplete field with tags
@@ -410,5 +426,5 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 2. Create your feature branch: `git checkout -b my-new-feature`
 3. Commit your changes: `git commit -m 'Add some feature'`
 4. Push to the branch: `git push origin my-new-feature`
-5. Submit a pull request :D
+5. Submit a pull request 🤓
 

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "paper-chip",
-	"version": "2.0.17",
+	"version": "2.0.18",
 	"authors": [
 		"Thomas Cybulski <[email protected]>"
 	],

demo/index.html

@@ -21,7 +21,10 @@
 	<script src="states.js"></script>
 
 	<style is="custom-style" include="demo-pages-shared-styles">
-
+		#inputForValidation {
+			display: inline-block;
+			width: calc(100% - 75px);
+		}
 	</style>
 </head>
 
@@ -37,7 +40,7 @@ <h3>Basic paper-chip's</h3>
 
 				<paper-chip label="Basic with Avatar Text">
 					<span class="chip-background" slot="avatar">
-            			<span>T</span>
+						<span>T</span>
 					</span>
 				</paper-chip>
 
@@ -49,8 +52,8 @@ <h3>Basic paper-chip's</h3>
 
 				<paper-chip label="Closable and icon" closable>
 					<span class="chip-background" slot="avatar">
-            			<iron-icon icon="icons:favorite"></iron-icon>
-          			</span>
+						<iron-icon icon="icons:favorite"></iron-icon>
+					</span>
 				</paper-chip>
 
 			</template>
@@ -67,14 +70,14 @@ <h3>paper-chip's with custom styles</h3>
 
 				<paper-chip label="Custom avatar background color" class="custom-avatar-background">
 					<span class="chip-background" slot="avatar">
-            			<span>T</span>
+						<span>T</span>
 					</span>
 				</paper-chip>
 
 				<paper-chip label="Custom avatar font-size and icon/font color" class="custom-avatar-font-color-and-size">
 					<span class="chip-background" slot="avatar">
-           				<iron-icon icon="icons:favorite"></iron-icon>
-          			</span>
+						<iron-icon icon="icons:favorite"></iron-icon>
+					</span>
 				</paper-chip>
 
 				<style is="custom-style">
@@ -112,14 +115,24 @@ <h3>paper-chip's used as tags</h3>
 
 				<paper-chip-input disabled label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>
 
+				<paper-chip-input label="paper-chip-input cannot be empty" required auto-validate error-message="needs some text!" closable></paper-chip-input>
+
+				<paper-chip-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]" closable></paper-chip-input>
+
+				<paper-chip-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-chip-input>
+				<button onclick="validate()">Validate</button>
+
 			</template>
 		</demo-snippet>
 
 		<h3>paper-chip's from autocomplete</h3>
 		<demo-snippet>
 			<template>
 
-				<paper-chip-input-autocomplete id="paper-chip-input-autocomplete" label="+Add (Enter) -Delete (Backspace)" closable></paper-chip-input-autocomplete>
+				<paper-chip-input-autocomplete id="basicAutocomplete" label="Search Item ... " closable></paper-chip-input-autocomplete>
+
+				<paper-chip-input-autocomplete id="autocompleteAdditionalItems" label="Search or add additional items (Enter) (Cannot be empty)"
+				 additional-items required auto-validate error-message="needs some text!" closable></paper-chip-input-autocomplete>
 
 			</template>
 		</demo-snippet>
@@ -129,46 +142,54 @@ <h3>paper-chip's from autocomplete</h3>
 
 </html>
 <script>
+
+	function validate() {
+		document.getElementById('inputForValidation').validate();
+	}
+
 	window.addEventListener('WebComponentsReady', function () {
 
-		var allPaperChips = document.querySelectorAll('paper-chip[closable]')
+		let allPaperChips = document.querySelectorAll('paper-chip[closable]')
 
 		allPaperChips.forEach(function (paperChip) {
 			paperChip.addEventListener("chip-removed", function () {
-				var toast = document.querySelector('paper-toast');
+				let toast = document.querySelector('paper-toast');
 				toast.text = 'Removed paper-chip with label "' + paperChip.label + '"';
 				toast.open();
 			});
 		});
 
-		var allPaperChipInputs = document.querySelectorAll('paper-chip-input')
+		let allPaperChipInputs = document.querySelectorAll('paper-chip-input')
 
 		allPaperChipInputs.forEach(function (paperChipInput) {
 			paperChipInput.addEventListener("chip-removed", function (event) {
-				var toast = document.querySelector('paper-toast');
+				let toast = document.querySelector('paper-toast');
 				toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
 				toast.open();
 			});
 
 			paperChipInput.addEventListener("chip-created", function (event) {
-				var toast = document.querySelector('paper-toast');
+				let toast = document.querySelector('paper-toast');
 				toast.text = 'paper-chip created with label "' + event.detail.chipLabel + '"';
 				toast.open();
 			});
 		});
 
-		var allPaperChipInputAutocomplete = document.querySelectorAll('paper-chip-input-autocomplete')
+		let allPaperChipInputAutocomplete = document.querySelectorAll('paper-chip-input-autocomplete')
 
 		allPaperChipInputAutocomplete.forEach(function (paperChipInputAutocomplete) {
 			paperChipInputAutocomplete.addEventListener("chip-removed", function (event) {
-				var toast = document.querySelector('paper-toast');
+				let toast = document.querySelector('paper-toast');
 				toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
 				toast.open();
 			});
 		});
 
-		var element = document.querySelector('paper-chip-input-autocomplete');
-		element.source = states;
+		let basicAutocompleteElement = document.getElementById('basicAutocomplete');
+		basicAutocompleteElement.source = states;
+
+		let autocompleteAdditionalItems = document.getElementById('autocompleteAdditionalItems');
+		autocompleteAdditionalItems.source = states;
 	});
 
 </script>