/
masked-input.hbs
45 lines (44 loc) · 1.44 KB
/
masked-input.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="masked-input {{if displayOnly "display-only"}} {{if allowCopy "allow-copy"}}"
data-test-masked-input data-test-field>
{{#if displayOnly}}
<pre class="masked-value display-only is-word-break {{unless showValue "masked-font"}}">{{unless showValue (truncate value 20) value}}</pre>
{{else if inputField}}
<input
autocomplete="off"
spellcheck="false"
value={{value}}
class="input {{unless showValue "masked-font"}}"
onchange={{action "updateValue"}}
data-test-input
/>
{{else}}
<textarea
class="input masked-value {{unless showValue "masked-font"}}"
rows=1 wrap="off"
onkeydown={{action onKeyDown}}
onchange={{action "updateValue"}}
onkeyup={{action
(action "handleKeyUp" name)
value="target.value"
}}
value={{value}}
data-test-textarea
/>
{{/if}}
{{#if allowCopy}}
<CopyButton
@clipboardText={{value}}
@success={{action (set-flash-message 'Data copied!')}}
class="copy-button button {{if displayOnly "is-compact"}}"
data-test-copy-button>
<Icon @glyph="copy-action" aria-hidden="Copy value" />
</CopyButton>
{{/if}}
<button
onclick={{action "toggleMask"}}
type="button"
class="{{if (eq value "") "has-text-grey"}} masked-input-toggle button"
data-test-button>
<Icon @glyph={{if showValue "visibility-show" "visibility-hide"}} aria-hidden="true" />
</button>
</div>