api-console-assets/bower_components/raml-request-parameters-editor/raml-request-parameters-editor.html

This repo only exists to publish api console components to npm

<!--
@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="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="raml-request-parameters-form.html">
<!--
`<raml-request-parameters-editor>`

An element that renders query/uri parameters forms based on RAML data.

The element is to be used with combination with `raml-request-parameteres-model`
element that produces data model used internally by this view.

The same data model is used by the `raml-request-url-editor` so it can be shared
to reduce number of comutations.

The element is a form element and it validates user input. If the model items
are marked as required then the fields are automatically validated.

The element fires `uri-parameter-changed` and `query-parameter-changed`
custom event to notify about change in the parameters list.
The events are also fired when model change to notify about default values loaded
into the model. Because of that event notifying about a change to a parameter
with the same value can be fired more than once.

Unlike previous version of the element, it doesn't produce the final URL.

### Example for Polymer powered application

```html
<raml-request-parameters-editor
  query-model="[[qm]]"
  uri-model="[[um]]"
  has-query-parameters="[[hqp]]"
  has-uri-parameters="[[hup]]"
  has-parameters="[[hp]]"></raml-request-parameters-editor>

<raml-request-parameteres-model
  query-parameters="[[raml.queryParameters]]"
  uri-parameters="[[raml.allUriParameters]]"
  query-model="{{qm}}"
  uri-model="{{um}}"
  has-query-parameters="{{hqp}}"
  has-uri-parameters="{{hup}}"
  has-parameters="{{hp}}"></raml-request-parameteres-model>
```

### Example for vanilla JavaScript

```html
<raml-request-parameters-editor id="editor"></raml-request-parameters-editor>
<raml-request-parameteres-model id="model"></raml-request-parameteres-model>

<script>
var model = document.getElementById('model');
var view = document.getElementById('editor');

function passDataToView(e) {
  var type = e.type;
  type = type.replace('-changed', '');
  var property = type.replace(/-[a-z]/g, function(m) {
    return m[1].toUpperCase();
  });
  view[property] = e.detail.value;
}

model.addEventListener('query-model-changed', passDataToView);
model.addEventListener('uri-model-changed', passDataToView);
model.addEventListener('has-query-parameters-changed', passDataToView);
model.addEventListener('has-uri-parameters-changed', passDataToView);
model.addEventListener('has-parameters-changed', passDataToView);

var raml = await getRamlSomehow();
model.queryParameters = raml.queryParameters;
model.uriParameters = raml.allUriParameters;
</script>
```

Note: the `allUriParameters` property used in the example is not a standard
RAML JS parser property. It should be computed value of all URI parameters
from traits and security schemes.

### Validation

This element implements `Polymer.IronValidatableBehavior`. You can call `validate()`
function to check if the form is valid.
An attribute `invalid` will be set if the form is invalid. It can be used for
styling.

URI parameters are always required since they are part of the main URL.
Query parameters validation criteria are set according to the RAML spec.

### Styling
`<raml-request-parameters-editor>` provides the following custom properties and mixins for styling:

