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

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

@@ -0,0 +1,234 @@
+/*
+ * 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 { repeat } from 'lit/directives/repeat';
+import '../atoms/gv-icon';
+import { skeleton } from '../styles/skeleton';
+import { classMap } from 'lit/directives/class-map';
+import { i18n } from '../lib/i18n';
+const MAX_RATE = 5;
+/**
+ * Rating component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Length} value - average of ratings between 1 and 5
+ * @attr {String} count - total count for the average
+ * @attr {Boolean} skeleton - skeleton mode
+ * @attr {Boolean} readonly - readonly mode
+ * @attr {Boolean} with-description - if true, show rate description on hover
+ *
+ * @cssprop {Color} [--gv-rating--c=var(--gv-theme-color, #5a7684)] - Color
+ * @cssprop {Length} [--gv-rating--s=13px] - Size
+ */
+export class GvRating extends LitElement {
+    static get properties() {
+        return {
+            value: { type: Number, reflect: true },
+            count: { type: String },
+            skeleton: { type: Boolean },
+            readonly: { type: Boolean },
+            _candidate: { type: Number, attribute: false },
+            withDescription: { type: Boolean, attribute: 'with-description' },
+        };
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        :host {
+          --gv-icon--c: var(--gv-rating--c, var(--gv-theme-color, #5a7684));
+          --size: var(--gv-rating--s, 13px);
+          --gv-icon--s: var(--size);
+
+          font-size: var(--gv-theme-font-size-m, 14px);
+          cursor: default;
+        }
+
+        .content,
+        .rate {
+          justify-content: space-evenly;
+          display: inline-flex;
+          align-items: flex-end;
+          vertical-align: middle;
+          height: 100%;
+        }
+
+        .info-title {
+          font-size: var(--gv-theme-font-size-m, 14px);
+          line-height: 16px;
+          align-self: center;
+          min-width: 35px;
+          text-align: center;
+        }
+
+        .info-subtitle {
+          font-size: var(--gv-theme-font-size-xs, 10px);
+          line-height: 10px;
+          opacity: 0.5;
+          text-align: center;
+        }
+
+        .icon {
+          display: inline-flex;
+          align-self: center;
+          margin-right: calc(var(--size) / 4);
+          align-items: center;
+        }
+
+        .edit {
+          cursor: pointer;
+        }
+
+        .edit gv-icon:hover {
+          transform: translateY(-0.5px);
+        }
+
+        gv-input {
+          flex: 1;
+        }
+
+        .icon {
+          min-height: 30px;
+        }
+
+        .description {
+          min-width: 100px;
+          line-height: calc(var(--size) + 4px);
+          margin: auto 4px;
+        }
+      `,
+            skeleton,
+        ];
+    }
+    constructor() {
+        super();
+        this.value = 0;
+        this.count = 0;
+        this.readonly = false;
+        this._candidate = -1;
+        this.isSelected = false;
+    }
+    _getTitle() {
+        return `${this._getAverage()}/${MAX_RATE}`;
+    }
+    _onMouseEnter(index) {
+        this._candidate = index + 1;
+        if (this.withDescription) {
+            switch (this._candidate) {
+                case 1:
+                    this.description = i18n('gv-rating.description-1');
+                    break;
+                case 2:
+                    this.description = i18n('gv-rating.description-2');
+                    break;
+                case 3:
+                    this.description = i18n('gv-rating.description-3');
+                    break;
+                case 4:
+                    this.description = i18n('gv-rating.description-4');
+                    break;
+                case 5:
+                    this.description = i18n('gv-rating.description-5');
+                    break;
+            }
+        }
+    }
+    _onMouseOut() {
+        this._candidate = -1;
+        if (this.withDescription && !this.isSelected) {
+            this.description = null;
+        }
+    }
+    _onClick(index) {
+        this._candidate = -1;
+        this.isSelected = true;
+        this.value = index + 1;
+        this.dispatchEvent(new Event('input'), { bubbles: true, cancelable: true });
+    }
+    _getAverage() {
+        const _value = parseFloat(this.value);
+        if (_value >= 0 && _value <= MAX_RATE) {
+            return _value;
+        }
+        return 0;
+    }
+    _renderStar(star, index) {
+        if (this.readonly) {
+            return html `<gv-icon shape="general:${star}"></gv-icon>`;
+        }
+        else {
+            return html `<gv-icon
+        @mouseenter=${this._onMouseEnter.bind(this, index)}
+        @click=${this._onClick.bind(this, index)}
+        shape="general:${star}"
+      ></gv-icon>`;
+        }
+    }
+    render() {
+        const average = this._getAverage();
+        let trunc = average * 1;
+        if (!this.readonly) {
+            trunc = this._candidate > -1 ? this._candidate : average;
+        }
+        const stars = [];
+        for (let star = 1; star <= MAX_RATE; star += 1) {
+            if (trunc >= star) {
+                stars.push('star');
+            }
+            else if (trunc >= star - 0.7) {
+                stars.push('half-star');
+            }
+            else {
+                stars.push('no-star');
+            }
+        }
+        return html `
+      <div class="${classMap({ skeleton: this.skeleton, edit: !this.readonly, content: true })}">
+        <div class="${classMap({ content: true })}">
+          <div class="${classMap({ rate: true })}">
+            <div class="icon" title="${this._getTitle()}">
+              ${this.withDescription ? html `<div class="description">${this.description}</div>` : ''}
+              ${repeat(stars, (star) => star, (star, index) => html ` ${this._renderStar(star, index)} `)}
+            </div>
+            ${this.count
+            ? html `<div>
+                  <div class="info-title">${this.count || ''}</div>
+                  <div class="info-subtitle">${this._getCountTitle()}</div>
+                </div>`
+            : ''}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        if (!this.readonly) {
+            this.shadowRoot.querySelector('.edit').addEventListener('mouseout', this._onMouseOut.bind(this));
+        }
+    }
+    _getCountTitle() {
+        if (this.count) {
+            if (this.count > 1) {
+                return i18n('gv-rating.notes');
+            }
+            return i18n('gv-rating.note');
+        }
+        return '';
+    }
+}
+window.customElements.define('gv-rating', GvRating);

package/dist/src/molecules/gv-row-expandable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Expandable row
+ *  @extends GvExpandable
+ *
+ */
+export class GvRowExpandable extends GvExpandable {
+}
+import { GvExpandable } from "./gv-expandable";

package/dist/src/molecules/gv-row-expandable.js

@@ -0,0 +1,42 @@
+/*
+ * 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 } from 'lit';
+import { GvExpandable } from './gv-expandable';
+/**
+ * Expandable row
+ *  @extends GvExpandable
+ *
+ */
+export class GvRowExpandable extends GvExpandable {
+    constructor() {
+        super();
+        this.icon = 'general:other#2';
+        this.iconOpened = 'general:other#2';
+        this.clickable = true;
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        .box:hover {
+          background-color: var(--gv-theme-neutral-color, #f5f5f5);
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-row-expandable', GvRowExpandable);

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

@@ -0,0 +1,37 @@
+declare const GvRow_base: {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};
+/**
+ * Row component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Promise<any>} item - An item.
+ * @attr {Boolean} small - When true, not display labels
+ *
+ * @cssprop {Color} [--gv-row-hover--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Hoover background color
+ * @cssprop {Length} [--gv-row-hover--trf-ty=0px] - Hoover transform translateY
+ * @cssprop {Length} [--gv-row-image--h=35px] - Image height
+ * @cssprop {Length} [--gv-row-image--w=35px] - Image width
+ *
+ */
+export class GvRow extends GvRow_base {
+    static get styles(): any[];
+    static get properties(): any;
+    breakpoints: {
+        width: number[];
+    };
+    small: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,205 @@
+/*
+ * 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 { skeleton } from '../styles/skeleton';
+import { link } from '../styles/link';
+import { classMap } from 'lit/directives/class-map';
+import { i18n } from '../lib/i18n';
+import { ItemResource } from '../mixins/item-resource';
+import { withResizeObserver } from '../mixins/with-resize-observer';
+import { getOwner, getTitle, getDescription, getVersion } from '../lib/item';
+/**
+ * Row component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Promise<any>} item - An item.
+ * @attr {Boolean} small - When true, not display labels
+ *
+ * @cssprop {Color} [--gv-row-hover--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Hoover background color
+ * @cssprop {Length} [--gv-row-hover--trf-ty=0px] - Hoover transform translateY
+ * @cssprop {Length} [--gv-row-image--h=35px] - Image height
+ * @cssprop {Length} [--gv-row-image--w=35px] - Image width
+ *
+ */
+export class GvRow extends withResizeObserver(ItemResource(LitElement)) {
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          cursor: pointer;
+          --hover-bgc: var(--gv-row-hover--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
+          --trf-ty: var(--gv-row-hover--trf-ty, 0px);
+          display: block;
+        }
+
+        :host([_invisible]) {
+          display: none;
+        }
+
+        .row {
+          padding: 12px;
+        }
+
+        .row:hover {
+          -webkit-transform: -webkit-translateY(var(--trf-ty));
+          transform: translateY(var(--trf-ty));
+          background-color: var(--hover-bgc);
+        }
+
+        .row:not(.error) {
+          display: grid;
+          grid-template-columns: calc(var(--gv-row-image--w, 35px) + 5px) auto fit-content(20%);
+          grid-gap: 10px;
+          align-items: center;
+        }
+
+        :host([w-lt-450]) .meta {
+          display: none;
+        }
+
+        .row .name {
+          margin-right: 15px;
+        }
+
+        .row .name,
+        .row .meta__owner {
+          margin-bottom: 5px;
+        }
+
+        .row .version {
+          color: var(--gv-theme-neutral-color-dark, #d9d9d9);
+        }
+
+        .row .description {
+          --lh: 1.4rem;
+          --max-lines: 2;
+          max-height: calc(var(--lh) * var(--max-lines));
+          line-height: var(--lh);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-after-overflow: '...';
+        }
+
+        .row .meta {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+        }
+
+        .row .meta__owner {
+          --gv-icon--c: var(--gv-theme-neutral-color-dark, #d9d9d9);
+          --gv-icon--s: 16px;
+          color: var(--gv-theme-neutral-color-dark, #d9d9d9);
+          display: flex;
+        }
+
+        .row .meta__tags {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+
+        .skeleton {
+          transition: 0.5s;
+          min-height: 30px;
+          align-self: start;
+        }
+
+        .error {
+          cursor: default;
+          text-align: center;
+        }
+
+        gv-identity-picture {
+          height: var(--gv-row-image--h, 35px);
+          width: var(--gv-row-image--w, 35px);
+          border-radius: 20px;
+          --gv-image--of: contain;
+          align-self: baseline;
+        }
+
+        h3 {
+          margin: 0;
+        }
+
+        .row > .group {
+          display: flex;
+          flex-direction: column;
+          margin: 0 5px;
+          width: 100%;
+          flex: 1;
+        }
+
+        .title {
+          display: flex;
+          flex-direction: row;
+        }
+      `,
+            link,
+            skeleton,
+        ];
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            /** @required */
+            small: { type: Boolean },
+        };
+    }
+    constructor() {
+        super();
+        this.breakpoints = {
+            width: [450],
+        };
+        this.small = false;
+    }
+    render() {
+        const classes = {
+            row: true,
+            link: true,
+            error: !this._skeleton && (this._error || this._empty),
+        };
+        const owner = getOwner(this._item);
+        return html `
+      <div class=${classMap(classes)}>
+        ${!this._skeleton && (this._error || this._empty)
+            ? html `<div class="message">${this._error ? i18n('gv-row.error') : i18n('gv-row.empty')}</div>`
+            : html `
+              <div class="${classMap({ skeleton: this._skeleton })}">${this._renderImage()}</div>
+              <div class="${classMap({ group: true, skeleton: this._skeleton })}">
+                <div class="title">
+                  <h3 class="name">${getTitle(this._item)}</h3>
+                  <div class="version">${getVersion(this._item)}</div>
+                </div>
+                <div class="description">${getDescription(this._item)}</div>
+              </div>
+              <div class="${classMap({ meta: true, skeleton: this._skeleton })}">
+                <div class="meta__owner">
+                  ${owner != null && owner.trim().length > 0 ? html `<gv-icon shape="general:user" size="8px"></gv-icon>${owner}` : ''}
+                </div>
+                ${this.small !== true ? html `<div class="meta__tags">${this._renderLabels()}</div>` : ''}
+              </div>
+            `}
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-row', GvRow);

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

@@ -0,0 +1,53 @@
+declare const GvStats_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[];
+};
+/**
+ * Stats component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Object} stats - The stats (count by key). Key can be: count, min, max, avg, sum, rps, rpm or rph.
+ * @attr {Array<any>} options - The list of options to display.
+ */
+export class GvStats extends GvStats_base {
+    static get properties(): {
+        stats: {
+            type: ObjectConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+    };
+    _skeletonAttribute: string;
+    _getStat(option: any): import("lit-html").TemplateResult<1> | "<div></div>";
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,110 @@
+/*
+ * 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 { repeat } from 'lit/directives/repeat';
+import { classMap } from 'lit/directives/class-map';
+import { i18n } from '../lib/i18n';
+import { withSkeletonAttribute } from '../mixins/with-skeleton-attribute';
+/**
+ * Stats component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Object} stats - The stats (count by key). Key can be: count, min, max, avg, sum, rps, rpm or rph.
+ * @attr {Array<any>} options - The list of options to display.
+ */
+export class GvStats extends withSkeletonAttribute(LitElement) {
+    static get properties() {
+        return {
+            stats: { type: Object },
+            options: { type: Array },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        .stats {
+          align-content: center;
+          justify-content: center;
+          display: flex;
+          flex-wrap: wrap;
+          height: 100%;
+        }
+
+        .stats-container {
+          border: 1px solid;
+          border-radius: 8px;
+          margin: 15px;
+          padding: 15px;
+        }
+
+        .stats-value {
+          font-size: 30px;
+          text-align: center;
+        }
+
+        .stats-label {
+          font-size: 15px;
+          text-align: center;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._skeletonAttribute = 'stats';
+    }
+    _getStat(option) {
+        if (!this.stats) {
+            return '<div></div>';
+        }
+        let value = Math.round(this.stats[option.key]);
+        if (isNaN(value)) {
+            value = 0;
+        }
+        if (value === 0 && option.fallback) {
+            const fallback = option.fallback.find((fallback) => Math.round(this.stats[fallback.key]) > 0);
+            if (fallback) {
+                option.key = fallback.key;
+                option.label = fallback.label;
+                value = Math.round(this.stats[option.key]);
+            }
+        }
+        return html `
+      <div class="stats-container" style="color: ${option.color}">
+        <div class="stats-value">${value}${option.unit}</div>
+        <div class="stats-label">${option.label || option.key}</div>
+      </div>
+    `;
+    }
+    render() {
+        if (this._error) {
+            return html `<div class="error">${i18n('gv-stats.error')}</div>`;
+        }
+        if (this._empty) {
+            return html `<div class="empty">${i18n('gv-stats.empty')}</div>`;
+        }
+        return html `<div class="${classMap({ stats: true, skeleton: this._skeleton })}">
+      ${repeat(this.options, (option) => option, (option) => this._getStat(option))}
+    </div> `;
+    }
+}
+window.customElements.define('gv-stats', GvStats);