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

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.d.ts

@@ -0,0 +1,64 @@
+/**
+ * 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(): {
+        _toChange: {
+            type: BooleanConstructor;
+        };
+        /**
+         * If true the modal box is in opened status.
+         */
+        opened: {
+            type: BooleanConstructor;
+        };
+        /**
+         * If true the modal box displays a close icon
+         */
+        showCloseIcon: {
+            type: BooleanConstructor;
+        };
+        /**
+         * The title of the modal dialog
+         */
+        modalTitle: {
+            type: StringConstructor;
+        };
+        /**
+         * 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: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _toChange: boolean;
+    opened: boolean;
+    showCloseIcon: boolean;
+    blocking: boolean;
+    getModalClass(opened: any, _toChange: any): "transparent" | "transparent opened" | "opaque" | undefined;
+    open(): void;
+    _backgroundModalClick(e: any): void;
+    close(): void;
+    animationEnd(): void;
+    contentClick(e: any): void;
+}
+import { LitElement } from "lit-element/lit-element";

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);

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

@@ -0,0 +1,41 @@
+/**
+ * A main nav
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-nav:click - Custom event when nav item is clicked
+ *
+ * @attr {Array<{active: Boolean, icon: String, path: String, title: Promise<String>, target: String}>} routes - definition of routes
+ */
+export class GvNav extends LitElement {
+    static get properties(): {
+        routes: {
+            type: ArrayConstructor;
+        };
+        _routes: {
+            type: ArrayConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        _compact: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        vertical: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _onClick(event: any): void;
+    _isLocked: boolean | undefined;
+    /** @protected */
+    protected _routes: any[];
+    vertical: boolean;
+    set routes(arg: any);
+    _getLink(route: any, index: any): Promise<void | import("lit-html").TemplateResult<1>>;
+    _compact: boolean | undefined;
+}
+import { LitElement } from "lit-element/lit-element";

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

@@ -0,0 +1,180 @@
+/*
+ * 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 { LitElement, html, css } from 'lit';
+import { repeat } from 'lit/directives/repeat';
+import '../atoms/gv-link';
+import { until } from 'lit/directives/until';
+import { isSameRoutes } from '../lib/utils';
+import { dispatchCustomEvent } from '../lib/events';
+import { classMap } from 'lit/directives/class-map';
+/**
+ * A main nav
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-nav:click - Custom event when nav item is clicked
+ *
+ * @attr {Array<{active: Boolean, icon: String, path: String, title: Promise<String>, target: String}>} routes - definition of routes
+ */
+export class GvNav extends LitElement {
+    static get properties() {
+        return {
+            routes: { type: Array },
+            _routes: { type: Array },
+            small: { type: Boolean },
+            _compact: { type: Boolean, attribute: false },
+            vertical: { type: Boolean, reflect: true },
+        };
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        nav {
+          position: relative;
+          transition: all 150ms ease-in-out;
+        }
+
+        gv-link {
+          --gv-link--ta: end;
+        }
+
+        .vertical {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .vertical gv-link {
+          width: 100%;
+        }
+
+        .compact {
+          --gv-link-a--ph: 10px;
+        }
+
+        #shadowLink {
+          position: absolute;
+          display: inline-flex;
+          opacity: 0.5;
+          top: 0;
+          left: 0;
+          transition: transform 250ms ease-in-out, width 250ms;
+        }
+      `,
+        ];
+    }
+    _onClick(event) {
+        event.stopPropagation();
+        const { detail } = event;
+        const { title, target } = detail;
+        if (target === '_blank') {
+            dispatchCustomEvent(this, 'click', detail);
+        }
+        else {
+            if (!this._isLocked) {
+                this._isLocked = true;
+                let nextIndex = 0;
+                this._routes.forEach((route, index) => {
+                    if (route.title === title) {
+                        route.active = true;
+                        nextIndex = index;
+                    }
+                    else {
+                        delete route.active;
+                    }
+                    return route;
+                });
+                const activeLink = this.shadowRoot.querySelector('gv-link[active]');
+                const nextLink = this.shadowRoot.querySelectorAll('gv-link')[nextIndex];
+                if (activeLink) {
+                    const shadowLink = activeLink.cloneNode(true);
+                    const { height, width } = activeLink.getBoundingClientRect();
+                    shadowLink.id = 'shadowLink';
+                    shadowLink.style.top = `${activeLink.offsetTop}px`;
+                    shadowLink.style.left = `${activeLink.offsetLeft}px`;
+                    shadowLink.style.width = `${width}px`;
+                    shadowLink.style.height = `${height}px`;
+                    activeLink.removeAttribute('active');
+                    activeLink.style.height = `${height}px`;
+                    this.shadowRoot.querySelector('nav').prepend(shadowLink);
+                    const left = nextLink.offsetLeft - activeLink.offsetLeft;
+                    const top = nextLink.offsetTop - activeLink.offsetTop;
+                    shadowLink.style.transform = `translate(${left}px,${top}px)`;
+                    setTimeout(() => {
+                        nextLink.setAttribute('active', true);
+                        this.shadowRoot.querySelector('nav').removeChild(shadowLink);
+                        this._isLocked = false;
+                        dispatchCustomEvent(this, 'click', detail);
+                    }, 250);
+                }
+                else {
+                    nextLink.setAttribute('active', true);
+                    this._isLocked = false;
+                    dispatchCustomEvent(this, 'click', detail);
+                }
+            }
+        }
+    }
+    constructor() {
+        super();
+        /** @protected */
+        this._routes = [];
+        this.vertical = false;
+    }
+    set routes(routes) {
+        if (routes) {
+            Promise.resolve(routes).then((_routes) => {
+                if (!isSameRoutes(this._routes, _routes)) {
+                    this._routes = _routes;
+                }
+            });
+        }
+    }
+    _getLink(route, index) {
+        return Promise.resolve(route)
+            .then((_route) => {
+            return html ` <gv-link
+          @gv-link:click=${this._onClick}
+          .active="${_route.active}"
+          .icon="${_route.icon}"
+          .path="${_route.path}"
+          .target="${_route.target}"
+          ?small="${this.small}"
+          .title="${_route.title}"
+          .help="${until(_route.help, null)}"
+          ?vertical="${this.vertical}"
+        ></gv-link>`;
+        })
+            .catch(() => {
+            delete this._routes[index];
+        });
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('_routes')) {
+            this._compact = this._routes && this._routes.length > 5;
+        }
+    }
+    render() {
+        if (this._routes) {
+            return html `<nav class="${classMap({ compact: this._compact, vertical: this.vertical })}">
+        ${repeat(this._routes, (route) => route, (route, index) => until(this._getLink(route, index), html `<gv-link skeleton .vertical="${this.vertical}"></gv-link>`))}
+      </nav>`;
+        }
+        return html ``;
+    }
+}
+window.customElements.define('gv-nav', GvNav);

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

@@ -0,0 +1,65 @@
+/**
+ * Option component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Array<{id, title, icon?, active?, description?, label?}>} options - An array of options.
+ * @attr {String|Array} value - Selected value id, array with multiple option ids.
+ * @attr {Boolean} multiple - If true, can choose several option
+ * @attr {Boolean} reverse - If true, title and description are reversed.
+ * @attr {Boolean} small - If true, use small button for options
+ * @attr {Boolean} outlined - If true, use outlined button for options
+ *
+ * @cssprop {Color} [--gv-option--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Background color
+ * @cssprop {Length} [--gv-option--bdrs=0.15rem] - Border radius
+ * @cssprop {Length} [--gv-option-button--maw=200px] - Button max width
+ * @cssprop {Length} [--gv-option-icon--s=64px] - Icon size
+ */
+export class GvOption extends LitElement {
+    static get properties(): {
+        options: {
+            type: ArrayConstructor;
+        };
+        _options: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _hasDescription: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        multiple: {
+            type: BooleanConstructor;
+        };
+        reverse: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        outlined: {
+            type: BooleanConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    multiple: boolean;
+    reverse: boolean;
+    _onClick(option: any): void;
+    setValue(option: any): void;
+    value: any;
+    set options(arg: any);
+    _options: any[] | undefined;
+    _hasDescription: boolean | undefined;
+    isActive(option: any): any;
+    _renderOption(option: any, index: any): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from "lit-element/lit-element";