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

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

<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.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/cr_elements/search_highlight_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
<link rel="import" href="../print_preview_utils.html">
<link rel="import" href="../data/destination.html">
<link rel="import" href="highlight_utils.html">
<link rel="import" href="print_preview_shared_css.html">
<link rel="import" href="settings_behavior.html">

<dom-module id="print-preview-advanced-settings-item">
  <template>
    <style include="print-preview-shared md-select search-highlight-style
        cr-hidden-style">
      :host {
        display: flex;
        min-height: 54px;
        position: relative;
      }

      :host > * {
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }

      .label,
      .value {
        align-self: center;
        color: var(--cr-primary-text-color);
        overflow: hidden;
      }

      .label {
        flex: 1;
        min-width: 96px;
        opacity: 0.87;
      }

      .value {
        flex: 0;
        min-width: 239px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .value > * {
        display: flex;
        margin-inline-start: 10px;
      }

      cr-input {
        width: 239px;
        --cr-input-error-display: none;
      }

      select.md-select {
        font-size: 1em;
      }
    </style>
    <label class="label searchable">[[getDisplayName_(capability)]]</label>
    <div class="value">
      <template is="dom-if" if="[[isCapabilityTypeSelect_(capability)]]"
          restamp>
        <div>
          <select class="md-select" on-change="onUserInput_">
            <template is="dom-repeat" items="[[capability.select_cap.option]]">
              <option class="searchable" text="[[getDisplayName_(item)]]"
                  value="[[item.value]]"
                  selected="[[isOptionSelected_(item, currentValue_)]]">
              </option>
            </template>
          </select>
        </div>
      </template>
      <span hidden$="[[!isCapabilityTypeInput_(capability)]]">
        <cr-input type="text" on-input="onUserInput_" spellcheck="false"
            placeholder="[[getCapabilityPlaceholder_(capability)]]">
        </cr-input>
      </span>
      <span hidden$="[[!isCapabilityTypeCheckbox_(capability)]]">
        <cr-checkbox on-change="onCheckboxInput_"
            checked="[[isChecked_(currentValue_)]]">
        </cr-checkbox>
      </span>
    </div>
  </template>
  <script src="advanced_settings_item.js"></script>
</dom-module>