<commit_before><link rel='import' href='../polymer/polymer.html'>
<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='../iron-icons/iron-icons.html'>
<link rel="import" href="../iron-input/iron-input.html">
<link rel='import' href='../paper-styles/paper-styles.html'>
<link rel='import' href='paper-chips.html'>

<!--
A search box in which selected values are collected as chips. This element can
be used to let users enter topics or contacts.

### Example

```html
<paper-chips-search items=[[array]]></paper-chips-search>
```

@demo demo/chips-search.html
-->
<dom-module id='paper-chips-search'>

	<template>

		<style>
			:host {
				background: white;
				display: block;
				padding: 5px 16px;
				min-height: 32px;
				line-height: 40px;
			}

			#input {
				border: 0;
				outline: 0;
				width: 33%;
				height: 32px;
			}
		</style>

		<paper-chips id='chips' items={{items}} empty={{_emptyItems}} on-delete-item='focus'></paper-chips>
		<input is='iron-input' id='input' bind-value={{search}} placeholder=[[_getPlaceholder(_emptyItems,placeholder)]]></input>
	</template>

</dom-module>

<script>

(function() {

	Polymer({
		is: 'paper-chips-search',
		properties: {
			/**
	    	 * Text for which the user is searching
	    	 */
	    	search: {
	    		type: String,
	    		notify: true,
	    		value: ''
	    	},

			/**
			 * Array of chips, e.g. [
			 *  { id: 'apples', name: 'Apples'},
			 *  { id: 'pears', name: 'Pears'}
			 * ]
			 */
			items: {
				type: Array,
				notify: true,
				value: []
			},

			/**
			 * Text shown in the search box if the user didn't enter any search
			 */
			placeholder: {
				type: String,
				value: 'Search'
			},

			_emptyItems: Boolean
		},

		/**
		 * Adds a chip
		 */
		add: function(item) {
			this.$.chips.add(item);

			// Clear current search term
			this.search = '';

			this.focus();
		},

		/**
		 * Focuses the input box
		 */
		focus: function() {
			this.$.input.focus();
		},

		/**
		 * Only show the placeholder if no items are selected
		 */
		_getPlaceholder: function(_emptyItems,placeholder) {
			if (!_emptyItems) {
				return '';
			}

			return placeholder;
		}
	});

})();

</script>
<commit_msg>Align height if no chips are selected<commit_after><link rel='import' href='../polymer/polymer.html'>
<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='../iron-icons/iron-icons.html'>
<link rel="import" href="../iron-input/iron-input.html">
<link rel='import' href='../paper-styles/paper-styles.html'>
<link rel='import' href='paper-chips.html'>

<!--
A search box in which selected values are collected as chips. This element can
be used to let users enter topics or contacts.

### Example

```html
<paper-chips-search items=[[array]]></paper-chips-search>
```

@demo demo/chips-search.html
-->
<dom-module id='paper-chips-search'>

	<template>

		<style>
			:host {
				background: white;
				display: block;
				padding: 5px 16px;
				min-height: 32px;
				line-height: 40px;
			}

			#input {
				border: 0;
				outline: 0;
				width: 33%;
				height: 40px;
			}
		</style>

		<paper-chips id='chips' items={{items}} empty={{_emptyItems}} on-delete-item='focus'></paper-chips>
		<input is='iron-input' id='input' bind-value={{search}} placeholder=[[_getPlaceholder(_emptyItems,placeholder)]]></input>
	</template>

</dom-module>

<script>

(function() {

	Polymer({
		is: 'paper-chips-search',
		properties: {
			/**
	    	 * Text for which the user is searching
	    	 */
	    	search: {
	    		type: String,
	    		notify: true,
	    		value: ''
	    	},

			/**
			 * Array of chips, e.g. [
			 *  { id: 'apples', name: 'Apples'},
			 *  { id: 'pears', name: 'Pears'}
			 * ]
			 */
			items: {
				type: Array,
				notify: true,
				value: []
			},

			/**
			 * Text shown in the search box if the user didn't enter any search
			 */
			placeholder: {
				type: String,
				value: 'Search'
			},

			_emptyItems: Boolean
		},

		/**
		 * Adds a chip
		 */
		add: function(item) {
			this.$.chips.add(item);

			// Clear current search term
			this.search = '';

			this.focus();
		},

		/**
		 * Focuses the input box
		 */
		focus: function() {
			this.$.input.focus();
		},

		/**
		 * Only show the placeholder if no items are selected
		 */
		_getPlaceholder: function(_emptyItems,placeholder) {
			if (!_emptyItems) {
				return '';
			}

			return placeholder;
		}
	});

})();

</script>

{'fraction_non_alphanumeric': 0.17964880684376408, 'fraction_numerical': 0.00585321927059883, 'mean_word_length': 2.6628194558944767, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1515645', 'n_tokens_mistral': 1857, 'n_tokens_neox': 1518, 'n_words': 362}