vaadin-text-field-mixin.html

<!--
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->

<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
<link rel="import" href="../../vaadin-control-state-mixin/vaadin-control-state-mixin.html">

<dom-module id="vaadin-text-field-shared-styles">
  <template>
    <style>
      :host {
        display: inline-flex;
        outline: none;
      }

      :host::before {
        content: "\2003";
        width: 0;
        display: inline-block;
        /* Size and position this element on the same vertical position as the input-field element
           to make vertical align for the host element work as expected */
      }

      :host([hidden]) {
        display: none !important;
      }

      .vaadin-text-field-container,
      .vaadin-text-area-container {
        display: flex;
        flex-direction: column;
        min-width: 100%;
        max-width: 100%;
        width: var(--vaadin-text-field-default-width, 12em);
      }

      [part="label"]:empty {
        display: none;
      }

      [part="input-field"] {
        display: flex;
        align-items: center;
        flex: auto;
      }

      /* Reset the native input styles */
      [part="value"],
      [part="input-field"] ::slotted(input),
      [part="input-field"] ::slotted(textarea) {
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        min-width: 0;
        font: inherit;
        font-size: 1em;
        line-height: normal;
        color: inherit;
        background-color: transparent;
        /* Disable default invalid style in Firefox */
        box-shadow: none;
      }

      [part="input-field"] ::slotted(*) {
        flex: none;
      }

      [part="value"],
      [part="input-field"] ::slotted(input),
      [part="input-field"] ::slotted(textarea),
      /* Slotted by vaadin-select-text-field */
      [part="input-field"] ::slotted([part="value"]) {
        flex: auto;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        height: 100%;
      }

      [part="input-field"] ::slotted(textarea) {
        resize: none;
      }

      [part="value"]::-ms-clear,
      [part="input-field"] ::slotted(input)::-ms-clear {
        display: none;
      }

      [part="clear-button"] {
        cursor: default;
      }

      [part="clear-button"]::before {
        content: "✕";
      }
    </style>
  </template>
</dom-module>

