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
59
60
61
62
63
|
<style include="settings-shared passwords-shared screen-reader-only">
.second-column {
align-items: center;
display: flex;
flex: 1;
justify-content: flex-end;
}
.list-item {
margin-bottom: 8px;
margin-top: 8px;
}
.sub-label {
color: var(--cr-secondary-text-color);
}
#ibanImage {
margin-inline-end: 16px;
vertical-align: middle;
}
</style>
<div class="list-item type-column" role="row">
<img id="ibanImage" src="[[getIbanImageSrc_(showNewFopDisplayEnabled_)]]" alt="">
<div class="summary-column screen-reader-only-host-node" role="cell">
<div class="screen-reader-only">
[[getA11yIbanDescription_(iban)]], [[iban.nickname]]
</div>
<div id="label" class="ellipses" aria-hidden="true">
[[getLabel_(iban)]]
</div>
<div id="subLabel" class="ellipses sub-label" aria-hidden="true">
[[getSubLabel_(iban)]]
</div>
</div>
<div role="cell" class="second-column">
<div id="paymentsIndicator"
hidden$="[[!shouldShowGooglePaymentsIndicator_(iban.metadata)]]">
<if expr="_google_chrome">
<picture id="paymentsIcon">
<source
srcset="[[getScaledSrcSet_('chrome://theme/IDR_AUTOFILL_GOOGLE_PAY_DARK_SMALL')]]"
media="(prefers-color-scheme: dark)">
<img alt="" srcset="[[getScaledSrcSet_('chrome://theme/IDR_AUTOFILL_GOOGLE_PAY_SMALL')]]">
</picture>
</if>
<if expr="not _google_chrome">
<span class="sub-label">$i18n{googlePayments}</span>
</if>
</div>
<template is="dom-if" if="[[showDotsMenu_(iban.metadata)]]">
<cr-icon-button class="icon-more-vert" id="ibanMenu"
title="[[getMoreActionsTitle_(iban)]]" on-click="onDotsMenuClick_">
</cr-icon-button>
</template>
<template is="dom-if" if="[[!showDotsMenu_(iban.metadata)]]">
<cr-icon-button class="icon-external" id="remoteIbanLink"
title="$i18n{remotePaymentMethodsLinkLabel}" role="link"
on-click="onRemoteEditClick_"
aria-description="$i18n{opensInNewTab}"></cr-icon-button>
</template>
</div>
</div>
|
