| <style include="print-preview-shared"> |
| :host { |
| margin-top: 0 !important; |
| } |
| |
| :host([input-valid_]) #pinValue { |
| --cr-input-error-display: none; |
| } |
| |
| /* Margin = standard margin (16px) - error field margin (8px) */ |
| :host([!input-valid_]) #customInputWrapper { |
| margin-bottom: 8px; |
| } |
| |
| #pinValue { |
| --cr-form-field-label-height: 100%; |
| cursor: default; |
| } |
| |
| :host #title { |
| align-self: baseline; |
| } |
| </style> |
| <print-preview-settings-section> |
| <div slot="title"></div> |
| <div slot="controls" class="checkbox"> |
| <cr-checkbox id="pin" on-change="onPinChange_" |
| disabled="[[checkboxDisabled_]]" aria-labelledby="pin-label"> |
| <span id="pin-label">$i18n{optionPin}</span> |
| </cr-checkbox> |
| </div> |
| </print-preview-settings-section> |
| <iron-collapse opened="[[pinEnabled_]]" |
| on-transitionend="onCollapseChanged_"> |
| <print-preview-settings-section id="customInputWrapper"> |
| <div slot="title"></div> |
| <div slot="controls"> |
| <cr-input id="pinValue" type="text" pattern="[0-9]{4}" minlength="4" |
| maxlength="4" data-timeout-delay="250" aria-labelledby="pin" |
| placeholder="$i18n{pinPlaceholder}" spellcheck="false" |
| disabled$="[[inputDisabled_(pinEnabled_, inputValid_, disabled)]]" |
| error-message="[[getPinErrorMessage_(inputValid_)]]" required |
| auto-validate> |
| </cr-input> |
| </div> |
| </print-preview-settings-section> |
| </iron-collapse> |
