blob: dde1f35c2662c493199bd1ec4dc56e49acbfa334 [file] [log] [blame]
<style include="cr-shared-style settings-shared md-select">
cr-input {
/* Larger cr-input margin (by reserving space for error display). */
--cr-input-error-display: block;
margin-bottom: 0;
width: var(--settings-input-max-width);
}
/* Override the padding-top (the space is set by save-to-this-device). */
div[slot='button-container'] {
padding-top: 0;
}
.md-select + .md-select {
margin-inline-start: 8px;
}
#month {
width: 70px;
}
#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;
}
#year {
width: 100px;
}
/* For nickname input, cr-input-width is the same as other input fields */
#nicknameInput {
--cr-input-width: var(--settings-input-max-width);
width: fit-content;
}
#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 {
display: none;
}
/* Same style as cr-input error except margin-top. */
#expired-error {
display: block;
font-size: var(--cr-form-field-label-font-size);
height: var(--cr-form-field-label-height);
line-height: var(--cr-form-field-label-line-height);
margin: 8px 0;
visibility: hidden;
}
:host([expired_]) #expired-error {
visibility: visible;
}
#expired-error,
:host([expired_]) #expiration {
color: var(--google-red-600);
}
@media (prefers-color-scheme: dark) {
#expired-error,
:host([expired_]) #expiration {
color: var(--google-red-refresh-300);
}
}
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
<div slot="title">[[title_]]</div>
<div slot="body">
<cr-input id="numberInput" label="$i18n{creditCardNumber}"
value="{{creditCard.cardNumber}}" autofocus>
</cr-input>
<!-- aria-hidden for creditCardExpiration label since
creditCardExpirationMonth and creditCardExpirationYear provide
sufficient labeling. -->
<label id='expiration' class="cr-form-field-label" aria-hidden="true">
$i18n{creditCardExpiration}
</label>
<select class="md-select" id="month" value="[[expirationMonth_]]"
on-change="onMonthChange_"
aria-label="$i18n{creditCardExpirationMonth}"
aria-invalid$="[[getExpirationAriaInvalid_(expired_)]]">
<template is="dom-repeat" items="[[monthList_]]">
<option>[[item]]</option>
</template>
</select>
<select class="md-select" id="year" value="[[expirationYear_]]"
on-change="onYearChange_"
aria-label="$i18n{creditCardExpirationYear}"
aria-invalid$="[[getExpirationAriaInvalid_(expired_)]]">
<template is="dom-repeat" items="[[yearList_]]">
<option>[[item]]</option>
</template>
</select>
<div id="expired-error">$i18n{creditCardExpired}</div>
<!-- Place cardholder name field and nickname field after expiration.-->
<cr-input id="nameInput" label="$i18n{creditCardName}"
value="{{creditCard.name}}" spellcheck="false">
</cr-input>
<cr-input id="nicknameInput" label="$i18n{creditCardNickname}"
value="{{creditCard.nickname}}" spellcheck="false" maxlength="25"
on-input="validateNickname_"
invalid="[[nicknameInvalid_]]"
error-message="$i18n{creditCardNicknameInvalid}">
<div id="charCount" slot="suffix">
[[computeNicknameCharCount_(creditCard.nickname)]]/25
</div>
</cr-input>
<div id="saved-to-this-device-only-label">
$i18n{savedToThisDeviceOnly}
</div>
</div>
<div slot="button-container">
<cr-button id="cancelButton" class="cancel-button"
on-click="onCancelButtonTap_">$i18n{cancel}</cr-button>
<cr-button id="saveButton" class="action-button"
on-click="onSaveButtonTap_"
disabled="[[!saveEnabled_(nicknameInvalid_, creditCard.*,
expired_)]]">
$i18n{save}
</cr-button>
</div>
</cr-dialog>