summaryrefslogtreecommitdiffstats
path: root/chromium/chrome/browser/resources/settings/autofill_page/credit_card_list_entry.html
blob: 4f62b13e1f010c15e54f50ea71fd8a69b5d2bce2 (plain)
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
46
47
48
49
50
51
52
53
54
55
56
57
58
<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="passwords_shared_css.html">

<dom-module id="settings-credit-card-list-entry">
  <template>
    <style include="settings-shared passwords-shared">
      .expiration-column {
        align-items: center;
        display: flex;
        flex: 1;
      }

      #creditCardExpiration {
        flex: 1;
      }

      .payments-label {
        color: var(--cr-secondary-text-color);
        margin-inline-start: 16px;
      }
    </style>
    <div class="list-item">
      <div class="type-column">
        <span id="creditCardLabel">[[creditCard.metadata.summaryLabel]]</span>
        <span class="payments-label"
            hidden$="[[creditCard.metadata.isLocal]]">
          <span hidden$="[[creditCard.metadata.isCached]]">
            $i18n{googlePayments}
          </span>
          <span hidden$="[[!creditCard.metadata.isCached]]">
            $i18n{googlePaymentsCached}
          </span>
        </span>
      </div>
      <div class="expiration-column">
        <div id="creditCardExpiration">
            [[creditCard.expirationMonth]]/[[creditCard.expirationYear]]
        </div>
        <template is="dom-if" if="[[showDots_(creditCard.metadata)]]">
          <cr-icon-button class="icon-more-vert" id="creditCardMenu"
              title="$i18n{moreActions}" on-click="onDotsMenuClick_">
          </cr-icon-button>
        </template>
        <template is="dom-if" if="[[!showDots_(creditCard.metadata)]]">
          <cr-icon-button actionable class="icon-external"
              id="remoteCreditCardLink" on-click="onRemoteEditClick_">
          </cr-icon-button>
        </template>
      </div>
    </div>
  </template>
  <script src="credit_card_list_entry.js"></script>
</dom-module>