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

package/dist/src/molecules/gv-identity-picture.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Identity picture component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {String} picture - the picture
+ * @attr {String} display_name - the display_name of the picture
+ * @attr {Boolean} notification - true to display a notification info
+ * @attr {Boolean} rounded - true for rounded image/icon
+ *
+ * @cssprop {Color} [--gv-identity-picture-notification--bgc=var(--gv-theme-color-light, #86c3d0)] - Notification background color
+ */
+export class GvIdentityPicture extends LitElement {
+    static get properties(): {
+        picture: {
+            type: StringConstructor;
+        };
+        display_name: {
+            type: StringConstructor;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        notification: {
+            type: BooleanConstructor;
+        };
+        rounded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _onError(): void;
+    _error: boolean | undefined;
+    _toNumber(size: any): number;
+    _onLoaded(): void;
+    _getMaxSize(width: any, height: any): number;
+}
+import { LitElement } from "lit-element/lit-element";

package/dist/src/molecules/gv-identity-picture.js

@@ -0,0 +1,139 @@
+/*
+ * 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, LitElement, html } from 'lit';
+import { toSvg } from 'jdenticon';
+import { skeleton } from '../styles/skeleton';
+import { styleMap } from 'lit/directives/style-map';
+import '../atoms/gv-image';
+/**
+ * Identity picture component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {String} picture - the picture
+ * @attr {String} display_name - the display_name of the picture
+ * @attr {Boolean} notification - true to display a notification info
+ * @attr {Boolean} rounded - true for rounded image/icon
+ *
+ * @cssprop {Color} [--gv-identity-picture-notification--bgc=var(--gv-theme-color-light, #86c3d0)] - Notification background color
+ */
+export class GvIdentityPicture extends LitElement {
+    static get properties() {
+        return {
+            picture: { type: String },
+            display_name: { type: String },
+            _error: { type: Boolean, attribute: false },
+            notification: { type: Boolean },
+            rounded: { type: Boolean, reflect: true },
+            skeleton: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            skeleton,
+            // language=CSS
+            css `
+        :host {
+          display: block;
+          position: relative;
+        }
+
+        div {
+          text-align: center;
+        }
+
+        svg,
+        .skeleton {
+          width: auto;
+          height: auto;
+          max-width: 100%;
+          max-height: 100%;
+        }
+
+        gv-image {
+          width: 100%;
+          height: 100%;
+          --gv-image--of: contain;
+        }
+
+        :host([rounded]) gv-image,
+        :host([rounded]) svg {
+          border: 2px solid var(--gv-theme-neutral-color-lighter, #fafafa);
+          border-radius: 50%;
+          box-sizing: border-box;
+          --gv-image--of: cover;
+        }
+
+        .notification {
+          position: absolute;
+          width: 8px;
+          height: 8px;
+          background-clip: padding-box;
+          border-radius: 50%;
+          background-color: var(--gv-identity-picture-notification--bgc, var(--gv-theme-color-light, #86c3d0));
+        }
+      `,
+        ];
+    }
+    _onError() {
+        this._error = true;
+    }
+    _toNumber(size) {
+        return parseInt(size.replace('px', ''), 10);
+    }
+    _onLoaded() {
+        this._error = false;
+    }
+    _getMaxSize(width, height) {
+        return Math.min(this._toNumber(width), this._toNumber(height));
+    }
+    updated(properties) {
+        if (properties.has('picture')) {
+            this._error = false;
+        }
+    }
+    render() {
+        const { width, height } = window.getComputedStyle(this);
+        if ((!this.picture || this._error) && width && height) {
+            const size = this._getMaxSize(width, height);
+            const container = document.createElement('div');
+            if (this.skeleton) {
+                container.classList.add('skeleton');
+            }
+            container.title = this.display_name;
+            container.innerHTML = toSvg(this.display_name, size, { backColor: '#FFF' });
+            if (this.notification) {
+                const notification = document.createElement('span');
+                notification.className = 'notification';
+                notification.style.left = width;
+                container.appendChild(notification);
+            }
+            return html `${container}`;
+        }
+        return html `
+      <gv-image
+        src="${this.picture}"
+        alt="${this.display_name}"
+        title="${this.display_name}"
+        @error="${this._onError}"
+        @gv-image:loaded="${this._onLoaded}"
+      ></gv-image>
+      ${this.notification ? html `<span class="notification" style="${styleMap({ left: width })}"></span>` : ''}
+    `;
+    }
+}
+window.customElements.define('gv-identity-picture', GvIdentityPicture);

package/dist/src/molecules/gv-list.d.ts

@@ -0,0 +1,123 @@
+declare const GvList_base: {
+    new (): {
+        [x: string]: any;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+        updated(changedProperties: any): void;
+    };
+    [x: string]: any;
+    readonly properties: {
+        _invisible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _skeleton: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _empty: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * Connected Applications component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-list:click - Click event from an element of the list
+ *
+ * @attr {Promise<Array<{Object}>>} items - a list of item.
+ * @attr {String} title - title of the list.
+ * @attr {Boolean} clickable - true if gv-list element can be clickable.
+ *
+ * @cssprop {Color} [--gv-list--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Length} [--gv-list-icon--s=20px] - Height and icon width
+ * @cssprop {Length} [--gv-list-image--h=40px] - Image height
+ * @cssprop {Length} [--gv-list-image--w=40px] - Image width
+ */
+export class GvList extends GvList_base {
+    static get properties(): {
+        items: {
+            type: ObjectConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+        _items: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        length: number;
+        toString(): string;
+        toLocaleString(): string;
+        pop(): import("lit").CSSResult | undefined;
+        push(...items: import("lit").CSSResult[]): number;
+        concat(...items: ConcatArray<import("lit").CSSResult>[]): import("lit").CSSResult[];
+        concat(...items: (import("lit").CSSResult | ConcatArray<import("lit").CSSResult>)[]): import("lit").CSSResult[];
+        join(separator?: string | undefined): string;
+        reverse(): import("lit").CSSResult[];
+        shift(): import("lit").CSSResult | undefined;
+        slice(start?: number | undefined, end?: number | undefined): import("lit").CSSResult[];
+        sort(compareFn?: ((a: import("lit").CSSResult, b: import("lit").CSSResult) => number) | undefined): import("lit").CSSResult[];
+        splice(start: number, deleteCount?: number | undefined): import("lit").CSSResult[];
+        splice(start: number, deleteCount: number, ...items: import("lit").CSSResult[]): import("lit").CSSResult[];
+        unshift(...items: import("lit").CSSResult[]): number;
+        indexOf(searchElement: import("lit").CSSResult, fromIndex?: number | undefined): number;
+        lastIndexOf(searchElement: import("lit").CSSResult, fromIndex?: number | undefined): number;
+        every<S extends import("lit").CSSResult>(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => value is S, thisArg?: any): this is S[];
+        every(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => unknown, thisArg?: any): boolean;
+        some(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => unknown, thisArg?: any): boolean;
+        forEach(callbackfn: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => void, thisArg?: any): void;
+        map<U>(callbackfn: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => U, thisArg?: any): U[];
+        filter<S_1 extends import("lit").CSSResult>(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => value is S_1, thisArg?: any): S_1[];
+        filter(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => unknown, thisArg?: any): import("lit").CSSResult[];
+        reduce(callbackfn: (previousValue: import("lit").CSSResult, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => import("lit").CSSResult): import("lit").CSSResult;
+        reduce(callbackfn: (previousValue: import("lit").CSSResult, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => import("lit").CSSResult, initialValue: import("lit").CSSResult): import("lit").CSSResult;
+        reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => U_1, initialValue: U_1): U_1;
+        reduceRight(callbackfn: (previousValue: import("lit").CSSResult, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => import("lit").CSSResult): import("lit").CSSResult;
+        reduceRight(callbackfn: (previousValue: import("lit").CSSResult, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => import("lit").CSSResult, initialValue: import("lit").CSSResult): import("lit").CSSResult;
+        reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => U_2, initialValue: U_2): U_2;
+        find<S_2 extends import("lit").CSSResult>(predicate: (this: void, value: import("lit").CSSResult, index: number, obj: import("lit").CSSResult[]) => value is S_2, thisArg?: any): S_2 | undefined;
+        find(predicate: (value: import("lit").CSSResult, index: number, obj: import("lit").CSSResult[]) => unknown, thisArg?: any): import("lit").CSSResult | undefined;
+        findIndex(predicate: (value: import("lit").CSSResult, index: number, obj: import("lit").CSSResult[]) => unknown, thisArg?: any): number;
+        fill(value: import("lit").CSSResult, start?: number | undefined, end?: number | undefined): import("lit").CSSResult[];
+        copyWithin(target: number, start: number, end?: number | undefined): import("lit").CSSResult[];
+        entries(): IterableIterator<[number, import("lit").CSSResult]>;
+        keys(): IterableIterator<number>;
+        values(): IterableIterator<import("lit").CSSResult>;
+        includes(searchElement: import("lit").CSSResult, fromIndex?: number | undefined): boolean;
+        flatMap<U_3, This = undefined>(callback: (this: This, value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
+        flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
+        [Symbol.iterator](): IterableIterator<import("lit").CSSResult>;
+        [Symbol.unscopables](): {
+            copyWithin: boolean;
+            entries: boolean;
+            fill: boolean;
+            find: boolean;
+            findIndex: boolean;
+            keys: boolean;
+            values: boolean;
+        };
+    };
+    _skeletonAttribute: string;
+    _onClick(item: any): void;
+    _renderImage(item: any): import("lit-html").TemplateResult<1>;
+    _renderStatus(subscriptions: any): "" | import("lit-html").TemplateResult<1>;
+    _renderItem(item: any): import("lit-html").TemplateResult<1>;
+    _renderItems(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/src/molecules/gv-list.js

@@ -0,0 +1,214 @@
+/*
+ * 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 { repeat } from 'lit/directives/repeat';
+import { classMap } from 'lit/directives/class-map';
+import { i18n } from '../lib/i18n';
+import { link } from '../styles/link';
+import '../molecules/gv-identity-picture';
+import { dispatchCustomEvent } from '../lib/events';
+import { getPicture, getPictureDisplayName, getVersion } from '../lib/item';
+import { withSkeletonAttribute } from '../mixins/with-skeleton-attribute';
+/**
+ * Connected Applications component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-list:click - Click event from an element of the list
+ *
+ * @attr {Promise<Array<{Object}>>} items - a list of item.
+ * @attr {String} title - title of the list.
+ * @attr {Boolean} clickable - true if gv-list element can be clickable.
+ *
+ * @cssprop {Color} [--gv-list--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Length} [--gv-list-icon--s=20px] - Height and icon width
+ * @cssprop {Length} [--gv-list-image--h=40px] - Image height
+ * @cssprop {Length} [--gv-list-image--w=40px] - Image width
+ */
+export class GvList extends withSkeletonAttribute(LitElement) {
+    static get properties() {
+        return {
+            ...super.styles,
+            items: { type: Object },
+            title: { type: String },
+            clickable: { type: Boolean },
+            _items: { type: Object, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            link,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          width: 280px;
+          border-radius: 4px;
+          background-color: var(--gv-list--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          --gv-icon--s: var(--gv-list-icon--s, 20px);
+        }
+
+        gv-identity-picture {
+          width: var(--gv-list-image--w, 40px);
+          height: var(--gv-list-image--h, 40px);
+        }
+
+        .list {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        h3 {
+          padding: 24px;
+          font-size: var(--gv-theme-font-size-m);
+          line-height: var(--gv-theme-font-size-m);
+          opacity: 0.6;
+          letter-spacing: 0.05rem;
+          border-bottom: 1px solid var(--gv-theme-neutral-color);
+          margin: 0;
+        }
+
+        h4 {
+          font-size: var(--gv-theme-font-size-m);
+          line-height: var(--gv-theme-font-size-m);
+          opacity: 0.9;
+          letter-spacing: 0.05rem;
+        }
+
+        h4 span {
+          font-size: var(--gv-theme-font-size-s, 12px);
+          margin-left: 8px;
+        }
+
+        .item {
+          display: flex;
+          margin: 24px;
+        }
+
+        .item__image {
+          align-self: center;
+          margin-right: 4px;
+        }
+
+        .item__content {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+        }
+
+        .item__title {
+          margin: 0;
+        }
+
+        .item__description {
+          font-size: var(--gv-theme-font-size-m, 14px);
+          line-height: 22px;
+          opacity: 0.5;
+
+          display: -webkit-box;
+          max-width: 200px;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .scrollable-container {
+          max-height: 400px;
+          overflow: auto;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._skeletonAttribute = 'items';
+    }
+    _onClick(item) {
+        dispatchCustomEvent(this, 'click', item);
+    }
+    _renderImage(item) {
+        return html `<gv-identity-picture .picture="${getPicture(item)}" .display_name="${getPictureDisplayName(item)}"></gv-identity-picture>`;
+    }
+    _renderStatus(subscriptions) {
+        if (subscriptions) {
+            const paused = subscriptions.filter((sub) => sub.status.toUpperCase() === 'PAUSED');
+            if (paused.length > 0) {
+                return html ` <gv-icon title="${i18n('gv-list.paused')}" shape="media:pause"></gv-icon>`;
+            }
+            const pending = subscriptions.filter((sub) => sub.status.toUpperCase() === 'PENDING');
+            if (pending.length > 0) {
+                return html ` <gv-icon title="${i18n('gv-list.pending')}" shape="home:timer"></gv-icon>`;
+            }
+        }
+        return '';
+    }
+    _renderItem(item) {
+        if (item) {
+            return html `
+        <div class="item__image">${this._renderImage(item.item)}</div>
+        <div class="item__content">
+          <h4 class="item__title">${this._renderStatus(item.subscriptions)}${item.item.name} <span>${getVersion(item.item)}</span></h4>
+          <div class="item__description">${item.item.description}</div>
+        </div>
+      `;
+        }
+        return html `<p>xxxx-xxxx-xxxx-xxxx</p>`;
+    }
+    _renderItems() {
+        if (this._empty && !this._skeleton) {
+            return '';
+        }
+        if (this._skeleton) {
+            return html `
+        <ul class="list">
+          <h4 class="skeleton">xxxx-xxxx-xxxx-xxxx</h4>
+          <div class="scrollable-container">
+            <li class="item skeleton">${this._renderItem()}</li>
+            <li class="item skeleton">${this._renderItem()}</li>
+          </div>
+        </ul>
+      `;
+        }
+        return html `
+      <ul class="list">
+        <h3>${this.title ? this.title : ''} ${this._items && this._items.length > 0 ? html `<span>(${this._items.length})</span>` : ''}</h3>
+        <div class="scrollable-container">
+          ${this._items
+            ? repeat(this._items, (item) => item, (item) => {
+                if (this.clickable) {
+                    return html `<li class="${classMap({ item: true, link: true })}" @click="${this._onClick.bind(this, item)}">
+                      ${this._renderItem(item)}
+                    </li>`;
+                }
+                else {
+                    return html `<li class="${classMap({ item: true })}">${this._renderItem(item)}</li>`;
+                }
+            })
+            : ''}
+        </div>
+      </ul>
+    `;
+    }
+    render() {
+        return html ` <div>${this._error ? html `<div class="error">${i18n('gv-list.error')}</div>` : this._renderItems()}</div> `;
+    }
+}
+window.customElements.define('gv-list', GvList);

package/dist/src/molecules/gv-metrics.d.ts

@@ -0,0 +1,65 @@
+declare const GvMetrics_base: {
+    new (): {
+        [x: string]: any;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+        updated(changedProperties: any): void;
+    };
+    [x: string]: any;
+    readonly properties: {
+        _invisible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _skeleton: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _empty: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * Metrics information component
+ *
+ * ## Details
+ * * has @theme facet
+ * * attributes `metrics` should be an array of Object {value, clickable}, or an array of values, or a mix.
+ *
+ * @fires gv-metrics:click - Click event from metric if is clickable
+ *
+ * @attr {Promise<{ hits: value, health: {value, clickable}, subscribers: {value, clickable?, title?} }>} metrics - Metrics.
+ * @attr {RatingSummary} rating - Ratings of an API.
+ */
+export class GvMetrics extends GvMetrics_base {
+    static get properties(): {
+        metrics: {
+            type: ObjectConstructor;
+        };
+        _metrics: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+    };
+    _skeletonAttribute: string;
+    skeleton: boolean;
+    _isClickable(metricName: any): any;
+    _getValue(metric: any): any;
+    _getSubscribers(): any;
+    _getHits(): any;
+    _getHealth(): string | null;
+    _getTitle(metricName: any): any;
+    _onClick(key: any): void;
+    _renderMetric(key: any, icon: any, name: any, value: any): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};