Platform: Token Component Technical Design

Token

Summary

Tokens are small items of information (similar to tags) that serve mainly to visualize previously selected items.

Platform vs. Core Implementation

The Core Token component seems to be the same as described here. A Platform token implementation is not needed.

Example

<fdp-token (close)="onClose()" [compact]="true">Apple</fdp-token>
<fdp-token (close)="onClose()">Banana</fdp-token>
<fdp-token (close)="onClose()">Orange</fdp-token>

Design

Property Bindings

compact: boolean

Toggles whether to display Token in "compact" mode.

Event Bindings

close

Event emitted on click of Token "close" icon.

Projected Content

The fdp-token accepts any string as its content.

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-token can be supported as:

<fdp-token i18n="@@banana" (close)="onClose()">Banana</fdp-token>

Redesign Required: No

---