api-console-assets
Version:
This repo only exists to publish api console components to npm
190 lines (172 loc) • 6.66 kB
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-item/paper-item.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<!--
An element to render lsit of response status coded found in RAML responses
definition. It selects first response status code and sets a response
definition to `selectedResponse` property.
### Example
```
<raml-docs-response-status-selector responses="[[raml.responses]]" selected-status-code="{{selectedStatusCode}}" selected-response="{{selectedResponse}}"></raml-docs-response-panel>
```
### Styling
`<raml-docs-response-panel>` provides the following custom properties and mixins for styling:
Custom property | Description | Default
----------------|-------------|----------
`--raml-docs-response-panel` | Mixin applied to the element | `{}`
`--arc-status-code-color-200` | Color of the 200 status code (ARC theme option) | `rgba(56, 142, 60, 1)` |
`--arc-status-code-color-300` | Color of the 300 status code (ARC theme option) | `rgba(48, 63, 159, 1)` |
`--arc-status-code-color-400` | Color of the 400 status code (ARC theme option) | `rgba(245, 124, 0, 1)` |
`--arc-status-code-color-500` | Color of the 500 status code (ARC theme option) | `rgba(211, 47, 47, 1)` |
`--arc-status-code-bgcolor-200` | Background color of the 200 status code | `rgba(56, 142, 60, 0.12)` |
`--arc-status-code-bgcolor-300` | Background color of the 300 status code | `rgba(48, 63, 159, 0.12)` |
`--arc-status-code-bgcolor-400` | Background color of the 400 status code | `rgba(245, 124, 0, 0.12)` |
`--arc-status-code-bgcolor-500` | Background color of the 500 status code | `rgba(211, 47, 47, 0.12)` |
`--raml-docs-response-panel-codes-border-color` | Border color of the response codes column | `rgba(0, 161, 223, 0.24)`
`--no-info-message` | A mixin applied to the "missing type" paragraph. | `{}` |
`--raml-docs-response-panel-container` | A mixin applied to the element's main container | `{}`
`--raml-docs-response-panel-codes-content` | A mixin applied to the element's status codes container | `{}`
`--raml-docs-response-panel-docs-content` | A mixin applied to the element's documentation content container | `{}`
@group RAML Elements
@element raml-docs-response-status-selector
@demo demo/index.html
-->
<dom-module id="raml-docs-response-status-selector">
<template>
<style include="markdown-styles"></style>
<style>
:host {
border-right: 1px var(--raml-docs-response-panel-codes-border-color, rgba(0, 161, 223, 0.24)) solid;
@apply(--raml-docs-response-panel-codes-content);
}
paper-item {
cursor: pointer;
}
paper-item[active] {
font-weight: 500;
}
.green {
color: var(--arc-status-code-color-200, rgba(56, 142, 60, 1));
}
.green[active]:not([focused]) {
background-color: var(--arc-status-code-bgcolor-200, rgba(56, 142, 60, 0.12));
}
.blue {
color: var(--arc-status-code-color-300, rgba(48, 63, 159, 1));
}
.blue[active]:not([focused]) {
background-color: var(--arc-status-code-bgcolor-300, rgba(48, 63, 159, 0.12));
}
.orange {
color: var(--arc-status-code-color-400, rgba(245, 124, 0, 1));
}
.orange[active]:not([focused]) {
background-color: var(--arc-status-code-bgcolor-400, rgba(245, 124, 0, 0.12));
}
.red {
color: var(--arc-status-code-color-500, rgba(211, 47, 47, 1));
}
.red[active]:not([focused]) {
background-color: var(--arc-status-code-bgcolor-500, rgba(211, 47, 47, 0.12));
}
</style>
<paper-menu selected="{{selected}}" selected-attribute="active">
<template is="dom-repeat" items="[[responses]]">
<paper-item class$="[[_computeCodeClass(item.code)]]">[[item.code]]</paper-item>
</template>
</paper-menu>
</template>
<script>
Polymer({
is: 'raml-docs-response-status-selector',
properties: {
// List of responses - RAML definition (JSON)
responses: Array,
// Selected index in the selector
selected: {
type: Number,
notify: true,
value: 0
},
/**
* Selected response status code.
*/
selectedStatusCode: {
type: Number,
notify: true,
computed: '_computeSelectedCode(responses, selected)'
},
// Currently selected response object
selectedResponse: {
type: Object,
notify: true,
computed: '_computeSelectedResponse(responses, selected)'
}
},
observers: [
'_responsesChanged(responses)'
],
// Sets a default (first) response statuc code.
_responsesChanged: function() {
this.selected = 0;
},
/**
* Computes selected response definition.
*
* @param {Array} responses List of available responses
* @param {Number} selected Currently selected item's index.
* @return {Object|undefined} Response definition or undefined.
*/
_computeSelectedResponse: function(responses, selected) {
if (typeof selected !== 'number' || !responses) {
return;
}
return responses[selected];
},
/**
* Computes selected response status code.
*
* @param {Array} responses List of available responses
* @param {Number} selected Currently selected item's index.
* @return {Object|undefined} Response definition or undefined.
*/
_computeSelectedCode: function(responses, selected) {
if (typeof selected !== 'number' || !responses || !responses.length) {
return;
}
return responses[selected].code;
},
_computeCodeClass: function(code) {
code = Number(code);
if (code !== code) {
return '';
}
if (code >= 200 && code < 300) {
return 'green';
}
if (code >= 300 && code < 400) {
return 'blue';
}
if (code >= 400 && code < 500) {
return 'orange';
}
if (code >= 500 && code < 600) {
return 'red';
}
}
});
</script>
</dom-module>