raml-headers-form-item.html

<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-autocomplete/paper-autocomplete.html">
<link rel="import" href="../arc-icons/arc-icons.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../markdown-styles/markdown-styles.html">
<link rel="import" href="../raml-type-form-input/raml-type-form-input.html">
<!--
An element that renders form controls for the editor.

### Styling
`<raml-headers-form>` provides the following custom properties and mixins for styling:

Custom property | Description | Default
----------------|-------------|----------
`--raml-headers-form-item` | Mixin applied to the element | `{}`
`--raml-headers-form-input-label-color` | Color of the label of the `paper-input` element. | `--raml-request-parameters-editor-input-label-color` or `rgba(0, 0, 0, 0.54)`
`--raml-headers-form-input-label-color-required` | Color of the label of the `paper-input` element when it's required. | `--raml-request-parameters-editor-required-input-label-color` or `rgba(0, 0, 0, 0.72)`
`--from-row-action-icon-color` | Color of the icon button to display help | `--icon-button-color` or `rgba(0, 0, 0, 0.74)`
`--from-row-action-icon-color-hover` | Color of the icon button to display help when hovered | `--accent-color` or `rgba(0, 0, 0, 0.74)`
`--inline-documentation-color` | Color of the documentation string below the input field. Note that it will appy also `marked-element` styles to this element | `rgba(0, 0, 0, 0.87)`
`--raml-request-parameters-editor-row` | Mixin applied to each form row | `{}`
`--raml-request-parameters-editor-row-narrow` | In narrow layouts | `{}`
`--raml-headers-form-name-input` | Mixin applied to the name input field | `{}`
`--raml-headers-form-name-input-narrow` | Mixin applied to the name input field in narrow layout | `{}`

