chat-input.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-input/paper-textarea.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<!--
CSS custom property | Description | Default
------------------- | ----------- | -------
`--chat-input-input` | Applied to the internal input field | {}
`--chat-input-button` | Appied to the paper-icon-button | {}
-->
<dom-module id="chat-input">
  <template>
    <style>
      :host {
        display: block;
        @apply --layout-horizontal;
        @apply --layout-center;
      }
      paper-input, paper-textarea {
        @apply --layout-flex;
        @apply --chat-input-input;
      }
      paper-icon-button {
        color: var(--primary-color);
        @apply --chat-input-button;
      }
    </style>
    <paper-input
      no-label-float
      hidden$="[[!singleLine]]"
      value="{{text}}"
      on-keydown="_checkForEnter">
    </paper-input>
    <paper-textarea
      no-label-float
      hidden$="[[singleLine]]"
      value="{{text}}"
      on-keydown="_checkForEnter">
    </paper-textarea>
    <paper-icon-button noink icon="[[_getIcon(icon)]]" src="[[_getSrc(icon)]]" on-tap="_fireSendEvent"></paper-icon-button>
  </template>

  <script>
    /**
     * `chat-input`
     * Single or multi-line input field for `chat-window`
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    Polymer({

      is: 'chat-input',

      properties: {
        /**
         * Whether to allow single line messages only. Internally a paper-input
         * will be used instead of a paper-textarea.
         */
        singleLine: {
          type: Boolean,
          value: false
        },

        /**
         * The text inside the input field.
         */
        text: {
          type: String,
          notify: true
        },

        /**
         * The paper-icon-button's `icon` or a URL to use as the paper-icon-button's `src`.
         */
         icon: {
           type: String,
           value: 'send'
         },

         /**
          * Whether to send the message when a user presses `enter` on the keyboard.
          * The default behavior is to send-on-enter when in single-line input mode,
          * and not send if in multiline input mode.
          */
         sendOnEnter: Boolean
      },

      _fireSendEvent: function(e) {
        // console.log('firing send event...', this.text);
        this.fire('send', this.text);
      },

      _getIcon: function(icon) {
        return this._iconIsUrl(icon) ? '' : icon;
      },

      _getSrc: function(icon) {
        return this._iconIsUrl(icon) ? icon : '';
      },

      _iconIsUrl: function(icon) {
        return icon && (icon.includes('/') || icon.includes('.'));
      },

      _checkForEnter: function (e) {
        if (e.keyCode === 13 &&
            (this.sendOnEnter || (this.sendOnEnter === undefined && this.singleLine))) {
          this._fireSendEvent();
        }
      }

      /**
       * Triggered when a user taps the send button. The text may be empty.
       * @event send
       * @param {text} string The message to be sent.
       */
    });
  </script>
</dom-module>