| <style include="cr-icons cr-hidden-style"> | |
| #main { | |
| position: relative; | |
| width: 200px; | |
| } | |
| #clear { | |
| --cr-icon-button-size: 28px; | |
| position: absolute; | |
| right: 2px; | |
| } | |
| :host-context([dir='rtl']) #clear { | |
| left: -2px; | |
| right: inherit; | |
| } | |
| </style> | |
| <div id="main"> | |
| <cr-input id="input" placeholder="$i18n{shortcutTypeAShortcut}" | |
| error-message="[[getErrorString_(error_, | |
| '$i18nPolymer{shortcutIncludeStartModifier}', | |
| '$i18nPolymer{shortcutTooManyModifiers}', | |
| '$i18nPolymer{shortcutNeedCharacter}')]]" | |
| value="[[computeText_(capturing_, shortcut, pendingShortcut_)]]"> | |
| <cr-icon-button id="clear" aria-label="$i18nPolymer{clear}" | |
| slot="suffix" class="icon-cancel no-overlap" | |
| hidden$="[[computeClearHidden_(capturing_, shortcut)]]" | |
| on-click="onClearTap_"></cr-icon-button> | |
| </cr-input> | |
| </div> |