JarCasting
This component is deprecated. Use @advanced-rest-client/arc-headers instead.
headers-list-view
An element that displays a list of headers.
<headers-list-view></headers-list-view>
<script>
let headers = 'Content-Type: application-json\n';
headers += 'Content-Length: 256\n';
headers += 'Content-Encoding: gzip\n';
headers += 'x-server: x-abc.zone-europe-a.domain.company.com';
document.querySelector('headers-list-view').headers = headers;
</script>
You can put @advanced-rest-client/arc-definitions element into dom to enable interactive list. When the user double click on the list item it dispatches headers query event and arc-definitions responds to his query. If the headers details are available it renders a dialog with header description.
API components
This components is a part of API components ecosystem
Usage
Installation
npm install --save @advanced-rest-client/headers-list-view
In an html file
<html>
<head>
<script type="module">
import '@advanced-rest-client/headers-list-view/headers-list-view.js';
</script>
</head>
<body>
<headers-list-view headers="..."></headers-list-view>
</body>
</html>
In a LitElement
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/headers-list-view/headers-list-view.js';
class SampleElement extends PolymerElement {
render() {
return html`
<headers-list-view .headers="${this.headers}"></headers-list-view>
`;
}
}
customElements.define('sample-element', SampleElement);
In a Polymer 3 element
import {PolymerElement, html} from '@polymer/polymer';
import '@advanced-rest-client/headers-list-view/headers-list-view.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<headers-list-view headers="[[headers]]"></headers-list-view>
`;
}
_authChanged(e) {
console.log(e.detail);
}
}
customElements.define('sample-element', SampleElement);
Installation
git clone https://github.com/advanced-rest-client/headers-list-view
cd headers-list-view
npm install
Running the demo locally
npm start
Running the tests
npm test
