api-console-assets/bower_components/headers-list-view/headers-list-view.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="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../headers-parser-behavior/headers-parser-behavior.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="headers-list-item.html">
<!--
`<headers-list-view>` An element that displays a list of headers.

List items are active and on double click it will send the `query-headers`
event. Hosting app should handle this event to display header details.

Such behavior is supported by the `arc-definitions` element.

Any links in the header value will be converted to anchor and hosting app
can handle click on this link by listening for click event and checking if the
target element contains `auto-link` class name. If the click is not prevented
then it will open the target in new tab.

The `headers` accepts a HTTP headers string or the Headers object.
It will be parsed to array of objects with `name` and `value` keys and
passed to the `_headers` property.

### Example
```
<headers-list-view headers="[[myHeaders]]"></headers-list-view>
```

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

Custom property | Description | Default
----------------|-------------|----------
`--headers-list-view` | Mixin applied to the element | `{}`
`--arc-font-body1` | Mixin applied to the example section in the details dialog. | `{}`
`--arc-font-body2` | Mixin applied to the description section in the details dialog. | `{}`

@group UI Elements
@element headers-list-view
@demo demo/index.html
-->
<dom-module id="headers-list-view">
  <template>
    <style>
    :host {
      display: block;
      @apply(--headers-list-view);
    }

    .dialog-header-example {
      @apply(--arc-font-body1);
      margin-top: 16px;
    }

    .dialog-header-desc {
      @apply(--arc-font-body2);
    }
    </style>

    <template is="dom-repeat" items="[[_headers]]">
      <headers-list-item on-dblclick="_displayHeaderInfo" name="[[item.name]]" value="[[item.value]]"></headers-list-item>
    </template>

    <paper-dialog id="headerInfo">
      <h2>[[_hdTitle]]</h2>
      <paper-dialog-scrollable>
        <section class="dialog-header-desc">[[_hdBody]]</section>
        <section class="dialog-header-example">
          <span>Example:</span>
          <span>[[_hdExample]]</span>
        </section>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button dialog-confirm autofocus>Close</paper-button>
      </div>
    </paper-dialog>
  </template>
  <script>
  Polymer({
    is: 'headers-list-view',

    behaviors: [ArcBehaviors.HeadersParserBehavior],

    properties: {
      /**
       * A HTTP headers to display.
       *
       * @type {String}
       */
      headers: String,
      /**
       * Parsed headers to the array of headers.
       *
       * @type {Array<Object>}
       */
      _headers: Array,
      /**
       * Type of the header.
       * Can be either `request` or `response`.
       * It is required for displaying the help for the headers. The element
       * fires the `query-headers` event on double click which requires this
       * information to be set.
       *
       * @type {String}
       */
      type: {
        type: String,
        value: 'response'
      },
      /**
       * Header title in the details dialog.
       *
       * @type {String}
       */
      _hdTitle: String,
      /**
       * Header description in the details dialog.
       *
       * @type {String}
       */
      _hdBody: String,
      /**
       * Header example in the details dialog.
       *
       * @type {String}
       */
      _hdExample: String,
    },

    observers: [
      '_headersChanged(headers)'
    ],
    // Handler on headers change. Parses headers to an array.
    _headersChanged: function(headers) {
      this._headers = this.headersToJSON(headers);
    },
    /**
     * Double click on header line handler.
     * Will call model for data to display.
     */
    _displayHeaderInfo: function(e) {
      var item = e.model.get('item');
      var header = item.name.toLowerCase();
      var event = this.fire('query-headers', {
        'type': this.type,
        'query': header
      });
      var headers = event.detail.headers;
      if (headers && headers.length) {
        var result = headers[0];
        this._hdTitle = result.key;
        this._hdBody = result.desc;
        this._hdExample = result.example;
        this.$.headerInfo.open();
      }
      this.fire('send-analytics', {
        type: 'event',
        category: 'Headers list',
        action: 'Display header info',
        label: header
      });
    },
  });
  </script>
</dom-module>