ui/lib/shared/addon/components/form-key-value/template.hbs

<div class="clearfix">
  {{#if header}}
    <div class="pull-left">
      <label class="acc-label">{{header}}</label>
    </div>
  {{/if}}

  {{#if (and allowUpload editing)}}
    <div class="pull-right">
      <button class="btn btn-sm bg-primary" type="button" {{action "upload" }}>{{t "uploadFile.label"}} <span
          class="icon icon-upload"></span></button>
    </div>
  {{/if}}
</div>

{{#if ary.length}}
  <table class="table fixed no-lines">
    <thead>
      <tr class="hidden-sm">
        <th>{{t keyLabel}}{{#if (and editing allowEditKey)}}{{field-required}}{{/if}}</th>
        <th width="30">&nbsp;</th>
        <th>{{t valueLabel}}</th>
        <th width="10">&nbsp;</th>
        <th width="30">&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      {{#each ary as |row|}}
        <tr>
          <td data-title="{{t keyLabel}}:">
            {{#if editing}}
              {{#if keyContent}}
                <NewSelect @content={{keyContent}} @class="form-control input-sm key"
                  @useContentForDefaultValue={{true}} @value={{row.key}} @placeholder={{keyPlaceholder}} @disabled={{not
                  (and allowEditKey (not-eq row.editable false))}} />
              {{else}}
                {{input-paste
                  separators=separators
                  pasted=(action "pastedValues")
                  class="form-control input-sm key"
                  type="text"
                  value=row.key
                  placeholder=keyPlaceholder
                  disabled=(not (and allowEditKey (not-eq row.editable false)))
                }}
              {{/if}}
            {{else}}
              {{row.key}}
            {{/if}}
          </td>

          <td class="valign-top text-center">
            {{#if editing}}
              {{t "formKeyValue.separator"}}
            {{/if}}
          </td>

          <td data-title="{{t valueLabel}}:">
            {{#if editing}}
              {{#if valueContent}}
                <NewSelect @content={{valueContent}} @class="form-control input-sm key"
                  @useContentForDefaultValue={{true}} @value={{row.value}} @placeholder={{keyPlaceholder}}
                  @disabled={{not (and allowEditKey (not-eq row.editable false))}} />
              {{else}}
                {{#if row.binary}}
                  {{t "formKeyValue.binary.byte" length=row.value.length}}
                {{else}}
                  {{#if allowMultilineValue}}
                    {{textarea-autogrow
                      class=(concat "form-control input-sm value" (if concealValue " conceal"))
                      spellcheck="false"
                      required=true
                      value=row.value
                      placeholder=valuePlaceholder
                      disabled=(eq row.editable false)
                    }}
                  {{else}}
                    {{input
                      class=(concat "form-control input-sm value" (if concealValue " conceal"))
                      spellcheck="false"
                      type="text"
                      value=row.value
                      placeholder=valuePlaceholder
                      disabled=(eq row.editable false)
                    }}
                  {{/if}}
                {{/if}}
              {{/if}}
            {{else}}
              <span class="{{if concealValue " conceal"}}">{{nl-to-br row.value}}</span>
            {{/if}}
          </td>
          <td>&nbsp;</td>
          <td class="valign-top text-right">
            {{#if (and editing allowRemove)}}
              <button class="btn bg-primary btn-sm" disabled={{eq row.editable false}} type="button" {{action "remove"
                row}}>
                <i class="icon icon-minus" />
                <span class="sr-only">
                  {{t "generic.remove"}}
                </span>
              </button>
            {{/if}}
          </td>
        </tr>
        {{#unless editing}}
          <div class="pb-10"></div>
        {{/unless}}
      {{/each}}
    </tbody>
  </table>
{{else if showNoneLabel}}
  {{#unless editing}}
    <div>{{t "generic.none"}}</div>
  {{/unless}}
{{/if}}

{{#if (and editing allowAdd)}}
  {{#if ary.length}}
    <div class="protip mb-5">
      {{t "formKeyValue.protip"}}
    </div>
  {{/if}}
  <div>
    <button class="btn bg-link icon-btn" type="button" {{action "add" }}>
      <i class="icon icon-plus text-small" />
      <span>{{t addActionLabel}}</span>
    </button>
  </div>
{{/if}}
<input type="file" accept="text/*" class="hide">