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
|
<style include="cr-shared-style settings-shared">
cr-input {
/* Larger cr-input margin (by reserving space for error display). */
--cr-input-error-display: block;
margin-bottom: 0;
width: var(--cr-default-input-max-width);
}
/* Override the padding-top (the space is set by save-to-this-device). */
div[slot='button-container'] {
padding-top: 0;
}
#saved-to-this-device-only-label {
/* Overall space between input fields, including space between
nicknameInput and saved-to-this-device text, between
saved-to-this-device text and button. */
margin-bottom: 26px;
margin-top: 0;
}
#charCount {
font-size: var(--cr-form-field-label-font-size);
line-height: var(--cr-form-field-label-line-height);
padding-inline-start: 8px;
}
#nicknameInput:not(:focus-within) #charCount {
--cr-input-width: var(--cr-default-input-max-width);
display: none;
width: fit-content;
}
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
<div slot="title">[[title_]]</div>
<div slot="body">
<cr-input id="valueInput" label="$i18n{addPaymentMethodIban}"
on-blur="onIbanInputBlurred_"
invalid="[[showErrorForIban_(ibanValidationState_)]]"
error-message="$i18n{ibanInvalid}"
value="{{value_}}" autofocus>
</cr-input>
<cr-input id="nicknameInput" label="$i18n{ibanNickname}"
value="{{nickname_}}" spellcheck="false" maxlength="25"
aria-description="[[i18n('inputMaxLengthDescription', 25)]]">
<div id="charCount" slot="suffix">
[[computeNicknameCharCount_(nickname_)]]/25
</div>
</cr-input>
<div id="saved-to-this-device-only-label">
$i18n{ibanSavedToThisDeviceOnly}
</div>
</div>
<div slot="button-container">
<cr-button id="cancelButton" class="cancel-button"
on-click="onCancelButtonClick_">$i18n{cancel}</cr-button>
<cr-button id="saveButton" class="action-button"
on-click="onIbanSaveButtonClick_">
$i18n{save}
</cr-button>
</div>
</cr-dialog>
|
