<commit_before>import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
import '@polymer/iron-input';

import './paper-chips.js';

/**
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
*/
class PaperChip extends mixinBehaviors([IronA11yKeysBehavior], PolymerElement) {
	static get template() {
		return html`
		<style>
			:host {
				background: white;
				display: block;
				padding: 5px 16px;
				min-height: 40px;
				@apply --paper-chips-search;
			}

			paper-chips {
				--paper-chips-chip: {
					margin-top: 4px;
					margin-bottom: 4px;
				}
			}

			iron-input {
				height: 32px;
				width: 40%;
				vertical-align: middle;
			}

			#input {
				border: 0;
				outline: 0;
				padding: 0;
				height: 100%;
				width: 100%;
				@apply --paper-chips-search-input;
			}

			#input::placeholder {
				@apply --paper-chips-search-input-placeholder;
			}
		</style>

		<paper-chips
			id="chips"<commit_msg>Middle align search entry box with chips<commit_after>import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
import '@polymer/iron-input';

import './paper-chips.js';

/**
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
*/
class PaperChip extends mixinBehaviors([IronA11yKeysBehavior], PolymerElement) {
	static get template() {
		return html`
		<style>
			:host {
				background: white;
				display: block;
				padding: 5px 16px;
				min-height: 40px;
				@apply --paper-chips-search;
			}

			paper-chips {
				--paper-chips-chip: {
					margin-top: 4px;
					margin-bottom: 4px;
				}
			}

			iron-input {
				height: 32px;
				width: 40%;
				vertical-align: middle;
				margin: 4px 0;
			}

			#input {
				border: 0;
				outline: 0;
				padding: 0;
				height: 100%;
				width: 100%;
				@apply --paper-chips-search-input;
			}

			#input::placeholder {
				@apply --paper-chips-search-input-placeholder;
			}
		</style>

		<paper-chips
			id="chips"
{'fraction_non_alphanumeric': 0.14329268292682926, 'fraction_numerical': 0.022103658536585365, 'mean_word_length': 3.1273584905660377, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 11, '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': '76558', 'n_tokens_mistral': 1163, 'n_tokens_neox': 898, 'n_words': 210}