| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/html/md_select_css.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
| <link rel="import" href="../settings_shared_css.html"> |
| <link rel="import" href="../settings_vars_css.html"> |
| |
| <dom-module id="settings-credit-card-edit-dialog"> |
| <template> |
| <style include="settings-shared md-select"> |
| cr-input { |
| --cr-input-error-display: none; |
| margin-bottom: var(--cr-form-field-bottom-spacing); |
| width: var(--settings-input-max-width); |
| } |
| |
| .md-select + .md-select { |
| -webkit-margin-start: 8px; |
| } |
| |
| /* Prevent focus-outline from being chopped by the bottom of dialog body. |
| TODO(scottchen): find a more general way to solve this. */ |
| .md-select { |
| margin-bottom: 2px; |
| } |
| |
| #expired { |
| align-items: center; |
| background-color: var(--paper-red-50); |
| color: var(--settings-error-color); |
| display: flex; |
| height: 40px; |
| margin-top: 12px; |
| padding: 0 0 0 8px; |
| } |
| |
| #month { |
| width: 70px; |
| } |
| |
| #year { |
| width: 100px; |
| } |
| |
| label { |
| @apply --cr-form-field-label; |
| } |
| </style> |
| <cr-dialog id="dialog" close-text="$i18n{close}"> |
| <div slot="title">[[title_]]</div> |
| <div slot="body"> |
| <cr-input id="nameInput" label="$i18n{creditCardName}" |
| value="{{creditCard.name}}" autofocus |
| on-input="onCreditCardNameOrNumberChanged_"> |
| </cr-input> |
| <cr-input id="numberInput" label="$i18n{creditCardNumber}" |
| value="{{creditCard.cardNumber}}" |
| on-input="onCreditCardNameOrNumberChanged_"> |
| </cr-input> |
| <label>$i18n{creditCardExpiration}</label> |
| <select class="md-select" id="month" value="[[expirationMonth_]]" |
| on-change="onMonthChange_" |
| aria-label="$i18n{creditCardExpirationMonth}"> |
| <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}"> |
| <template is="dom-repeat" items="[[yearList_]]"> |
| <option>[[item]]</option> |
| </template> |
| </select> |
| <span id="expired" |
| hidden="[[!checkIfCardExpired_(expirationMonth_, expirationYear_)]]" |
| > |
| $i18n{creditCardExpired} |
| </span> |
| </div> |
| <div slot="button-container"> |
| <paper-button id="cancelButton" class="cancel-button" |
| on-click="onCancelButtonTap_">$i18n{cancel}</paper-button> |
| <paper-button id="saveButton" class="action-button" |
| on-click="onSaveButtonTap_" disabled>$i18n{save}</paper-button> |
| </div> |
| </cr-dialog> |
| </template> |
| <script src="credit_card_edit_dialog.js"></script> |
| </dom-module> |