Custom property | Description | Default
----------------|-------------|----------
`--raml-request-parameters-editor` | Mixin applied to the element | `{}`
`--raml-request-parameters-editor-subheader` | Mixin applied to section's subheader | `--paper-font-subhead`
`--raml-request-parameters-editor-input-label-color` | Color of the paper input's labels | `rgba(0, 0, 0, 0.48)`
`--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 row of the form | `{}`
`--raml-request-parameters-editor-no-params` | Mixin applied to the empty info section | `{}`
`--raml-request-parameters-editor-no-params-message` | Mixin applied to the empty info paragraph (the message) | `{}`

Also, use variables and misins defined for `paper-input` to style inputs, and
`paper-dropdown-menu`, `paper-listbox`, `paper-item` to style dropdown menus.

@group RAML Elements
@element raml-request-parameters-editor
@demo demo/index.html
-->
<dom-module id="raml-request-parameters-editor">
  <template strip-whitespace>
    <style>
     :host {
      display: block;
      @apply --raml-request-parameters-editor;
    }

    h3 {
      @apply --raml-request-parameters-editor-subheader;
    }

    .params-title {
      @apply --layout-horizontal;
      @apply --layout-center;
    }

    .params-title h3 {
      display: inline-block;
      margin-right: 12px;
    }

    .params-title paper-checkbox {
      --paper-checkbox-label-color: rgba(0, 0, 0, 0.54);
    }

    .empty-message {
      @apply --raml-request-parameters-editor-no-params;
    }

    .empty-message p {
      @apply --raml-request-parameters-editor-no-params-message;
    }
    </style>
    <section hidden$="[[hasParameters]]" class="empty-message">
      <p>This endpoint doesn't require to declare query or URI parameters.</p>
    </section>
    <template is="dom-if" if="[[hasUriParameters]]">
      <section>
        <h3>URI parameters</h3>
        <raml-request-parameters-form id="uriParametersForm" form-type="uri" model="{{uriModel}}" optional-opened></raml-request-parameters-form>
      </section>
    </template>
    <template is="dom-if" if="[[hasQueryParameters]]">
      <section>
        <div class="params-title">
          <h3>Query parameters</h3>
          <template is="dom-if" if="[[hasOptional]]">
            <paper-checkbox hidden$="[[!hasOptional]]" checked="{{optionalOpened}}">Show optional parameters</paper-checkbox>
          </template>
        </div>
        <raml-request-parameters-form id="queryParametersForm" form-type="query" optional-opened="[[optionalOpened]]" model="{{queryModel}}"></raml-request-parameters-form>
      </section>
    </template>
  </template>
  <script>
  (function() {
    Polymer({
      is: 'raml-request-parameters-editor',

      behaviors: [Polymer.IronValidatableBehavior],

      properties: {
        /**
         * Computed query properties model.
         * Use `raml-request-parameteres-model` to compute model for the view.
         */
        queryModel: Array,
        /**
         * Computed value if the `queryParameters` are set.
         * Use `raml-request-parameteres-model` to compute this value.
         */
        hasQueryParameters: Boolean,
        /**
         * Computed URI properties model.
         * Use `raml-request-parameteres-model` to compute model for the view.
         */
        uriModel: Array,
        /**
         * Computed value if the `uriParameters` are set.
         * Use `raml-request-parameteres-model` to compute this value.
         */
        hasUriParameters: Boolean,
        /**
         * Computed value if `uriParameters` or `queryParameters` are set.
         * Use `raml-request-parameteres-model` to compute this value.
         */
        hasParameters: Boolean,
        /**
         * Computed value. True if current query parameters set has any
         * optional value.
         */
        hasOptional: {
          type: Boolean,
          computed: '_computeHasOptionalParameters(queryModel.*)',
          notify: true
        },
        // If true the optional query parameters will be displayed in the table.
        optionalOpened: Boolean
      },
      // Overidden from Polymer.IronValidatableBehavior. Will set the `invalid`
      // attribute automatically, which should be used for styling.
      _getValidity: function() {
        var validUri = true;
        var validUrl = true;
        if (this.hasUriParameters) {
          validUri = this.$$('#uriParametersForm').validate();
        }
        if (this.hasQueryParameters) {
          validUrl = this.$$('#queryParametersForm').validate();
        }
        return validUri && validUrl;
      },
      /**
       * Computes if any of the query parameters are required.
       */
      _computeHasOptionalParameters: function(record) {
        if (!record || !record.base || !record.base.length) {
          return false;
        }
        var list = record.base;
        for (var i = 0, len = list.length; i < len; i++) {
          if (!list[i].required) {
            return true;
          }
        }
        return false;
      }

      /**
       * Fired when an URI parameter value change in this editor.
       *
       * @event uri-parameter-changed
       * @param {String} name The name of the parameter
       * @param {String} value The value of the parameter
       */
      /**
       * Fired when a query parameter value change in this editor.
       *
       * @event query-parameter-changed
       * @param {String} name The name of the parameter
       * @param {String} value The value of the parameter
       */
    });
  })();
  </script>
</dom-module>