Add key-value support

[alelb]

It would be nice if paper-chip supports key-value to store the main information.

We use transclusion to include the content to the component

<paper-chip single-line>
      <div slot="label">content goes here</div>
</paper-chip>

We can introduce a key attribute for the paper-chip and go on with the transclusion of the main content

<paper-chip single-line key="some-key-value">
      <!-- slot="label" or slot="value" -->
      <div slot="label">content goes here</div>
</paper-chip>

What do you think? @leogr, @leodido, @theboolean

[leogr]

I agree that it would be very useful 👍

I'd suggest to do not add another slot, just add a value attribute so:

<paper-chip single-line value="some-value">
      <div slot="label">content goes here</div>
</paper-chip>

Then, I'd like to refactor the tags attribute of <paper-chip-input> to values too, in order to make naming more consistent.

Finally, IMHO, <paper-chip>'s value property should return the label content when the <paper-chip>'s value attribute is not set (using getter and setter functions you can easily implement that). In this way, when collecting values the <paper-chip-input> can just rely on the value property only. That's the same behaviour of native elements <select> and <option>.

[alelb]

<paper-chip> now supports value property like <option> native element and not just a text value.

In <paper-chip-input-autocomplete> you can configure datasource properties from outside also:

<paper-chip-input-autocomplete display-property="value" value-property="key">
</paper-chip-input-autocomplete>

@leogr I close the issue but if you have any other good tips don't hesitate to reopen it.