anypoint-text-behavior.html

<!--
Copyright (C) Mulesoft Inc.
All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="../iron-behaviors/iron-control-state.html">
<script>
window.Anypoint = window.Anypoint || {};
// Generate unique, monotonically increasing IDs for labels (needed by
// aria-labelledby) and add-ons.
Anypoint.TextFieldHelper = {};
Anypoint.TextFieldHelper.NextLabelID = 1;
Anypoint.TextFieldHelper.NextAddonID = 1;

/**
 * Use `Anypoint.AnypointTextBehavior` to implement inputs with `<anypoint-text-container>`. This
 * behavior is implemented by `<anypoint-text-fiels>`. It exposes a number of properties from
 * `<anypoint-text-container>` and `<input is="anypoint-input">` and they should be bound in your
 * template.
 *
 * The input element can be accessed by the `inputElement` property if you need to access
 * properties or methods that are not exposed.
 * @polymerBehavior Anypoint.AnypointTextBehavior
 */
Anypoint.AnypointTextBehaviorImpl = {
  properties: {
    /**
     * Fired when the input changes due to user interaction.
     *
     * @event change
     */
    /**
     * The label for this input. Bind this to `<label>`'s content and `hidden` property, e.g.
     * `<label hidden$="[[!label]]">[[label]]</label>` in your `template`
     */
    label: {
      type: String
    },
    /**
     * The value for this input. Bind this to the `<input is="anypoint-input">`'s `bindValue`
     * property, or the value property of your input that is `notify:true`.
     */
    value: {
      notify: true,
      type: String
    },
    /**
     * Set to true to disable this input. Bind this to both the `<anypoint-text-container>`'s
     * and the input's `disabled` property.
     */
    disabled: {
      type: Boolean,
      value: false
    },
    /**
     * Returns true if the value is invalid. Bind this to both the `<anypoint-text-container>`'s
     * and the input's `invalid` property.
     *
     * If `autoValidate` is true, the `invalid` attribute is managed automatically,
     * which can clobber attempts to manage it manually.
     */
    invalid: {
      type: Boolean,
      value: false,
      notify: true
    },
    /**
     * Set to true to prevent the user from entering invalid input.
     */
    preventInvalidInput: {
      type: Boolean
    },
    /**
     * Set this to specify the pattern allowed by `preventInvalidInput`.
     */
    allowedPattern: {
      type: String
    },
    /**
     * The type of the input. The supported types are `text`, `number` and `password`.
     */
    type: {
      type: String
    },
    /**
     * The datalist of the input (if any). This should match the id of an existing `<datalist>`.
     */
    list: {
      type: String
    },
    /**
     * A pattern to validate the `input` with.
     */
    pattern: {
      type: String
    },
    /**
     * Set to true to mark the input as required.
     */
    required: {
      type: Boolean,
      value: false
    },
    /**
     * The error message to display when the input is invalid.
     */
    errorMessage: {
      type: String
    },
    /**
     * After calling `validate()` this will be populated by latest result of the test for each
     * validator. Result item will contain following properties:
     *
     * - validator {String} Name of the validator
     * - valid {Boolean} Result of the test
     * - message {String} Error message, populated only if `valid` equal `false`
     *
     * This property is `undefined` if `validator` is not set.
     */
    validationStates: {
      type: Array,
      notify: true
    },
    /**
     * Value computed from `errorMessage`, `invalid` and `validationStates`.
     * True if the validation message should be displayed.
     */
    hasValidationMessage: {
      type: Boolean,
      notify: true
    },
    /**
     * Set to true to disable the floating label.
     */
    noLabelFloat: {
      type: Boolean,
      value: false
    },
    /**
     * Set to true to always float the label.
     */
    alwaysFloatLabel: {
      type: Boolean,
      value: false
    },
    /**
     * Set to true to auto-validate the input value.
     */
    autoValidate: {
      type: Boolean,
      value: false
    },
    /**
     * Name of the validator to use.
     */
    validator: {
      type: String
    },
    // HTMLInputElement attributes for binding if needed
    /**
     * HTMLInputElement.autocomplete attribute
     */
    autocomplete: {
      type: String,
      value: 'off'
    },
    /**
     * HTMLInputElement.autofocus attribute
     */
    autofocus: {
      type: Boolean,
      observer: '_autofocusChanged'
    },
    /**
     * HTMLInputElement.inputmode attribute
     */
    inputmode: {
      type: String
    },
    /**
     * HTMLInputElement.minlength attribute
     */
    minlength: {
      type: Number
    },
    /**
     * HTMLInputElement.maxlength attribute
     */
    maxlength: {
      type: Number
    },
    /**
     * HTMLInputElement.min attribute
     */
    min: {
      type: String
    },
    /**
     * HTMLInputElement.max attribute
     */
    max: {
      type: String
    },
    /**
     * HTMLInputElement.step attribute
     */
    step: {
      type: String
    },
    /**
     * HTMLInputElement.name attribute
     */
    name: {
      type: String
    },
    /**
     * HTMLInputElement.placeholder attribute
     */
    placeholder: {
      type: String,
      // need to set a default so _computeAlwaysFloatLabel is run
      value: ''
    },
    /**
     * HTMLInputElement.readonly attribute
     */
    readonly: {
      type: Boolean,
      value: false
    },
    /**
     * HTMLInputElement.size attribute
     */
    size: {
      type: Number
    },
    // Nonstandard attributes for binding if needed
    /**
     * HTMLInputElement.autocapitalize attribute
     */
    autocapitalize: {
      type: String,
      value: 'none'
    },
    /**
     * HTMLInputElement.autocorrect attribute
     */
    autocorrect: {
      type: String,
      value: 'off'
    },
    /**
     * HTMLInputElement.autosave attribute
     */
    autosave: {
      type: String
    },
    /**
     * HTMLInputElement.results attribute
     */
    results: {
      type: Number
    },
    /**
     * HTMLInputElement.accept attribute
     */
    accept: {
      type: String
    },
    /**
     * HTMLInputElement.multiple attribute
     */
    multiple: {
      type: Boolean
    },

    _ariaDescribedBy: {
      type: String,
      value: ''
    },

    _ariaLabelledBy: {
      type: String,
      value: ''
    }
  },

  listeners: {
    'addon-attached': '_onAddonAttached',
  },

  keyBindings: {
    'shift+tab:keydown': '_onShiftTabDown'
  },

  hostAttributes: {
    tabindex: 0
  },
  /**
   * Returns a reference to the input element.
   */
  get inputElement() {
    return this.$.input;
  },
  /**
   * Returns a reference to the focusable element.
   */
  get _focusableElement() {
    return this.inputElement;
  },

  observers: [
    '_validationStatesChanged(validationStates)',
    '_computeValidityStatus(invalid, errorMessage)',
    '_typeChanged(type)'
  ],

  registered: function() {
    // These types have some default placeholder text; overlapping
    // the label on top of it looks terrible. Auto-float the label in this case.
    this._typesThatHaveText = ['date', 'datetime', 'datetime-local', 'month',
      'time', 'week', 'file'
    ];
  },

  _typeChanged: function(type) {
    if (this.inputElement &&
      this._typesThatHaveText.indexOf(type) !== -1) {
      this.alwaysFloatLabel = true;
    }
  },

  attached: function() {
    this._updateAriaLabelledBy();
  },

  _appendStringWithSpace: function(str, more) {
    if (str) {
      str = str + ' ' + more;
    } else {
      str = more;
    }
    return str;
  },

  _onAddonAttached: function(event) {
    var target = event.path ? event.path[0] : event.target;
    if (target.id) {
      this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, target.id);
    } else {
      var id = 'anypoint-text-add-on-' + Anypoint.TextFieldHelper.NextAddonID++;
      target.id = id;
      this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, id);
    }
  },
  /**
   * Validates the input element and sets an error style if needed.
   *
   * @return {boolean}
   */
  validate: function() {
    return this.inputElement.validate();
  },
  /**
   * Forward focus to inputElement. Overriden from IronControlState.
   */
  _focusBlurHandler: function(event) {
    Polymer.IronControlState._focusBlurHandler.call(this, event);
    // Forward the focus to the nested input.
    if (this.focused && !this._shiftTabPressed) {
      this._focusableElement.focus();
    }
  },
  /**
   * Handler that is called when a shift+tab keypress is detected by the menu.
   *
   * @param {CustomEvent} event A key combination event.
   */
  _onShiftTabDown: function() {
    var oldTabIndex = this.getAttribute('tabindex');
    this._shiftTabPressed = true;
    this.setAttribute('tabindex', '-1');
    this.async(function() {
      this.setAttribute('tabindex', oldTabIndex);
      this._shiftTabPressed = false;
    }, 1);
  },
  /**
   * If `autoValidate` is true, then validates the element.
   */
  _handleAutoValidate: function() {
    if (this.autoValidate) {
      this.validate();
    }
  },
  /**
   * Restores the cursor to its original position after updating the value.
   * @param {string} newValue The value that should be saved.
   */
  updateValueAndPreserveCaret: function(newValue) {
    // Not all elements might have selection, and even if they have the
    // right properties, accessing them might throw an exception (like for
    // <input type=number>)
    try {
      var start = this.inputElement.selectionStart;
      this.value = newValue;
      // The cursor automatically jumps to the end after re-setting the value,
      // so restore it to its original position.
      this.inputElement.selectionStart = start;
      this.inputElement.selectionEnd = start;
    } catch (e) {
      // Just set the value and give up on the caret.
      this.value = newValue;
    }
  },

  _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
    return placeholder || alwaysFloatLabel;
  },

  _updateAriaLabelledBy: function() {
    var label = Polymer.dom(this.root).querySelector('label');
    if (!label) {
      this._ariaLabelledBy = '';
      return;
    }
    var labelledBy;
    if (label.id) {
      labelledBy = label.id;
    } else {
      labelledBy = 'anypoint-text-label-' + Anypoint.TextFieldHelper.NextLabelID++;
      label.id = labelledBy;
    }
    this._ariaLabelledBy = labelledBy;
  },

  _onChange: function(event) {
    // In the Shadow DOM, the `change` event is not leaked into the
    // ancestor tree, so we must do this manually.
    // See https://w3c.github.io/webcomponents/spec/shadow/#events-that-are-not-
    // leaked-into-ancestor-trees.
    if (this.shadowRoot) {
      this.fire(event.type, {
        sourceEvent: event
      }, {
        node: this,
        bubbles: event.bubbles,
        cancelable: event.cancelable
      });
    }
  },

  _autofocusChanged: function() {
    // Firefox doesn't respect the autofocus attribute if it's applied after
    // the page is loaded (Chrome/WebKit do respect it), preventing an
    // autofocus attribute specified in markup from taking effect when the
    // element is upgraded. As a workaround, if the autofocus property is set,
    // and the focus hasn't already been moved elsewhere, we take focus.
    if (this.autofocus && this._focusableElement) {
      // In IE 11, the default document.activeElement can be the page's
      // outermost html element, but there are also cases (under the
      // polyfill?) in which the activeElement is not a real HTMLElement, but
      // just a plain object. We identify the latter case as having no valid
      // activeElement.
      var activeElement = document.activeElement;
      var isActiveElementValid = activeElement instanceof HTMLElement;
      // Has some other element has already taken the focus?
      var isSomeElementActive = isActiveElementValid &&
        activeElement !== document.body &&
        activeElement !== document.documentElement; /* IE 11 */
      if (!isSomeElementActive) {
        // No specific element has taken the focus yet, so we can take it.
        this._focusableElement.focus();
      }
    }
  },

  _validationStatesChanged: function(validationStates) {
    var has = !!validationStates;
    this.hasValidationMessage = has;
  },

  _computeValidityStatus: function(invalid, errorMessage) {
    var has = invalid && !!errorMessage;
    this.hasValidationMessage = has;
  }
};
/** @polymerBehavior */
Anypoint.AnypointTextBehavior = [
  Polymer.IronControlState,
  Polymer.IronA11yKeysBehavior,
  Anypoint.AnypointTextBehaviorImpl
];
</script>