<commit_before><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="paper-chip.html">

<!--

Material design: [Chips](https://material.io/guidelines/components/chips.html)

`paper-chip-input`
paper-chip's combined with a paper-input element.

### Styling
The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-chip-input-focus-color` | Label and underline color when the input is focused | `--primary-color`
`--paper-chip-input-font-size` | Fontsize applied to input field | `13px`
`--paper-chip-input-label-font-size` | Fontsize applied to input label | `13px`

@element paper-chip-input
@demo demo/index.html
-->

<dom-module id="paper-chip-input">
	<template>
		<style>
			paper-input {
				--paper-input-container-focus-color: var(--paper-chip-input-focus-color, var(--primary-color));

				--paper-input-container-input: {
					font-family: 'Roboto', sans-serif;
					-webkit-font-smoothing: antialiased;
					font-size: var(--paper-chip-input-font-size, 13px);
				}

				--paper-input-container-label: {
					font-family: 'Roboto', sans-serif;
					-webkit-font-smoothing: antialiased;
					font-size: var(--paper-chip-input-label-font-size, 13px);
				}
			}
		</style>

		<iron-a11y-keys target="paperInput" keys="enter" on-keys-pressed="_onKeyEnter"></iron-a11y-keys>
		<iron-a11y-keys target="paperInput" keys="backspace" on-keys-pressed="_onKeyBackspace"></iron-a11y-keys>

		<paper-input id="paperInput" 
					always-float-label$="[[alwaysFloatLabel]]" 
					no-label-float$="[[noLabelFloat]]" 
					disabled$="[[disabled]]"
					value="{{_value}}" 
					label="[[label]]">

			<slot id="slot" name="input" slot="prefix"></slot>
			<slot id="slot2" name="input2" slot="prefix">
				<dom-repeat items="[[items]]">
					<template>
						[[item.name]]
						<paper-chip id="paper-chip-[[item]]-[[index]]" label="[[item]]" closable$="[[closable]]" on-chip-removed="_removeChip"></paper-chip>
					</template>
				</dom-repeat>
			</slot>
		</paper-input>

	</template>

	<script>
		class PaperChipInput extends Polymer.Element {

			static get is() {
				return 'paper-chip-input';
			}

			static get properties() {
				return {

					/**
 					* Set to true to always float the floating label.<commit_msg>Removed additional small 'x' on the right side of the search bar on IE and Edge<commit_after><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="paper-chip.html">

<!--

Material design: [Chips](https://material.io/guidelines/components/chips.html)

`paper-chip-input`
paper-chip's combined with a paper-input element.

### Styling
The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-chip-input-focus-color` | Label and underline color when the input is focused | `--primary-color`
`--paper-chip-input-font-size` | Fontsize applied to input field | `13px`
`--paper-chip-input-label-font-size` | Fontsize applied to input label | `13px`

@element paper-chip-input
@demo demo/index.html
-->

<dom-module id="paper-chip-input">
	<template>
		<style>
			paper-input {
				--paper-input-container-focus-color: var(--paper-chip-input-focus-color, var(--primary-color));

				--paper-input-container-input: {
					font-family: 'Roboto', sans-serif;
					-webkit-font-smoothing: antialiased;
					font-size: var(--paper-chip-input-font-size, 13px);
				}

				--paper-input-container-label: {
					font-family: 'Roboto', sans-serif;
					-webkit-font-smoothing: antialiased;
					font-size: var(--paper-chip-input-label-font-size, 13px);
				}

				--paper-input-container-ms-clear: {
					display: none;
				}
			}
		</style>

		<iron-a11y-keys target="paperInput" keys="enter" on-keys-pressed="_onKeyEnter"></iron-a11y-keys>
		<iron-a11y-keys target="paperInput" keys="backspace" on-keys-pressed="_onKeyBackspace"></iron-a11y-keys>

		<paper-input id="paperInput"
					always-float-label$="[[alwaysFloatLabel]]"
					no-label-float$="[[noLabelFloat]]"
					disabled$="[[disabled]]"
					value="{{_value}}"
					label="[[label]]">

			<slot id="slot" name="input" slot="prefix"></slot>
			<slot id="slot2" name="input2" slot="prefix">
				<dom-repeat items="[[items]]">
					<template>
						[[item.name]]
						<paper-chip id="paper-chip-[[item]]-[[index]]" label="[[item]]" closable$="[[closable]]" on-chip-removed="_removeChip"></paper-chip>
					</template>
				</dom-repeat>
			</slot>
		</paper-input>

	</template>

	<script>
		class PaperChipInput extends Polymer.Element {

			static get is() {
				return 'paper-chip-input';
			}

			static get properties() {
				return {

					/**
 					* Set to true to always float the floating label.
{'fraction_non_alphanumeric': 0.19992462785000942, 'fraction_numerical': 0.008290936498963633, 'mean_word_length': 3.404979253112033, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 61, 'https://': 2, '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': '2091980', 'n_tokens_mistral': 2072, 'n_tokens_neox': 1746, 'n_words': 335}