| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> |
| <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html"> |
| <link rel="import" href="chrome://resources/html/assert.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| <link rel="import" href="shortcut_util.html"> |
| |
| <dom-module id="extensions-shortcut-input"> |
| <template> |
| <style include="cr-icons cr-hidden-style"> |
| #main { |
| position: relative; |
| width: 200px; |
| } |
| |
| #clearContainer { |
| --cr-icon-ripple-size: 28px; |
| position: absolute; |
| right: 2px; |
| } |
| |
| :host-context([dir='rtl']) #clearContainer { |
| 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_)]]"> |
| <paper-icon-button-light id="clearContainer" slot="suffix" |
| class="icon-cancel no-overlap" |
| hidden$="[[computeClearHidden_(capturing_, shortcut)]]"> |
| <button id="clear" on-click="onClearTap_"></button> |
| </paper-icon-button-light> |
| </cr-input> |
| </div> |
| </template> |
| <script src="shortcut_input.js"></script> |
| </dom-module> |
