masked-input.hbs

<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>