api-console-assets/bower_components/multipart-payload-editor/multipart-text-form-item.html

This repo only exists to publish api console components to npm

<!--
@license
Copyright 2017 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-input/paper-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-autocomplete/paper-autocomplete.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../arc-icons/arc-icons.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="../raml-type-form-input/raml-type-form-input.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../markdown-styles/markdown-styles.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="multipart-form-item-behavior.html">
<!--
A text form item.

If the browser has native support for FormData (and iterators) then it will also render
a content type selector for the input field.
-->
<dom-module id="multipart-text-form-item">
  <template>
    <style include="markdown-styles"></style>
    <style>
    :host {
      display: block;
      @apply --layout-flex;
    }

    .multipart-item {
      @apply --layout-vertical;
      @apply --layout-flex;
    }

    .mime-selector {
      position: relative;
    }

    .value-selector {
      @apply --layout-horizontal;
      @apply --layout-center;
    }

    raml-type-form-input {
      @apply --layout-flex;
      margin-left: 12px;
    }

    .mime-selector paper-input {
      max-width: 360px;
    }

    .name-field {
      max-width: 360px;
      @apply --layout-flex;
    }

    .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 {
      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)));
    }

    paper-autocomplete {
      top: 34px;
    }
    </style>
    <div class="multipart-item">
      <template is="dom-if" if="[[hasFormData]]">
        <div class="mime-selector">
          <paper-input label="Content type (Optional)" value="{{type}}" no-label-float></paper-input>
          <paper-autocomplete target="[[_mimeInput]]" source="[[suggestions]]" open-on-focus></paper-autocomplete>
        </div>
      </template>
      <div class="value-selector">
        <paper-input class="name-field" label="Field name" error-message="The name is required" required auto-validate value="{{name}}" no-label-float></paper-input>
        <raml-type-form-input model="[[model]]" name="[[name]]" value="{{value}}" no-label-float></raml-type-form-input>
        <template is="dom-if" if="[[model.hasDescription]]">
          <span>
            <paper-icon-button class="help-icon" suffix icon="arc:help-outline" 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 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: 'multipart-text-form-item',

    behaviors: [ArcBehaviors.MultipartFormItemBehavior],

    properties: {
      /**
       * Reference to the mime type input
       */
      _mimeInput: {
        type: HTMLElement
      },
      // A content type of the form field to be presented in the Multipart request.
      type: {
        type: String,
        notify: true
      },
      // List of suggested mime types
      suggestions: {
        type: Array,
        value: function() {
          return [
            'multipart-form-data',
            'application/x-www-form-urlencoded',
            'application/json',
            'application/xml',
            'application/base64',
            'application/octet-stream',
            'text/plain',
            'text/css',
            'text/html',
            'application/javascript'
          ];
        }
      },
      // If set it will also renders mime type selector for the input data.
      hasFormData: Boolean
    },

    observers: [
      '_hasFormDataChanged(hasFormData)'
    ],

    ready: function() {
      if (this.hasFormData) {
        this._setAutocompleteTarget();
      }
    },

    _getValidity: function() {
      return !!(this.name && this.value);
    },

    _hasFormDataChanged: function(hasFormData) {
      if (hasFormData) {
        this._setAutocompleteTarget();
      } else {
        this.set('_mimeInput', undefined);
      }
    },

    _setAutocompleteTarget: function() {
      Polymer.RenderStatus.afterNextRender(this, function() {
        this.set('_mimeInput', this.$$('.mime-selector paper-input'));
      });
    }
  });
  </script>
</dom-module>