@gravitee/ui-components 3.25.3-typescript-bfd8f67 → 3.25.3-typescript-94e8113

package/dist/src/organisms/gv-header.js

@@ -0,0 +1,276 @@
+/*
+ * 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/dist/src/organisms/gv-http-client.d.ts

@@ -0,0 +1,57 @@
+declare const GvHttpClient_base: {
+    new (): {
+        [x: string]: any;
+        _controller: {};
+        _handleKeyDown: (e: any) => void;
+        _handleKeyUp: (e: any) => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        _onKeyDown(e: any): void;
+        _onKeyUp(e: any): void;
+        isPressed(...keys: any[]): boolean;
+        onKeyboard(controller: any): void;
+    };
+    [x: string]: any;
+};
+/**
+ * @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 GvHttpClient_base {
+    static get properties(): {
+        response: {
+            type: ObjectConstructor;
+        };
+        path: {
+            type: StringConstructor;
+        };
+        method: {
+            type: StringConstructor;
+        };
+        loading: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    response: any;
+    loading: boolean;
+    path: any;
+    method: any;
+    request: {
+        method: string;
+        path: string;
+    };
+    _sendRequest(): void;
+    _updateRequest(formData: any): void;
+    isFormValid: any;
+    render(): import("lit-html").TemplateResult<1>;
+    _renderEmptyResponse(): import("lit-html").TemplateResult<1>;
+    _renderLoading(): import("lit-html").TemplateResult<1>;
+    _renderDebugResponse(): import("lit-html").TemplateResult<1>;
+    _renderResponseHeader(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

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

package/dist/src/organisms/gv-menu.d.ts

@@ -0,0 +1,74 @@
+declare const GvMenu_base: {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};
+/**
+ * A menu
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-link:click - Custom event when link click
+ *
+ * @slot top - The content on top of menu
+ * @slot right - The content at right
+ * @slot right-transition - The content at right with transition
+ *
+ * @attr {Array} routes - definition of routes [{active: Boolean, icon: String, path: String, title: Promise<String>]
+ * @cssprop {Color} [--gv-menu--c=var(--gv-theme-font-color-light, #ffffff)] - Color
+ * @cssprop {Color} [--gv-menu--bgc=var(--gv-theme-color-dark, #28444f)] - Background color.
+ * @cssprop {Color} [--gv-menu-link-active--bdc=var(--gv-theme-color-light, #86c3d0)] - Border bottom color of active link.
+ * @cssprop {String} [--gv-menu-link-active--bds=solid] - Border bottom style of active link.
+ * @cssprop {Length} [--gv-menu-link-active--bdw=0 0 3px 0] - Border bottom width of active link.
+ * @cssprop {Color} [--gv-menu-link-active--bgc=transparent] - Active background color
+ * @cssprop {Color} [--gv-menu-link--bgc=transparent] - Background color
+ * @cssprop {Length} [--gv-menu-link-a--pv=0px] - Link vertical padding
+ */
+export class GvMenu extends GvMenu_base {
+    static get properties(): {
+        /** @required **/
+        routes: {
+            type: ArrayConstructor;
+        };
+        sticky: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _small: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _routes: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _hasHeader: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    /** @protected */
+    protected _routes: any[];
+    sticky: boolean;
+    breakpoints: {
+        width: number[];
+    };
+    set routes(arg: any);
+    onResize({ width }: {
+        width: any;
+    }): void;
+    _small: boolean | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changedProperties: any): void;
+    _hasHeader: boolean | undefined;
+}
+export {};