| <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; |
| } |
| |
| /* Invisible so the element is still in the tab order. */ |
| [invisible] { |
| opacity: 0; |
| } |
| </style> |
| <div id="main"> |
| <cr-input id="input" placeholder="$i18n{shortcutTypeAShortcut}" |
| invalid="[[getIsInvalid_(error_)]]" |
| 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" |
| invisible$="[[computeClearInvisible_(capturing_, shortcut)]]" |
| hidden$="[[computeClearHidden_(shortcut)]]" |
| on-click="onClearTap_"></cr-icon-button> |
| </cr-input> |
| </div> |
