ui/webui/resources/cr_elements/cr_input/cr_input.html

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

<link rel="import" href="../../html/assert.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="../hidden_style_css.html">
<link rel="import" href="../shared_vars_css.html">
<link rel="import" href="cr_input_style_css.html">

<dom-module id="cr-input">
  <template>
    <style include="cr-hidden-style cr-input-style">
      /*
        A 'suffix' element will be outside the underlined space, while a
        'prefix' element will be inside the underlined space by default.

        Regarding cr-input's width:
        When there's no element in the 'prefix' or 'suffix' slot, setting
        the width of cr-input as follows will work as expected:

          cr-input {
            width: 200px;
          }

        However, when there's an element in the 'suffix' and/or 'prefix'
        slot, setting the 'width' will dictate the total width of the input
        field *plus* the 'prefix' and 'suffix' elements. To set the width
        of the input field + 'prefix' when a 'suffix' is present, use
        --cr-input-width.

          cr-input {
            --cr-input-width: 200px;
          }
      */

      /* Disabled status should not impact suffix slot. */
      :host([disabled]) :-webkit-any(#label, #error, #input-container) {
        opacity: var(--cr-disabled-opacity);
        pointer-events: none;
      }

      /* Margin between <input> and <paper-button> in the 'suffix' slot */
      :host ::slotted(paper-button[slot=suffix]) {
        margin-inline-start: var(--cr-button-edge-spacing) !important;
      }

      :host([invalid]) #label {
        color: var(--cr-input-error-color);
      }

      #input::placeholder {
        color: var(--cr-input-placeholder-color);
      }

      :host([invalid]) #input {
        caret-color: var(--cr-input-error-color);
      }

      :host([readonly]) #input {
        opacity: 0.6;
      }

      :host([invalid]) #underline {
        border-color: var(--cr-input-error-color);
      }

      /* Error styling below. */
      #error {
        /* Defaults to "display: block" and "visibility:hidden" to allocate
           space for error message, such that the page does not shift when
           error appears. For cr-inputs that can't be invalid, but are in a
           form with cr-inputs that can be invalid, this space is also desired
           in order to have consistent spacing.

           If spacing is not needed, apply "--cr-input-error-display: none". */
        color: var(--cr-input-error-color);
        display: var(--cr-input-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([invalid]) #error {
        visibility: visible;
      }

      #row-container,
      #inner-input-container {
        align-items: center;
        display: flex;
        /* This will spread the input field and the suffix apart only if the
           host element width is intentionally set to something large. */
        justify-content: space-between;
        position: relative;
      }

      #row-container {
        @apply --cr-input-row-container;
      }

      #input[type='search']::-webkit-search-cancel-button {
        -webkit-appearance: none;
      }
    </style>
    <div id="label" hidden="[[!label]]" aria-hidden="true">[[label]]</div>
    <div id="row-container">
      <div id="input-container">
        <!-- Only attributes that are named inconsistently between html and js
             need to use attr$="", such as |tabindex| vs .tabIndex and
             |readonly| vs .readOnly. -->
        <div id="inner-input-container">
          <slot name="prefix"></slot>
          <input id="input" disabled="[[disabled]]" autofocus="[[autofocus]]"
              value="{{value::input}}" tabindex$="[[tabindex]]" type="[[type]]"
              readonly$="[[readonly]]" maxlength$="[[maxlength]]"
              pattern$="[[pattern]]" required="[[required]]"
              minlength$="[[minlength]]"
              max="[[max]]" min="[[min]]" on-focus="onInputFocus_"
              on-blur="onInputBlur_" on-change="onInputChange_"
              on-keydown="onInputKeydown_">
        </div>
        <div id="underline"></div>
      </div>
      <slot name="suffix"></slot>
    </div>
    <div id="error">[[errorMessage]]</div>
  </template>
  <script src="cr_input.js"></script>
</dom-module>