@group RAML Elements
@element raml-headers-form-item
@demo demo/index.html
-->
<dom-module id="raml-headers-form-item">
  <template strip-whitespace>
    <style include="markdown-styles"></style>
    <style>
    :host {
      display: block;
      @apply --raml-headers-form-item;

      --paper-input-container-label: {
        color: var(--raml-headers-form-input-label-color, var(--raml-request-parameters-editor-input-label-color, rgba(0, 0, 0, 0.54)));
      }

      input::-webkit-input-placeholder {
        color: var(--paper-input-container-color, --secondary-text-color);
      }
    }

    :host([required]) paper-input {
      --paper-input-container-label: {
        color: var(--raml-headers-form-input-label-color-required, var(--raml-request-parameters-editor-required-input-label-color, rgba(0, 0, 0, 0.72)));
      }
    }

    .form-row {
      @apply --layout-horizontal;
      @apply --layout-center;

      @apply --raml-request-parameters-editor-row;
    }

    .markdown-html p:first-child {
      margin-top: 0;
      padding-top: 0;
    }

    .markdown-html p:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .docs {
      @apply --arc-font-common-base;
      font-size: 13px !important;
      font-weight: 200;
      line-height: 24px;
      color: var(--inline-documentation-color, rgba(0, 0, 0, 0.87));
    }

    .help-icon {
      margin-top: 16px;
      color: var(--from-row-action-icon-color, var(--icon-button-color, rgba(0, 0, 0, 0.74)));
      transition: color 0.2s linear;
    }

    .help-icon:hover {
      color: var(--from-row-action-icon-color-hover, var(--accent-color, rgba(0, 0, 0, 0.74)));
    }

    .name-field {
      position: relative;
    }

    .name-field,
    .value-field {
      @apply --layout-flex;
      @apply --layout-horizontal;
      @apply --layout-start;
    }

    .param-name,
    raml-type-form-input {
      @apply --layout-flex;
    }

    .param-name {
      margin-right: 12px;
      @apply --raml-headers-form-name-input;
    }

    .narrow.form-row {
      display: block;
      @apply --raml-request-parameters-editor-row-narrow;
    }

    .narrow .param-name {
      margin-right: 0;
      @apply --raml-headers-form-name-input-narrow;
    }

    [hidden] {
      display: none !important;
    }

    :host([is-array]) .value-field {
      @apply --layout-start;
      @apply --raml-headers-form-array-parameter;
    }
    </style>
    <template is="dom-if" if="[[!isCustom]]">
      <div class="value-field">
        <raml-type-form-input model="[[model]]" name="[[name]]" value="{{value}}" data-type="typed"></raml-type-form-input>
        <template is="dom-if" if="[[model.hasDescription]]">
          <span>
            <paper-icon-button class="help-icon" suffix icon="arc:help" hidden$="[[!model.hasDescription]]" on-tap="toggleDocumentation"></paper-icon-button>
            <paper-tooltip position="left" offset="1" margin-top="1" animation-delay="300">Display documentation</paper-tooltip>
          </span>
        </template>
      </div>
    </template>
    <template is="dom-if" if="[[isCustom]]">
      <div class$="form-row [[_computeNarrowClass(narrow)]]">
        <div class="name-field">
          <paper-input
            value="{{name}}"
            label="Header name"
            class="param-name"
            on-focus="_headerNameFocus"
            type="text"
            pattern="\S*"
            error="Header name is not valid"
            required></paper-input>
          <paper-autocomplete open-on-focus on-query="_queryHeaderName" on-selected="_onHeaderNameSelected"></paper-autocomplete>
        </div>
        <div class="value-field">
          <raml-type-form-input model="[[model]]" name="[[name]]" value="{{value}}" data-type="custom"></raml-type-form-input>
          <template is="dom-if" if="[[model.hasDescription]]">
            <span>
              <paper-icon-button class="help-icon" suffix icon="arc:help" hidden$="[[!model.hasDescription]]" on-tap="toggleDocumentation"></paper-icon-button>
              <paper-tooltip position="left" offset="1" margin-top="1" animation-delay="300">Display documentation</paper-tooltip>
            </span>
          </template>
        </div>
      </div>
    </template>
    <template is="dom-if" if="[[model.hasDescription]]" restamp>
      <div class="docs">
        <iron-collapse opened="[[docsOpened]]">
          <marked-element markdown="[[model.description]]">
            <div class="markdown-html markdown-body"></div>
          </marked-element>
        </iron-collapse>
      </div>
    </template>
  </template>
  <script>
  Polymer({
    is: 'raml-headers-form-item',

    behaviors: [
      Polymer.IronFormElementBehavior,
      Polymer.IronValidatableBehavior
    ],

    properties: {
      /**
       * The name of this element.
       */
      name: {
        notify: true,
        type: String
      },
      /**
       * A model item
       */
      model: Object,
      /**
       * If set it renders a narrow layout
       */
      narrow: {
        type: Boolean,
        value: false
      },
      /**
       * True to render documentation (if set in model)
       */
      docsOpened: Boolean,
      /**
       * Set if the header is not specified in the RAML type (is a custom
       * header).
       */
      isCustom: {
        type: Boolean,
        value: false
      },
      /**
       * If set it is render the item control as an array item (adds more
       * spacing to the element)
       */
      isArray: {
        type: Boolean,
        reflectToAttribute: true
      }
    },

    // Toggles documentation (if available)
    toggleDocumentation: function() {
      this.docsOpened = !this.docsOpened;
    },

    // Handler for header name field focus
    _headerNameFocus: function(e) {
      var autocomplete = this.$$('paper-autocomplete');
      if (autocomplete.target) {
        return;
      }
      autocomplete.target = e.target;
    },

    /**
     * A handler called when the user selects a suggestion.
     * @param {[type]} e [description]
     * @return {[type]}
     */
    _onHeaderNameSelected: function(e) {
      this.set('name', e.detail.value);
    },

    /**
     * Handler for autocomplete element. Query the datastore for suggestions.
     *
     * @param {Event} e Autocomplete event
     */
    _queryHeaderName: function(e) {
      var suggestions = this._queryHeaderNameSuggestions(e.detail.value);
      var autocomplete = this.$$('paper-autocomplete');
      if (!suggestions || !suggestions.length) {
        autocomplete.source = [];
        return;
      }
      autocomplete.source = suggestions.map(function(item) {
        return {
          value: item.key,
          display: item.key
        };
      });
    },

    _queryHeaderNameSuggestions: function(q) {
      var event = this.fire('query-headers', {
        type: 'request',
        query: q
      }, {
        cancelable: true
      });
      return event.detail.headers;
    },

    // Computes css class name for narrow layout
    _computeNarrowClass: function(narrow) {
      return narrow ? 'narrow' : undefined;
    },

    _getValidity: function() {
      var selector = 'raml-type-form-input[data-type="';
      selector += this.isCustom ? 'custom' : 'typed';
      selector += '"]';
      var input = this.$$(selector);
      return input.validate();
    }
  });
  </script>
</dom-module>