@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68

package/src/organisms/gv-header.js

@@ -1 +1,276 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvHeader=void 0;const e=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const t=require("../lib/i18n"),i=require("../lib/utils"),r=require("lit/directives/repeat"),s=require("lit/directives/until"),n=require("../lib/events"),a=require("lit/directives/class-map"),l=require("../mixins/with-resize-observer"),o=require("../mixins/item-resource"),c=require("../lib/item"),h=require("lit/directives/style-map");class v extends((0,l.withResizeObserver)((0,o.ItemResource)(e.LitElement))){static get properties(){return{breadcrumbs:{type:Array},sticky:{type:Boolean,reflect:!0},_breadcrumbs:{type:Array,attribute:!1},canSubscribe:{type:Boolean,attribute:"can-subscribe"}}}static get styles(){return[...super.styles,e.css`:host{--img-w:120px;--img-h:120px;--gv-button--fz:var(--gv-header-button--fz, var(--gv-theme-font-size-l, 16px));--gv-button--p:var(--gv-header-button--p, 10px 24px);--gv-link--bgc:transparent;--gv-link-active-bgc:transparent;--c:var(--gv-header--c, var(--gv-theme-font-color-dark, #262626));--gv-link--c:var(--c);--gv-link-active--c:var(--c);--gv-link-a--ph:5px;--gv-link--td:underline;--bgc:var(--gv-header--bgc, var(--gv-theme-color-light, #86c3d0));box-sizing:border-box;display:block}:host([w-lt-768]){--img--w:calc(var(--img-w) / 2);--img--h:calc(var(--img-h) / 2);--gv-button--fz:var(--gv-theme-font-size-s, 12px);font-size:var(--gv-theme-font-size-s,12px)}:host([w-lt-580]){--gv-button--p:3px 9px;--gv-link-a--ph:0px}:host([w-lt-580]) .actions{display:flex;flex-direction:column}:host([w-lt-580]) .version{font-size:var(--gv-theme-font-size-s,12px);line-height:var(--gv-theme-font-size-s,12px)}:host([w-lt-580]) .image gv-image{top:-5px}:host([w-lt-580]) h1{font-size:calc(var(--gv-theme-font-size-xl,26px) - 4px);line-height:calc(var(--gv-theme-font-size-xl,26px) - 4px)}:host([w-lt-400]) h1{font-size:calc(var(--gv-theme-font-size-xl,26px) - 8px)}.header{display:flex;background-color:var(--bgc);flex-direction:row;color:var(--c);transition:all 350ms ease-in-out;padding:.5rem var(--gv-theme-layout--pr,4rem) .5rem var(--gv-theme-layout--pl,4rem);position:relative}.title{flex:1;margin:.5rem 0 .5rem var(--img-w);padding-left:2rem}:host([sticky]) .title{margin-left:calc(var(--img-w)/ 2);transition:all 250ms ease-in-out}.actions,.title{align-self:flex-end}gv-link:last-child{--gv-link--td:none}gv-link::after{content:'>';color:var(--gv-theme-font-color-dark,#262626);align-self:center}gv-link:last-child::after{content:''}.error{text-align:center;margin-right:125px}.version{letter-spacing:.05em;opacity:.5;font-size:var(--gv-theme-font-size-l,16px);line-height:var(--gv-theme-font-size-l,16px);font-weight:500}gv-identity-picture{height:var(--img-h);width:var(--img-w);position:absolute;--gv-image--of:contain;transition:all 150ms ease-in-out}:host([sticky]) gv-identity-picture{height:calc(var(--img-h)/ 2);width:calc(var(--img-w)/ 2);transition:all 150ms ease;top:20%}h1{margin:0;font-size:var(--gv-theme-font-size-xl,26px);font-weight:500;line-height:var(--gv-theme-font-size-xl,26px);letter-spacing:.05em}h1 span{opacity:.5;font-size:var(--gv-theme-font-size-l,16px)}.skeleton .error,.skeleton gv-button{visibility:hidden}`]}constructor(){super(),this.breakpoints={width:[400,580,768]},this._breadcrumbs=[],this.canSubscribe=!1}set breadcrumbs(e){e?Promise.resolve(e).then((e=>{e?Promise.all(e).then((e=>{(0,i.isSameRoutes)(this._breadcrumbs,e)||(this._breadcrumbs=e.filter((e=>null!=e)))})):this._breadcrumbs=null})):this._breadcrumbs=null}_getLink(t,i){return Promise.resolve(t).then((t=>{const r=i===this._breadcrumbs.length-1?(0,c.getTitle)(this._item):t.title;return e.html`<gv-link @gv-link:click="${this._onClick}" .active="${t.active}" .icon="${t.icon}" .path="${t.path}" .title="${r}" .help="${(0,s.until)(t.help,null)}"></gv-link>`})).catch((()=>{delete this._routes[i]}))}_renderBreadcrumbs(){return e.html`<nav>${(0,r.repeat)(this._breadcrumbs,(e=>e),((t,i)=>(0,s.until)(this._getLink(t,i),e.html`<gv-link skeleton></gv-link>`)))}</nav>`}_onSubscribe(e){e.stopPropagation(),(0,n.dispatchCustomEvent)(this,"subscribe",this._item)}render(){const i=(0,c.getNbApisInView)(this._item);return e.html`<div class="${(0,a.classMap)({header:!0,skeleton:this._skeleton})}" style="${(0,h.styleMap)({background:'url("'+(0,c.getBackground)(this._item)+'") var(--bgc) center center no-repeat'})}">${this._renderImage()}<div class="title">${this._error||this._empty||this.sticky?"":e.html`<div class="version">${(0,c.getVersion)(this._item)}</div>`} ${this._error||this._empty?e.html`<div class="error">${this._error?(0,t.i18n)("gv-header.error"):(0,t.i18n)("gv-header.empty")}</div>`:e.html`<h1>${(0,c.getTitle)(this._item)} ${null!==i?e.html`<span>(${i})</span>`:""}</h1>`}</div>${this._error||this._empty||!this.canSubscribe?"":e.html`<div class="actions"><gv-button primary @click="${this._onSubscribe}">${(0,t.i18n)("gv-header.subscribe")}</gv-button></div>`}</div>`}}exports.GvHeader=v,window.customElements.define("gv-header",v);
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * 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.
+ */
+import { css, html, LitElement } from 'lit';
+import '../atoms/gv-button';
+import '../atoms/gv-tag';
+import { i18n } from '../lib/i18n';
+import { isSameRoutes } from '../lib/utils';
+import { repeat } from 'lit/directives/repeat';
+import { until } from 'lit/directives/until';
+import { dispatchCustomEvent } from '../lib/events';
+import { classMap } from 'lit/directives/class-map';
+import { withResizeObserver } from '../mixins/with-resize-observer';
+import { ItemResource } from '../mixins/item-resource';
+import { getNbApisInView, getBackground, getTitle, getVersion } from '../lib/item';
+import { styleMap } from 'lit/directives/style-map';
+/**
+ * Header component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Promise<any>} item - An item
+ * @attr {Promise<Array<{ path: String, title: String }>>} breadcrumbs - definition of routes in order
+ * @attr {Boolean} canSubscribe - for display actions (default: false)
+ *
+ * @cssprop {Color} [--gv-header--bgc=var(--gv-theme-color-light, #86c3d0)] - Background color.
+ * @cssprop {Color} [--gv-header--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ *
+ * @cssprop {Length} [--gv-header-button--p=10px 24px] - Button adding
+ * @cssprop {Length} [--gv-header-button--fz=var(--gv-theme-font-size-l, 16px)] - Button font size
+ *
+ */
+export class GvHeader extends withResizeObserver(ItemResource(LitElement)) {
+    static get properties() {
+        return {
+            breadcrumbs: { type: Array },
+            sticky: { type: Boolean, reflect: true },
+            _breadcrumbs: { type: Array, attribute: false },
+            canSubscribe: { type: Boolean, attribute: 'can-subscribe' },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        :host {
+          --img-w: 120px;
+          --img-h: 120px;
+          --gv-button--fz: var(--gv-header-button--fz, var(--gv-theme-font-size-l, 16px));
+          --gv-button--p: var(--gv-header-button--p, 10px 24px);
+          --gv-link--bgc: transparent;
+          --gv-link-active-bgc: transparent;
+          --c: var(--gv-header--c, var(--gv-theme-font-color-dark, #262626));
+          --gv-link--c: var(--c);
+          --gv-link-active--c: var(--c);
+          --gv-link-a--ph: 5px;
+          --gv-link--td: underline;
+          --bgc: var(--gv-header--bgc, var(--gv-theme-color-light, #86c3d0));
+          box-sizing: border-box;
+          display: block;
+        }
+
+        :host([w-lt-768]) {
+          --img--w: calc(var(--img-w) / 2);
+          --img--h: calc(var(--img-h) / 2);
+          --gv-button--fz: var(--gv-theme-font-size-s, 12px);
+          font-size: var(--gv-theme-font-size-s, 12px);
+        }
+
+        :host([w-lt-580]) {
+          --gv-button--p: 3px 9px;
+          --gv-link-a--ph: 0px;
+        }
+
+        :host([w-lt-580]) .actions {
+          display: flex;
+          flex-direction: column;
+        }
+
+        :host([w-lt-580]) .version {
+          font-size: var(--gv-theme-font-size-s, 12px);
+          line-height: var(--gv-theme-font-size-s, 12px);
+        }
+
+        :host([w-lt-580]) .image gv-image {
+          top: -5px;
+        }
+
+        :host([w-lt-580]) h1 {
+          font-size: calc(var(--gv-theme-font-size-xl, 26px) - 4px);
+          line-height: calc(var(--gv-theme-font-size-xl, 26px) - 4px);
+        }
+
+        :host([w-lt-400]) h1 {
+          font-size: calc(var(--gv-theme-font-size-xl, 26px) - 8px);
+        }
+
+        .header {
+          display: flex;
+          background-color: var(--bgc);
+          flex-direction: row;
+          color: var(--c);
+          transition: all 350ms ease-in-out;
+          padding: 0.5rem var(--gv-theme-layout--pr, 4rem) 0.5rem var(--gv-theme-layout--pl, 4rem);
+          position: relative;
+        }
+
+        .title {
+          flex: 1;
+          margin: 0.5rem 0 0.5rem var(--img-w);
+          padding-left: 2rem;
+        }
+
+        :host([sticky]) .title {
+          margin-left: calc(var(--img-w) / 2);
+          transition: all 250ms ease-in-out;
+        }
+
+        .title,
+        .actions {
+          align-self: flex-end;
+        }
+
+        gv-link:last-child {
+          --gv-link--td: none;
+        }
+
+        gv-link::after {
+          content: '>';
+          color: var(--gv-theme-font-color-dark, #262626);
+          align-self: center;
+        }
+
+        gv-link:last-child::after {
+          content: '';
+        }
+
+        .error {
+          text-align: center;
+          margin-right: 125px;
+        }
+
+        .version {
+          letter-spacing: 0.05em;
+          opacity: 0.5;
+          font-size: var(--gv-theme-font-size-l, 16px);
+          line-height: var(--gv-theme-font-size-l, 16px);
+          font-weight: 500;
+        }
+
+        gv-identity-picture {
+          height: var(--img-h);
+          width: var(--img-w);
+          position: absolute;
+          --gv-image--of: contain;
+          transition: all 150ms ease-in-out;
+        }
+
+        :host([sticky]) gv-identity-picture {
+          height: calc(var(--img-h) / 2);
+          width: calc(var(--img-w) / 2);
+          transition: all 150ms ease;
+          top: 20%;
+        }
+
+        h1 {
+          margin: 0;
+          font-size: var(--gv-theme-font-size-xl, 26px);
+          font-weight: 500;
+          line-height: var(--gv-theme-font-size-xl, 26px);
+          letter-spacing: 0.05em;
+        }
+
+        h1 span {
+          opacity: 0.5;
+          font-size: var(--gv-theme-font-size-l, 16px);
+        }
+
+        .skeleton gv-button,
+        .skeleton .error {
+          visibility: hidden;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.breakpoints = {
+            width: [400, 580, 768],
+        };
+        this._breadcrumbs = [];
+        this.canSubscribe = false;
+    }
+    set breadcrumbs(candidate) {
+        if (candidate) {
+            Promise.resolve(candidate).then((candidates) => {
+                if (candidates) {
+                    Promise.all(candidates).then((futureRoutes) => {
+                        if (!isSameRoutes(this._breadcrumbs, futureRoutes)) {
+                            this._breadcrumbs = futureRoutes.filter((r) => r != null);
+                        }
+                    });
+                }
+                else {
+                    this._breadcrumbs = null;
+                }
+            });
+        }
+        else {
+            this._breadcrumbs = null;
+        }
+    }
+    _getLink(route, index) {
+        return Promise.resolve(route)
+            .then((_route) => {
+            const title = index === this._breadcrumbs.length - 1 ? getTitle(this._item) : _route.title;
+            return html ` <gv-link
+          @gv-link:click=${this._onClick}
+          .active="${_route.active}"
+          .icon="${_route.icon}"
+          .path="${_route.path}"
+          .title="${title}"
+          .help="${until(_route.help, null)}"
+        ></gv-link>`;
+        })
+            .catch(() => {
+            delete this._routes[index];
+        });
+    }
+    _renderBreadcrumbs() {
+        return html `<nav>
+      ${repeat(this._breadcrumbs, (route) => route, (route, index) => until(this._getLink(route, index), html `<gv-link skeleton></gv-link>`))}
+    </nav>`;
+    }
+    _onSubscribe(e) {
+        e.stopPropagation();
+        dispatchCustomEvent(this, 'subscribe', this._item);
+    }
+    render() {
+        const nbApisInView = getNbApisInView(this._item);
+        return html `
+      <div
+        class="${classMap({ header: true, skeleton: this._skeleton })}"
+        style="${styleMap({ background: 'url("' + getBackground(this._item) + '") var(--bgc) center center no-repeat' })}"
+      >
+        ${this._renderImage()}
+        <div class="title">
+          ${!(this._error || this._empty) && !this.sticky ? html `<div class="version">${getVersion(this._item)}</div>` : ''}
+          ${this._error || this._empty
+            ? html `<div class="error">${this._error ? i18n('gv-header.error') : i18n('gv-header.empty')}</div>`
+            : html `<h1>${getTitle(this._item)} ${nbApisInView !== null ? html `<span>(${nbApisInView})</span>` : ''}</h1>`}
+        </div>
+        ${!(this._error || this._empty) && this.canSubscribe
+            ? html `<div class="actions">
+              <gv-button primary @click="${this._onSubscribe}">${i18n('gv-header.subscribe')}</gv-button>
+            </div>`
+            : ``}
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-header', GvHeader);

package/src/organisms/gv-http-client.js

@@ -1 +1,258 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvHttpClient=void 0;const e=require("lit");require("./gv-schema-form"),require("./gv-resizable-views"),require("./gv-documentation"),require("../molecules/gv-table"),require("../atoms/gv-button"),require("../molecules/gv-option"),require("../atoms/gv-switch"),require("../atoms/gv-icon");const s=require("../mixins/keyboard-element"),t=require("../styles/empty"),i=require("../lib/http-client-schema-form"),o=require("../lib/events"),r=require("../lib/http"),n=require("lit-html/directives/repeat");class d extends((0,s.KeyboardElement)(e.LitElement)){static get properties(){return{response:{type:Object},path:{type:String},method:{type:String},loading:{type:Boolean}}}constructor(){super(),this.response=void 0,this.loading=!1,this.path=void 0,this.method=void 0,this.request={method:"GET",path:"/"}}_sendRequest(){(0,o.dispatchCustomEvent)(this,"send",{request:this.request})}_updateRequest(e){this.isFormValid=e.detail.validation.valid,this.request=e.detail.values,this.requestUpdate()}render(){return e.html`<div class="container"><div class="request"><div class="top-bar">Request</div><div class="request-form"><gv-schema-form .schema="${i.httpClientSchemaForm}" id="request-form" @gv-schema-form:change="${this._updateRequest}"></gv-schema-form><gv-button class="request-form-button" icon-right="content:send" .disabled="${!1===this.isFormValid||!0===this.loading}" @gv-button:click="${this._sendRequest}">Send</gv-button></div></div><div class="response">${this.loading||this.response?"":this._renderEmptyResponse()} ${this.loading?this._renderLoading():""} ${this.response?this._renderDebugResponse():""}</div></div>`}_renderEmptyResponse(){return e.html`<div class="empty-response"><gv-icon class="empty-response-icon" shape="editor:format_align_left"></gv-icon><div>Define and run the request you want to test!</div></div>`}_renderLoading(){return e.html`<div class="loading"><gv-icon class="loading-icon" shape="communication:sending"></gv-icon><div>Request in progress!</div></div>`}_renderDebugResponse(){let s=this.response.body,t="text";if(this.response.headers){const e=Object.entries(this.response.headers).find((([e,s])=>"content-type"===e.toLowerCase())),i=e?e[1].split(";")[0]:void 0;"text/html"===i?(t="htmlmixed",s=this.response.body):"application/json"===i&&(t="application/json",s=JSON.stringify(JSON.parse(this.response.body),null,2))}const i={lineNumbers:!0,mode:t};return e.html`${this._renderResponseHeader()}<div class="response-headers">Headers</div><div class="response-headers-content">${(0,n.repeat)(Object.keys(this.response.headers),(s=>e.html`<div><code>${s}: ${this.response.headers[s]}</code></div>`))}</div><div class="response-body">Body</div><div class="code-container"><gv-code .value="${s}" .options="${i}" readonly="readonly"></gv-code></div>`}_renderResponseHeader(){const s=200<=this.response.statusCode&&this.response.statusCode<300,t=400<=this.response.statusCode&&this.response.statusCode<600;return e.html`<div class="top-bar"><div class="response-row-item">Response</div>${this.method?e.html`<div class="response-row-item-method">${this.method}</div>`:""} ${this.path?e.html`<div class="response-row-item">${this.path}</div>`:""} ${this.response.statusCode?e.html`<div class="response-row-item"><gv-state ?success="${s}" ?error="${t}">${this.response.statusCode} - ${r.statusCode[this.response.statusCode].description}</gv-state></div>`:""}</div>`}static get styles(){return[t.empty,e.css`:host{box-sizing:border-box;height:100%;width:100%;display:block}.container{display:flex;flex-direction:row;height:100%}.request{width:40%;height:100%}.request-form{padding:8px;display:flex;flex-direction:column}.request-form-button{margin-top:16px}.response{border-left:1px solid #d9d9d9;border-right:1px solid #d9d9d9;height:100%;width:60%;overflow:hidden}.top-bar{background-color:#f5f5f5}.response-row-item{margin-right:16px}.response-row-item-method{margin-right:4px;font-weight:700}.response-body,.response-headers,.status-code,.top-bar{font-size:16px;height:40px;display:flex;flex-direction:row;align-items:center;padding:0 16px;border-bottom:1px solid #d9d9d9}.response-headers-content{padding:16px;border-bottom:1px solid #d9d9d9;max-height:40%}.empty-response,.loading{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;font-size:16px}.empty-response-icon,.loading-icon{--gv-icon--s:128px;--gv-icon--c:var(--gv-theme-color-dark)}.code-container{height:100%;overflow:auto}`]}}exports.GvHttpClient=d,window.customElements.define("gv-http-client",d);
+/* eslint-disable yoda */
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * 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.
+ */
+import { css, html, LitElement } from 'lit';
+import './gv-schema-form';
+import './gv-resizable-views';
+import './gv-documentation';
+import '../molecules/gv-table';
+import '../atoms/gv-button';
+import '../molecules/gv-option';
+import '../atoms/gv-switch';
+import '../atoms/gv-icon';
+import { KeyboardElement } from '../mixins/keyboard-element';
+import { empty } from '../styles/empty';
+import { httpClientSchemaForm } from '../lib/http-client-schema-form';
+import { dispatchCustomEvent } from '../lib/events';
+import { statusCode } from '../lib/http';
+import { repeat } from 'lit-html/directives/repeat';
+/**
+ * @fires gv-http-client:send - Event sent when
+ *
+ * @attr {String} path - Path of the request
+ * @attr {String} method - Method of the request
+ * @attr {Boolean} loading - True if the request is in progress
+ * @attr {Object} response - Response of the request
+ */
+export class GvHttpClient extends KeyboardElement(LitElement) {
+    static get properties() {
+        return {
+            response: { type: Object },
+            path: { type: String },
+            method: { type: String },
+            loading: { type: Boolean },
+        };
+    }
+    constructor() {
+        super();
+        this.response = undefined;
+        this.loading = false;
+        this.path = undefined;
+        this.method = undefined;
+        this.request = {
+            method: 'GET',
+            path: '/',
+        };
+    }
+    _sendRequest() {
+        dispatchCustomEvent(this, 'send', { request: this.request });
+    }
+    _updateRequest(formData) {
+        this.isFormValid = formData.detail.validation.valid;
+        this.request = formData.detail.values;
+        this.requestUpdate();
+    }
+    render() {
+        return html ` <div class="container">
+      <div class="request">
+        <div class="top-bar">Request</div>
+        <div class="request-form">
+          <gv-schema-form .schema="${httpClientSchemaForm}" id="request-form" @gv-schema-form:change="${this._updateRequest}">
+          </gv-schema-form>
+          <gv-button
+            class="request-form-button"
+            icon-right="content:send"
+            .disabled="${this.isFormValid === false || this.loading === true}"
+            @gv-button:click="${this._sendRequest}"
+          >
+            Send
+          </gv-button>
+        </div>
+      </div>
+
+      <div class="response">
+        ${!this.loading && !this.response ? this._renderEmptyResponse() : ''} ${this.loading ? this._renderLoading() : ''}
+        ${this.response ? this._renderDebugResponse() : ''}
+      </div>
+    </div>`;
+    }
+    _renderEmptyResponse() {
+        return html `
+      <div class="empty-response">
+        <gv-icon class="empty-response-icon" shape="editor:format_align_left"></gv-icon>
+        <div>Define and run the request you want to test!</div>
+      </div>
+    `;
+    }
+    _renderLoading() {
+        return html `
+      <div class="loading">
+        <gv-icon class="loading-icon" shape="communication:sending"></gv-icon>
+        <div>Request in progress!</div>
+      </div>
+    `;
+    }
+    _renderDebugResponse() {
+        let prettifiedResponse = this.response.body;
+        let mode = 'text';
+        if (this.response.headers) {
+            // eslint-disable-next-line no-unused-vars
+            const contentTypeHeader = Object.entries(this.response.headers).find(([key, value]) => {
+                return key.toLowerCase() === 'content-type';
+            });
+            const contentType = contentTypeHeader ? contentTypeHeader[1].split(';')[0] : undefined;
+            if (contentType === 'text/html') {
+                mode = 'htmlmixed';
+                prettifiedResponse = this.response.body;
+            }
+            else if (contentType === 'application/json') {
+                mode = 'application/json';
+                // Convert JSON body to a human readable form with 2 spaces indentation
+                prettifiedResponse = JSON.stringify(JSON.parse(this.response.body), null, 2);
+            }
+        }
+        const gvCodeOptions = {
+            lineNumbers: true,
+            mode: mode,
+        };
+        return html `
+      ${this._renderResponseHeader()}
+      <div class="response-headers">Headers</div>
+      <div class="response-headers-content">
+        ${repeat(Object.keys(this.response.headers), (key) => {
+            return html `<div><code>${key}: ${this.response.headers[key]}</code></div>`;
+        })}
+      </div>
+      <div class="response-body">Body</div>
+      <div class="code-container">
+        <gv-code .value="${prettifiedResponse}" .options="${gvCodeOptions}" readonly></gv-code>
+      </div>
+    `;
+    }
+    _renderResponseHeader() {
+        const successfulRequest = 200 <= this.response.statusCode && this.response.statusCode < 300;
+        const errorRequest = 400 <= this.response.statusCode && this.response.statusCode < 600;
+        return html `<div class="top-bar">
+      <div class="response-row-item">Response</div>
+      ${this.method ? html ` <div class="response-row-item-method">${this.method}</div>` : ''}
+      ${this.path ? html ` <div class="response-row-item">${this.path}</div>` : ''}
+      ${this.response.statusCode
+            ? html ` <div class="response-row-item">
+            <gv-state ?success="${successfulRequest}" ?error="${errorRequest}">
+              ${this.response.statusCode} - ${statusCode[this.response.statusCode].description}
+            </gv-state>
+          </div>`
+            : ''}
+    </div> `;
+    }
+    static get styles() {
+        return [
+            empty,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          height: 100%;
+          width: 100%;
+          display: block;
+        }
+
+        .container {
+          display: flex;
+          flex-direction: row;
+          height: 100%;
+        }
+
+        .request {
+          width: 40%;
+          height: 100%;
+        }
+
+        .request-form {
+          padding: 8px;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .request-form-button {
+          margin-top: 16px;
+        }
+
+        .response {
+          border-left: 1px solid #d9d9d9;
+          border-right: 1px solid #d9d9d9;
+          height: 100%;
+          width: 60%;
+          overflow: hidden;
+        }
+
+        .top-bar {
+          background-color: #f5f5f5;
+        }
+
+        .response-row-item {
+          margin-right: 16px;
+        }
+
+        .response-row-item-method {
+          margin-right: 4px;
+          font-weight: bold;
+        }
+
+        .status-code,
+        .top-bar,
+        .response-headers,
+        .response-body {
+          font-size: 16px;
+          height: 40px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 0 16px;
+          border-bottom: 1px solid #d9d9d9;
+        }
+
+        .response-headers-content {
+          padding: 16px;
+          border-bottom: 1px solid #d9d9d9;
+          max-height: 40%;
+        }
+
+        .loading,
+        .empty-response {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          font-size: 16px;
+        }
+
+        .loading-icon,
+        .empty-response-icon {
+          --gv-icon--s: 128px;
+          --gv-icon--c: var(--gv-theme-color-dark);
+        }
+
+        .code-container {
+          height: 100%;
+          overflow: auto;
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-http-client', GvHttpClient);