components-chromium/core-input/core-input-extracted.js

Polymer('core-input', {
  publish: {
    /**
     * Placeholder text that hints to the user what can be entered in
     * the input.
     *
     * @attribute placeholder
     * @type string
     * @default ''
     */
    placeholder: '',

    /**
     * If true, this input cannot be focused and the user cannot change
     * its value.
     *
     * @attribute disabled
     * @type boolean
     * @default false
     */
    disabled: false,

    /**
     * If true, the user cannot modify the value of the input.
     *
     * @attribute readonly
     * @type boolean
     * @default false
     */
    readonly: false,

    /**
     * If true, this input will automatically gain focus on page load.
     *
     * @attribute autofocus
     * @type boolean
     * @default false
     */
    autofocus: false,

    /**
     * If true, this input accepts multi-line input like a `<textarea>`
     *
     * @attribute multiline
     * @type boolean
     * @default false
     */
    multiline: false,

    /**
     * (multiline only) The height of this text input in rows. The input
     * will scroll internally if more input is entered beyond the size
     * of the component. This property is meaningless if multiline is
     * false. You can also set this property to "fit" and size the
     * component with CSS to make the input fit the CSS size.
     *
     * @attribute rows
     * @type number|'fit'
     * @default 'fit'
     */
    rows: 'fit',

    /**
     * The current value of this input. Changing inputValue programmatically
     * will cause value to be out of sync. Instead, change value directly
     * or call commit() after changing inputValue.
     *
     * @attribute inputValue
     * @type string
     * @default ''
     */
    inputValue: '',

    /**
     * The value of the input committed by the user, either by changing the
     * inputValue and blurring the input, or by hitting the `enter` key.
     *
     * @attribute value
     * @type string
     * @default ''
     */
    value: '',

    /**
     * Set the input type. Not supported for `multiline`.
     *
     * @attribute type
     * @type string
     * @default text
     */
    type: 'text',

    /**
     * If true, the input is invalid if its value is null.
     *
     * @attribute required
     * @type boolean
     * @default false
     */
    required: false,

    /**
     * A regular expression to validate the input value against. See
     * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
     * for more info. Not supported if `multiline` is true.
     *
     * @attribute pattern
     * @type string
     * @default '.*'
     */
    // FIXME(yvonne): The default is set to .* because we can't bind to pattern such
    // that the attribute is unset if pattern is null.
    pattern: '.*',

    /**
     * If set, the input is invalid if the value is less than this property. See
     * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
     * for more info. Not supported if `multiline` is true.
     *
     * @attribute min
     */
    min: null,

    /**
     * If set, the input is invalid if the value is greater than this property. See
     * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
     * for more info. Not supported if `multiline` is true.
     *
     * @attribute max
     */
    max: null,

    /**
     * If set, the input is invalid if the value is not `min` plus an integral multiple
     * of this property. See
     * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
     * for more info. Not supported if `multiline` is true.
     *
     * @attribute step
     */
    step: null,

    /**
     * The maximum length of the input value.
     *
     * @attribute maxlength
     * @type number
     */
    maxlength: null,

    /**
     * If this property is true, the text input's inputValue failed validation.
     *
     * @attribute invalid
     * @type boolean
     * @default false
     */
    invalid: false
  },

  ready: function() {
    this.handleTabindex(this.getAttribute('tabindex'));
  },

  invalidChanged: function() {
    this.classList.toggle('invalid', this.invalid);
    this.fire('input-'+ (this.invalid ? 'invalid' : 'valid'), {value: this.inputValue});
  },

  inputValueChanged: function() {
    this.updateValidity_();
  },

  valueChanged: function() {
    this.inputValue = this.value;
  },

  requiredChanged: function() {
    this.updateValidity_();
  },

  attributeChanged: function(attr, oldVal, curVal) {
    if (attr === 'tabindex') {
      this.handleTabindex(curVal);
    }
  },

  handleTabindex: function(tabindex) {
    if (tabindex > 0) {
      this.$.input.setAttribute('tabindex', -1);
    } else {
      this.$.input.removeAttribute('tabindex');
    }
  },

  /**
   * Commits the inputValue to value.
   *
   * @method commit
   */
  commit: function() {
     this.value = this.inputValue;
  },

  updateValidity_: function() {
    if (this.$.input.willValidate) {
      this.invalid = !this.$.input.validity.valid;
    }
  },

  keydownAction: function() {
    // for type = number, the value is the empty string unless the input is a valid number.
    // FIXME(yvonne): check other types
    if (this.type === 'number') {
      this.async(function() {
        this.updateValidity_();
      });
    }
  },

  inputChangeAction: function() {
    this.commit();
    if (!window.ShadowDOMPolyfill) {
      // re-fire event that does not bubble across shadow roots
      this.fire('change', null, this);
    }
  },

  focusAction: function(e) {
    if (this.getAttribute('tabindex') > 0) {
      // Forward focus to the inner input if tabindex is set on the element
      // This will not cause an infinite loop because focus will not fire on the <input>
      // again if it's already focused.
      this.$.input.focus();
    }
  },

  inputFocusAction: function(e) {
    if (window.ShadowDOMPolyfill) {
      // re-fire non-bubbling event if polyfill
      this.fire('focus', null, this, false);
    }
  },

  inputBlurAction: function() {
    if (window.ShadowDOMPolyfill) {
      // re-fire non-bubbling event
      this.fire('blur', null, this, false);
    }
  },

  blur: function() {
    // forward blur method to the internal input / textarea element
    this.$.input.blur();
  },

  click: function() {
    // forward click method to the internal input / textarea element
    this.$.input.click();
  },

  focus: function() {
    // forward focus method to the internal input / textarea element
    this.$.input.focus();
  },

  select: function() {
    // forward select method to the internal input / textarea element
    this.$.input.focus();
  },

  setSelectionRange: function(selectionStart, selectionEnd, selectionDirection) {
    // forward setSelectionRange method to the internal input / textarea element
    this.$.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
  },

  setRangeText: function(replacement, start, end, selectMode) {
    // forward setRangeText method to the internal input element
    if (!this.multiline) {
      this.$.input.setRangeText(replacement, start, end, selectMode);
    }
  },

  stepDown: function(n) {
    // forward stepDown method to the internal input element
    if (!this.multiline) {
      this.$.input.stepDown(n);
    }
  },

  stepUp: function(n) {
    // forward stepUp method to the internal input element
    if (!this.multiline) {
      this.$.input.stepUp(n);
    }
  },

  get willValidate() {
    return this.$.input.willValidate;
  },

  get validity() {
    return this.$.input.validity;
  },

  get validationMessage() {
    return this.$.input.validationMessage;
  },

  checkValidity: function() {
    var r = this.$.input.checkValidity();
    this.updateValidity_();
    return r;
  },

  setCustomValidity: function(message) {
    this.$.input.setCustomValidity(message);
    this.updateValidity_();
  }

});