chrome/browser/resources/print_preview/ui/pin_settings.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="../data/state.html">
<link rel="import" href="input_behavior.html">
<link rel="import" href="print_preview_shared_css.html">
<link rel="import" href="settings_behavior.html">
<link rel="import" href="settings_section.html">

<dom-module id="print-preview-pin-settings">
  <template>
    <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="$i18n{pinErrorMessage}" required auto-validate>
          </cr-input>
        </div>
      </print-preview-settings-section>
    </iron-collapse>
  </template>
  <script src="pin_settings.js"></script>
</dom-module>