api-console-assets/bower_components/response-raw-viewer/response-raw-viewer.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="../text-search-behavior/text-search-behavior.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../payload-parser-behavior/payload-parser-behavior.html">

<!--
An element to display the raw response data without syntax highlighting.


### Example
```
<response-raw-viewer response-text="Some response"></response-raw-viewer>
```
```
var display = document.querySelector('response-raw-viewer');
display.responseText = someResponse;
```

## Content actions
By default the user can copy content of the code to clipboard and wrap the code.
This actions are always visible.
You can add more actions in the actions bar by putting elements as a children
of this element.


### Example
```
<response-raw-viewer>
  <paper-icon-button content-action title="Copy content to clipboard" icon="arc:content-copy"></paper-icon-button>
</response-raw-viewer>
```
See demo for more information.

## Custom search
If the platform doesn't support native text search, this element implements
`ArcBehaviors.TextSearchBehavior` and exposes the `query` attribute.
Set any text to the `query` attribute and it will automatically highlight
occurance of the text.

## Content actions
The element can render actions pane above the code view. Action pane is to
display content actions that is relevan in context of the response displayed
below the icon buttons. It should be icon buttons or just buttons added to this
view.

Buttons need to have `content-action` property set to be included to this view.

```
<response-raw-viewer>
  <paper-icon-button content-action title="Copy content to clipboard" icon="arc:content-copy"></paper-icon-button>
</json-viewer>
```

## Content text wrapping
Set `wrap-text` property on the element to force the wiewer to wrap text.

### Styling
`<response-raw-viewer>` provides the following custom properties and mixins for styling:

Custom property | Description | Default
----------------|-------------|----------
`--response-raw-viewer` | Mixin applied to the element | `{}`
`--arc-font-code1` | Mixin applied to the code block (theme mixin) | `{}`
`--response-raw-viewer-button-active` | Background color of the `wrap` button | `#BDBDBD`
`--response-raw-viewer-action-bar` | Mixin applied to the action bar above the highlighted code | `{}`
`--no-info-message` | Mixin applied to the "nothing to display" message (theme variable) | `{}`
`--response-raw-viewer-code` | Mixin applied to the code block | `{}`

@group UI Elements
@element response-raw-viewer
@demo demo/index.html
-->
<dom-module id="response-raw-viewer">
  <template>
    <style>
    :host {
      display: block;
      overflow: overlay;
      width: 100%;
      @apply --response-raw-viewer;
    }

    .raw-content {
      @apply --arc-font-code1;
      -webkit-user-select: text;
      white-space: pre;
      width: 100%;
      min-height: 52px;
      display: block;
      overflow: auto;
      max-width: 100%;
      @apply --response-raw-viewer-code;
    }

    :host([wrap-text]) .raw-content {
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .actions-panel {
      @apply --layout-horizontal;
      @apply --layout-center;
      @apply --response-raw-viewer-action-bar;
    }

    .actions-panel.hidden {
      display: none;
    }

    .no-info {
      @apply --no-info-message;
    }
    </style>
    <div class$="[[_computeActionsPanelClass(hasResponse)]]">
      <content select="[content-action]"></content>
    </div>
    <code id="rawContent" class="raw-content" hidden$="[[!hasResponse]]"></code>
    <p class="no-info" hidden$="[[hasResponse]]">Nothing to dispplay.</p>
  </template>
  <script>
  Polymer({
    is: 'response-raw-viewer',
    behaviors: [
      ArcBehaviors.TextSearchBehavior,
      ArcBehaviors.PayloadParserBehavior
    ],
    properties: {
      /**
       * The response text to display.
       */
      responseText: {
        type: String,
        observer: '_responseChanged'
      },
      // Computed value, true if the responseText has text.
      hasResponse: {
        type: Boolean,
        value: false,
        computed: '_computeHasResponse(responseText)'
      },
      // An element that should be searched for the query.
      _textSearch: {
        type: HTMLElement,
        value: function() {
          return this.$.rawContent;
        }
      },
      /**
       * If set it will highlight each occurance of the query in the
       * XML viewer.
       */
      query: {
        type: String,
        observer: '_queryChanged'
      },
      // If set to true then the text in the panel will be wrapped.
      wrapText: {
        type: Boolean,
        reflectToAttribute: true
      }
    },

    _responseChanged: function(response) {
      if (!response) {
        this.$.rawContent.innerHTML = '';
      } else {
        this.$.rawContent.innerHTML = this.htmlEscape(response);
      }
    },

    // Highlights the query in text.
    _queryChanged: function(query) {
      if (!query) {
        this.cleanMarked();
        return;
      }
      this.mark(query);
    },
    // Computes if the response is available and content is displayed.
    _computeHasResponse: function(responseText) {
      return !!responseText;
    },
    /**
     * Computes CSS class for the actions pane.
     *
     * @param {Boolean} hasResponse The `hasResponse` propety value of the
     * element.
     * @return CSS class names for the panel depending on state of the
     * `hasResponse`property.
     */
    _computeActionsPanelClass: function(hasResponse) {
      var clazz = 'actions-panel';
      if (!hasResponse) {
        clazz += ' hidden';
      }
      return clazz;
    }
  });
  </script>
</dom-module>