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

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.js

@@ -0,0 +1,147 @@
+/*
+ * 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 '../atoms/gv-metric';
+import { i18n } from '../lib/i18n';
+import { link } from '../styles/link';
+import { withSkeletonAttribute } from '../mixins/with-skeleton-attribute';
+import { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+import { ifDefined } from 'lit/directives/if-defined';
+/**
+ * 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 withSkeletonAttribute(LitElement) {
+    static get properties() {
+        return {
+            metrics: { type: Object },
+            _metrics: { type: Object, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            link,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          margin: 0.2rem;
+          width: 100%;
+          height: 100%;
+          min-height: 25px;
+          min-width: 25px;
+          display: flex;
+          width: 100%;
+        }
+
+        :host > * {
+          flex: 1 1 auto;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._skeletonAttribute = 'metrics';
+        this.skeleton = false;
+        this._error = false;
+        this._empty = false;
+    }
+    _isClickable(metricName) {
+        if (this._metrics && typeof this._metrics[metricName] === 'object') {
+            return this._metrics[metricName].clickable;
+        }
+        return false;
+    }
+    _getValue(metric) {
+        if (typeof metric === 'object') {
+            return metric.value;
+        }
+        return metric;
+    }
+    _getSubscribers() {
+        if (this._metrics) {
+            return this._getValue(this._metrics.subscribers);
+        }
+        return null;
+    }
+    _getHits() {
+        if (this._metrics) {
+            return this._getValue(this._metrics.hits);
+        }
+        return null;
+    }
+    _getHealth() {
+        if (this._metrics) {
+            const health = this._getValue(this._metrics.health);
+            return !isNaN(health)
+                ? Intl.NumberFormat.call(this, navigator.language, {
+                    style: 'percent',
+                    maximumFractionDigits: 2,
+                }).format(health)
+                : '';
+        }
+        return null;
+    }
+    _getTitle(metricName) {
+        if (this._metrics && typeof this._metrics[metricName] === 'object') {
+            return this._metrics[metricName].title;
+        }
+        return null;
+    }
+    _onClick(key) {
+        dispatchCustomEvent(this, 'click', { key });
+    }
+    _renderMetric(key, icon, name, value) {
+        const clickable = this._isClickable(key);
+        return value || this._skeleton
+            ? html `<gv-metric
+          @click="${clickable ? this._onClick.bind(this, key) : null}"
+          .skeleton="${this._skeleton}"
+          icon="${icon}"
+          name="${name}"
+          value="${value}"
+          class="${classMap({ link: clickable })}"
+          title="${ifDefined(this._getTitle(key))}"
+        ></gv-metric>`
+            : html ``;
+    }
+    render() {
+        if (this._error) {
+            return html `<div class="error">${i18n('gv-metrics.error')}</div>`;
+        }
+        const subscribers = this._getSubscribers();
+        const hits = this._getHits();
+        const health = this._getHealth();
+        return html `
+      ${this._renderMetric('subscribers', 'communication:group', i18n('gv-metrics.subscribers', { count: subscribers }), subscribers)}
+      ${this._renderMetric('hits', 'general:cursor', i18n('gv-metrics.hits', { count: hits }), hits)}
+      ${this._renderMetric('health', 'general:heart', i18n('gv-metrics.health'), health)}
+      <slot></slot>
+    `;
+    }
+}
+window.customElements.define('gv-metrics', GvMetrics);

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

@@ -0,0 +1,203 @@
+/*
+ * Copyright (C) 2021 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 { LitElement, html, css } from 'lit';
+import '../atoms/gv-icon';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * A modal that shows up on top of your page
+ *
+ * @fires gv-modal:closed - Event fired when modal is closed.
+ *
+ * @cssprop {Length} [--gv-modal--anim-duration=0.3s] - Duration of the animation
+ * @cssprop {Length} [--gv-modal--z=100] - z-index for modal
+ * @cssprop {Color} [--gv-modal--bgc=rgba(30, 30, 30, 0.6)] - Modal background color
+ * @cssprop {Length} [--gv-modal-content--z=101] - z-index for modal content
+ * @cssprop {Length} [--gv-modal--w=280px] - model width
+ * @cssprop {Length} [--gv-modal--miw=250px] - modal min-width
+ * @cssprop {Length} [--gv-modal--maw=100vw] - modal max-width
+ * @cssprop {Length} [--gv-modal--h=auto] - modal height
+ * @cssprop {Length} [--gv-modal--mih=auto] - modal min height
+ * @cssprop {Length} [--gv-modal--mah=100vh] - modal max height
+ * @cssprop {Color} [--gv-modal-content--bgc=var(--gv-theme-neutral-color-light, #efefef)] - Modal content background color
+ * @cssprop {String} [--gv-modal--bxsh=0px 0px 16px #383e3f] - Modal box shadow
+ * @cssprop {Length} [--gv-modal--bdrs=4px] - Modal border radius
+ * @cssprop {Length} [--gv-modal--p=1em] - Modal content padding
+ * @cssprop {Length} [--gv-modal-close-icon--s=24px] - Modal close icon size
+ */
+export class GvModal extends LitElement {
+    static get properties() {
+        return {
+            _toChange: { type: Boolean },
+            /**
+             * If true the modal box is in opened status.
+             */
+            opened: { type: Boolean },
+            /**
+             * If true the modal box displays a close icon
+             */
+            showCloseIcon: { type: Boolean },
+            /**
+             * The title of the modal dialog
+             */
+            // ⚠️ it cannot be simply named `title` otherwise the browser consider it
+            // as a `title` property and use it to display a tooltip
+            modalTitle: { type: String },
+            /**
+             * If true the modal box blocks the screen. That is, when you click in the background layer, the modal box do not close.
+             */
+            blocking: { type: Boolean },
+        };
+    }
+    constructor() {
+        super();
+        this._toChange = false;
+        this.opened = false;
+        this.showCloseIcon = false;
+        this.blocking = false;
+    }
+    static get styles() {
+        return [
+            // language=css
+            css `
+        * {
+          box-sizing: border-box;
+        }
+        :host {
+          display: block;
+        }
+        section {
+          position: fixed;
+          left: 0;
+          top: 0;
+          height: 100vh;
+          width: 100vw;
+          display: none;
+          transition: opacity var(--gv-modal--anim-duration, 0.3s) ease-in;
+          -webkit-transition: opacity var(--gv-modal--anim-duration, 0.3s) ease-in;
+          align-items: center;
+          justify-content: center;
+          z-index: var(--gv-modal--z, 100);
+          background-color: var(--gv-modal--bgc, rgba(30, 30, 30, 0.6));
+        }
+        .content {
+          display: block;
+          position: relative;
+          z-index: var(--gv-modal-content--z, 101);
+          width: var(--gv-modal--w, 280px);
+          min-width: var(--gv-modal--miw, 250px);
+          max-width: var(--gv-modal--maw, 100vw);
+          height: var(--gv-modal--h, auto);
+          min-height: var(--gv-modal--mih, auto);
+          max-height: var(--gv-modal--mah, 100vh);
+          background-color: var(--gv-modal-content--bgc, var(--gv-theme-neutral-color-light, #efefef));
+          box-shadow: var(--gv-modal--bxsh, 0px 0px 16px #383e3f);
+          border-radius: var(--gv-modal--bdrs, 4px);
+          padding: var(--gv-modal--p, 1em);
+        }
+        article {
+          overflow: auto;
+          max-height: 100%;
+          height: 100%;
+        }
+        .transparent {
+          opacity: 0;
+        }
+        .opaque {
+          opacity: 1;
+          display: flex !important;
+        }
+        .opened {
+          display: flex !important;
+        }
+        .header {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          padding-bottom: 10px;
+        }
+        .title {
+          font-weight: bold;
+          font-size: large;
+        }
+        gv-icon {
+          --gv-icon--s: var(--gv-modal-close-icon--s, 24px);
+          display: inline-block;
+          z-index: 1002;
+          cursor: pointer;
+        }
+      `,
+        ];
+    }
+    render() {
+        return html `
+      <section
+        class="${this.getModalClass(this.opened, this._toChange)}"
+        @click="${this._backgroundModalClick}"
+        @transitionend="${this.animationEnd}"
+      >
+        <div class="content" @click="${this.contentClick}">
+          <div class="header">
+            <span class="title">${this.modalTitle}</span>
+            ${this.showCloseIcon ? html `<gv-icon shape="general:close" @click="${this.close}"></gv-icon>` : ''}
+          </div>
+          <article>
+            <slot></slot>
+          </article>
+        </div>
+      </section>
+    `;
+    }
+    getModalClass(opened, _toChange) {
+        if (!opened && !_toChange) {
+            return 'transparent';
+        }
+        if (opened && _toChange) {
+            return 'transparent opened';
+        }
+        if (opened && !_toChange) {
+            return 'opaque';
+        }
+        if (!opened && _toChange) {
+            return 'transparent opened';
+        }
+    }
+    open() {
+        this.opened = true;
+        this._toChange = true;
+        setTimeout(() => {
+            this._toChange = false;
+        }, 50);
+    }
+    _backgroundModalClick(e) {
+        if (!this.blocking) {
+            this.close();
+            dispatchCustomEvent(this, 'closed');
+        }
+    }
+    close() {
+        this.opened = false;
+        this._toChange = true;
+        dispatchCustomEvent(this, 'closed');
+    }
+    animationEnd() {
+        this._toChange = false;
+    }
+    contentClick(e) {
+        e.stopPropagation();
+    }
+}
+window.customElements.define('gv-modal', GvModal);