@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

package/src/organisms/gv-header.js

@@ -1,288 +1 @@
-/*
- * 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);
+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);

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

@@ -1,275 +1 @@
-/* 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);
+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);