<script>
  /**
   * @namespace Vaadin
   */
  window.Vaadin = window.Vaadin || {};

  const HOST_PROPS = {
    default: ['list', 'autofocus', 'pattern', 'autocapitalize', 'autocorrect', 'maxlength',
      'minlength', 'name', 'placeholder', 'autocomplete', 'title'],
    accessible: ['disabled', 'readonly', 'required', 'invalid']
  };

  const PROP_TYPE = {
    DEFAULT: 'default',
    ACCESSIBLE: 'accessible'
  };


  /**
   * @polymerMixin
   * @memberof Vaadin
   * @mixes Vaadin.ControlStateMixin
   */
  Vaadin.TextFieldMixin = subclass => class VaadinTextFieldMixin extends Vaadin.ControlStateMixin(subclass) {
    static get properties() {
      return {
        /**
         * Whether the value of the control can be automatically completed by the browser.
         * List of available options at:
         * https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete
         */
        autocomplete: {
          type: String
        },

        /**
         * This is a property supported by Safari that is used to control whether
         * autocorrection should be enabled when the user is entering/editing the text.
         * Possible values are:
         * on: Enable autocorrection.
         * off: Disable autocorrection.
         */
        autocorrect: {
          type: String
        },

        /**
         * This is a property supported by Safari and Chrome that is used to control whether
         * autocapitalization should be enabled when the user is entering/editing the text.
         * Possible values are:
         * characters: Characters capitalization.
         * words: Words capitalization.
         * sentences: Sentences capitalization.
         * none: No capitalization.
         */
        autocapitalize: {
          type: String
        },

        /**
         * Set to true to display the clear icon which clears the input.
         */
        clearButtonVisible: {
          type: Boolean,
          value: false
        },

        /**
         * Error to show when the input value is invalid.
         */
        errorMessage: {
          type: String,
          value: ''
        },

        /**
         * String used for the label element.
         */
        label: {
          type: String,
          value: '',
          observer: '_labelChanged'
        },

        /**
         * Maximum number of characters (in Unicode code points) that the user can enter.
         */
        maxlength: {
          type: Number
        },

        /**
         * Minimum number of characters (in Unicode code points) that the user can enter.
         */
        minlength: {
          type: Number
        },

        /**
         * The name of the control, which is submitted with the form data.
         */
        name: {
          type: String
        },

        /**
         * A hint to the user of what can be entered in the control.
         */
        placeholder: {
          type: String
        },

        /**
         * This attribute indicates that the user cannot modify the value of the control.
         */
        readonly: {
          type: Boolean,
          reflectToAttribute: true
        },

        /**
         * Specifies that the user must fill in a value.
         */
        required: {
          type: Boolean,
          reflectToAttribute: true
        },


        /**
         * The initial value of the control.
         * It can be used for two-way data binding.
         */
        value: {
          type: String,
          value: '',
          observer: '_valueChanged',
          notify: true
        },

        /**
         * This property is set to true when the control value is invalid.
         */
        invalid: {
          type: Boolean,
          reflectToAttribute: true,
          notify: true,
          value: false
        },

        /**
         * Specifies that the text field has value.
         */
        hasValue: {
          type: Boolean,
          reflectToAttribute: true
        },

        /**
         * When set to true, user is prevented from typing a value that
         * conflicts with the given `pattern`.
         */
        preventInvalidInput: {
          type: Boolean
        },

        _labelId: {
          type: String
        },

        _errorId: {
          type: String
        }
      };
    }

    static get observers() {
      return ['_stateChanged(disabled, readonly, clearButtonVisible, hasValue)',
        '_hostPropsChanged(' + HOST_PROPS.default.join(', ') + ')',
        '_hostAccessiblePropsChanged(' + HOST_PROPS.accessible.join(', ') + ')',
        '_getActiveErrorId(invalid, errorMessage, _errorId)',
        '_getActiveLabelId(label, _labelId)'];
    }

    get focusElement() {
      if (!this.shadowRoot) {
        return;
      }
      const slotted = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);
      if (slotted) {
        return slotted;
      }
      return this.shadowRoot.querySelector('[part="value"]');
    }

    get _slottedTagName() {
      return 'input';
    }

    _onInput(e) {
      if (this.preventInvalidInput) {
        const input = this.focusElement;
        if (input.value.length > 0 && !this.checkValidity()) {
          input.value = this.value || '';
          return;
        }
      }
      this.__userInput = true;
      this.value = e.target.value;
    }

    // NOTE(yuriy): Workaround needed for IE11 and Edge for proper displaying
    // of the clear button instead of setting display property for it depending on state.
    _stateChanged(disabled, readonly, clearButtonVisible, hasValue) {
      if (!disabled &&
          !readonly &&
          clearButtonVisible &&
          hasValue
      ) {
        this.$.clearButton.removeAttribute('hidden');
      } else {
        this.$.clearButton.setAttribute('hidden', true);
      }
    }

    _onChange(e) {
      if (this._valueClearing) {
        return;
      }

      // In the Shadow DOM, the `change` event is not leaked into the
      // ancestor tree, so we must do this manually.
      const changeEvent = new CustomEvent('change', {
        detail: {
          sourceEvent: e
        },
        bubbles: e.bubbles,
        cancelable: e.cancelable,
      });
      this.dispatchEvent(changeEvent);
    }

    _valueChanged(newVal, oldVal) {
      // setting initial value to empty string, skip validation
      if (newVal === '' && oldVal === undefined) {
        return;
      }

      if (newVal !== '' && newVal != null) {
        this.hasValue = true;
      } else {
        this.hasValue = false;
      }

      if (this.__userInput) {
        this.__userInput = false;
        return;
      } else if (newVal !== undefined) {
        this.focusElement.value = newVal;
      } else {
        this.value = '';
      }

      if (this.invalid) {
        this.validate();
      }
    }

    _labelChanged(label) {
      if (label !== '' && label != null) {
        this.setAttribute('has-label', '');
      } else {
        this.removeAttribute('has-label');
      }
    }

    _onSlotChange() {
      const slotted = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);

      if (this.value) {
        this.focusElement.value = this.value;
        this.validate();
      }

      if (slotted && !this._slottedInput) {
        this._validateSlottedValue(slotted);
        this._addInputListeners(slotted);
        this._addIEListeners(slotted);
        this._slottedInput = slotted;
      } else if (!this._slottedInput) {
        this._removeInputListeners(this._slottedInput);
        this._removeIEListeners(this._slottedInput);
        this._slottedInput = undefined;
      }

      Object.keys(PROP_TYPE).map(key => PROP_TYPE[key]).forEach(type =>
        this._propagateHostAttributes(HOST_PROPS[type].map(attr => this[attr]), type));
    }

    _hostPropsChanged(...attributesValues) {
      this._propagateHostAttributes(attributesValues, PROP_TYPE.DEFAULT);
    }

    _hostAccessiblePropsChanged(...attributesValues) {
      this._propagateHostAttributes(attributesValues, PROP_TYPE.ACCESSIBLE);
    }

    _validateSlottedValue(slotted) {
      if (slotted.value !== this.value) {
        console.warn('Please define value on the vaadin-text-field component!');
        slotted.value = '';
      }
    }

    _propagateHostAttributes(attributesValues, type) {
      const input = this.focusElement;
      const attributeNames = HOST_PROPS[type];

      if (type === 'accessible') {
        attributeNames.forEach((attr, index) => {
          this._setOrToggleAttribute(attr, attributesValues[index], input);
          this._setOrToggleAttribute(`aria-${attr}`, attributesValues[index], input);
        });
      } else {
        attributeNames.forEach((attr, index) => {
          this._setOrToggleAttribute(attr, attributesValues[index], input);
        });
      }
    }

    _setOrToggleAttribute(name, value, node) {
      if (!name || !node) {
        return;
      }

      if (node.hasAttribute(name) === !value) {
        if (value) {
          node.setAttribute(name, (typeof value === 'boolean') ? '' : value);
        } else {
          node.removeAttribute(name);
        }
      }
    }

    /**
     * Returns true if the current input value satisfies all constraints (if any)
     * @returns {boolean}
     */
    checkValidity() {
      if (this.required || this.pattern || this.maxlength || this.minlength) {
        return this.focusElement.checkValidity();
      } else {
        return !this.invalid;
      }
    }

    _addInputListeners(node) {
      node.addEventListener('input', this._boundOnInput);
      node.addEventListener('change', this._boundOnChange);
      node.addEventListener('blur', this._boundOnBlur);
    }

    _removeInputListeners(node) {
      node.removeEventListener('input', this._boundOnInput);
      node.removeEventListener('change', this._boundOnChange);
      node.removeEventListener('blur', this._boundOnBlur);
    }

    ready() {
      super.ready();

      this._boundOnInput = this._onInput.bind(this);
      this._boundOnChange = this._onChange.bind(this);
      this._boundOnBlur = this.validate.bind(this);

      const defaultInput = this.shadowRoot.querySelector('[part="value"]');
      this._slottedInput = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);
      this._addInputListeners(defaultInput);
      this._addIEListeners(defaultInput);
      if (this._slottedInput) {
        this._addIEListeners(this._slottedInput);
        this._addInputListeners(this._slottedInput);
      }

      this.shadowRoot.querySelector('[name="input"], [name="textarea"]')
        .addEventListener('slotchange', this._onSlotChange.bind(this));

      if (!(window.ShadyCSS && window.ShadyCSS.nativeCss)) {
        this.updateStyles();
      }

      this.$.clearButton.addEventListener('mousedown', () => this._valueClearing = true);
      this.$.clearButton.addEventListener('click', this._onClearButtonClick.bind(this));
      this.addEventListener('keydown', this._onKeyDown.bind(this));

      var uniqueId = Vaadin.TextFieldMixin._uniqueId = 1 + Vaadin.TextFieldMixin._uniqueId || 0;
      this._errorId = `${this.constructor.is}-error-${uniqueId}`;
      this._labelId = `${this.constructor.is}-label-${uniqueId}`;
    }

    /**
     * Returns true if `value` is valid.
     * `<iron-form>` uses this to check the validity or all its elements.
     *
     * @return {boolean} True if the value is valid.
     */
    validate() {
      return !(this.invalid = !this.checkValidity());
    }

    clear() {
      this.value = '';
    }

    _onClearButtonClick(e) {
      // NOTE(yuriy): This line won't affect focus on the host. Cannot be properly tested.
      this.focusElement.focus();
      this.clear();
      this._valueClearing = false;
      this.focusElement.dispatchEvent(new Event('change', {bubbles: !this._slottedInput}));
    }

    _onKeyDown(e) {
      if (e.keyCode === 27 && this.clearButtonVisible) {
        this.clear();
      }
    }

    _addIEListeners(node) {
      /* istanbul ignore if */
      if (navigator.userAgent.match(/Trident/)) {
        // IE11 dispatches `input` event in following cases:
        // - focus or blur, when placeholder attribute is set
        // - placeholder attribute value changed
        // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101220/
        this._prevent = e => {
          e.stopImmediatePropagation();
          this.focusElement.removeEventListener('input', this._prevent);
        };
        this._shouldPreventInput = () => this.placeholder && node.addEventListener('input', this._prevent);
        node.addEventListener('focusin', this._shouldPreventInput);
        node.addEventListener('focusout', this._shouldPreventInput);
        this._createPropertyObserver('placeholder', this._shouldPreventInput);
      }
    }

    _removeIEListeners(node) {
      /* istanbul ignore if */
      if (navigator.userAgent.match(/Trident/)) {
        node.removeEventListener('focusin', this._shouldPreventInput);
        node.removeEventListener('focusout', this._shouldPreventInput);
      }
    }

    _getActiveErrorId(invalid, errorMessage, errorId) {
      this._setOrToggleAttribute('aria-describedby',
        (errorMessage && invalid ? errorId : undefined),
        this.focusElement);
    }

    _getActiveLabelId(label, labelId) {
      this._setOrToggleAttribute('aria-labelledby',
        (label ? labelId : undefined),
        this.focusElement);
    }

    _getErrorMessageAriaHidden(invalid, errorMessage, errorId) {
      return (!(errorMessage && invalid ? errorId : undefined)).toString();
    }

    /**
     * @protected
     */
    attributeChangedCallback(prop, oldVal, newVal) {
      super.attributeChangedCallback(prop, oldVal, newVal);
      // Needed until Edge has CSS Custom Properties (present in Edge Preview)
      /* istanbul ignore if */
      if (!(window.ShadyCSS && window.ShadyCSS.nativeCss) &&
        /^(focused|focus-ring|invalid|disabled|placeholder|has-value)$/.test(prop)) {
        this.updateStyles();
      }

      // Safari has an issue with repainting shadow root element styles when a host attribute changes.
      // Need this workaround (toggle any inline css property on and off) until the issue gets fixed.
      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
      /* istanbul ignore if */
      if (isSafari && this.root) {
        const WEBKIT_PROPERTY = '-webkit-backface-visibility';
        this.root.querySelectorAll('*').forEach(el => {
          el.style[WEBKIT_PROPERTY] = 'visible';
          el.style[WEBKIT_PROPERTY] = '';
        });
      }
    }

    /**
     * Fired when the user commits a value change.
     *
     * @event change
     */
  };
</script>