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

package/dist/src/atoms/gv-link.js

@@ -0,0 +1,204 @@
+/*
+ * 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 { skeleton } from '../styles/skeleton';
+import { link } from '../styles/link';
+import { classMap } from 'lit/directives/class-map';
+import { styleMap } from 'lit/directives/style-map';
+import { until } from 'lit/directives/until';
+import { dispatchCustomEvent } from '../lib/events';
+import './gv-icon';
+import { ifDefined } from 'lit/directives/if-defined';
+/**
+ * A link
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-link:click - Custom click event from inner link element
+ *
+ * @slot - The content of the link (text or HTML)
+ *
+ * @attr {Boolean} active - set if link is active
+ * @attr {String} path - link path
+ * @attr {String} title - link title
+ * @attr {String} target - link target
+ * @attr {String} help - help text left between parentheses
+ *
+ * @cssprop {Length} [--gv-link-a--pv=15px] - Vertical padding for the inner <a> tag
+ * @cssprop {Length} [--gv-link-a--ph=15px] - Horizontal padding for the inner <a> tag
+ * @cssprop {Color} [--gv-link--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-link-active--c=var(--gv-theme-font-color-light, #ffffff)] - Active color
+ * @cssprop {Color} [--gv-link--bgc=transparent] - Background color
+ * @cssprop {Color} [--gv-link-active--bgc=var(--gv-theme-color-dark, #28444f)] - Active background color
+ * @cssprop {Color} [--gv-link-active--bdc=none] - Active border color
+ * @cssprop {String} [--gv-link-active--bds=none] - Active border style
+ * @cssprop {Length} [--gv-link-active--bdw=none] - Active border width
+ * @cssprop {String} [--gv-link--ta=center] - Text align
+ * @cssprop {String} [--gv-link--td=none] - Text decoration
+ * @cssprop {String} [--gv-link--tsh=none]- Text shadow
+ * @cssprop {Length} [--gv-link-icon--s=24px] - Height and icon width
+ */
+export class GvLink extends LitElement {
+    static get properties() {
+        return {
+            active: { type: Boolean, reflect: true },
+            icon: { type: String },
+            path: { type: String },
+            title: { type: String },
+            target: { type: String },
+            _title: { type: String, attribute: false },
+            help: { type: String },
+            skeleton: { type: Boolean },
+            small: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            link,
+            // language=css
+            css `
+        :host {
+          display: inline-flex;
+          vertical-align: middle;
+          --gv-icon--s: var(--gv-link-icon--s, 24px);
+          --link-active--c: var(--gv-link-active--c, var(--gv-theme-font-color-light, #ffffff));
+          --link--c: var(--gv-link--c, var(--gv-theme-font-color-dark, #262626));
+          --pv: var(--gv-link-a--pv, 15px);
+          --ph: var(--gv-link-a--ph, 15px);
+        }
+
+        *,
+        *:before,
+        *:after {
+          box-sizing: border-box;
+        }
+
+        a {
+          opacity: 1;
+          padding: var(--pv) var(--ph);
+          color: var(--link--c);
+          background-color: var(--gv-link--bgc, transparent);
+          width: 100%;
+          display: inline-flex;
+          align-content: center;
+          text-align: var(--gv-link--ta, center);
+          text-shadow: var(--gv-link--tsh, none);
+          border-color: var(--gv-link--bgc, transparent);
+          border-style: var(--gv-link-active--bds, none);
+          border-width: var(--gv-link-active--bdw, none);
+        }
+
+        a > * {
+          align-self: center;
+        }
+
+        .active {
+          color: var(--link-active--c);
+          background-color: var(--gv-link-active--bgc, var(--gv-theme-color-dark, #28444f));
+          border-color: var(--gv-link-active--bdc, none);
+        }
+
+        .link.active:hover {
+          opacity: 1;
+        }
+
+        a span,
+        a gv-icon {
+          align-self: center;
+        }
+
+        a span {
+          flex: 1;
+          align-self: center;
+          white-space: nowrap;
+          margin: 0.3rem 0.5rem;
+          text-decoration: var(--gv-link--td, none);
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        a.small span {
+          margin: 0.3rem 0;
+          width: 0;
+          visibility: hidden;
+        }
+
+        .help {
+          margin: 0 0.2rem;
+          opacity: 0.5;
+          font-size: var(--gv-theme-font-size-xs, 10px);
+        }
+
+        .help::before {
+          content: '(';
+        }
+
+        .help::after {
+          content: ')';
+        }
+
+        .skeleton {
+          min-width: 100px;
+          margin: 0 0.2rem;
+          opacity: 0.5;
+        }
+      `,
+            skeleton,
+        ];
+    }
+    async _onClick(e) {
+        e.preventDefault();
+        dispatchCustomEvent(this, 'click', {
+            active: this.active,
+            icon: this.icon,
+            path: this.path,
+            title: this._title,
+            target: this.target,
+        });
+    }
+    set title(value) {
+        Promise.resolve(value)
+            .then((title) => {
+            this._title = title;
+        })
+            .catch((e) => { });
+    }
+    render() {
+        const classes = {
+            active: this.active,
+            link: true,
+            skeleton: this.skeleton,
+            small: this.small,
+        };
+        const iconStyle = this.active
+            ? { '--gv-icon--c': 'var(--link-active--c)', '--gv-icon-opacity--c': 'var(--link-active--c)' }
+            : { '--gv-icon--c': 'var(--link--c)', '--gv-icon-opacity--c': 'var(--link--c)' };
+        return html `
+      <a
+        @click=${this._onClick}
+        class="${classMap(classes)}"
+        .href="${ifDefined(this.path)}"
+        .target="${ifDefined(this.target)}"
+        ?title="${until(this._title, '')}"
+      >
+        ${this.icon ? html `<gv-icon shape=${this.icon} style=${styleMap(iconStyle)}></gv-icon>` : ''}
+        <span>${until(this._title, '')}${this.help ? html `<span class="help">${until(this.help, '')}</span>` : ''}</span>
+      </a>
+    `;
+    }
+}
+window.customElements.define('gv-link', GvLink);

package/dist/src/atoms/gv-message.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import './gv-icon';
+/**
+ * Message component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-message:close - Click event from inner button element
+ *
+ * @slot - The content of the button (text or HTML)
+ *
+ * @attr {String} type - type of the message. Can be default, success, error, warning or info.
+ * @attr {boolean} closable - determines if the message can be hidden.
+ */
+export declare class GvMessage extends LitElement {
+    private _close;
+    closable: boolean;
+    type: string;
+    static styles: import("lit").CSSResult;
+    private _onClick;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/atoms/gv-message.js

@@ -0,0 +1,133 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/*
+ * 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 { classMap } from 'lit/directives/class-map';
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { dispatchCustomEvent } from '../lib/events';
+import './gv-icon';
+/**
+ * Message component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-message:close - Click event from inner button element
+ *
+ * @slot - The content of the button (text or HTML)
+ *
+ * @attr {String} type - type of the message. Can be default, success, error, warning or info.
+ * @attr {boolean} closable - determines if the message can be hidden.
+ */
+let GvMessage = class GvMessage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._close = false;
+        this.closable = false;
+        this.type = '';
+    }
+    _onClick() {
+        this._close = true;
+        setTimeout(() => {
+            dispatchCustomEvent(this, 'close');
+        }, 250);
+    }
+    render() {
+        const modes = {
+            box: true,
+            simple: !this.type || (this.type !== 'info' && this.type !== 'success' && this.type !== 'error' && this.type !== 'warning'),
+            info: this.type === 'info',
+            warning: this.type === 'warning',
+            success: this.type === 'success',
+            error: this.type === 'error',
+            close: this._close,
+        };
+        return html `
+      <div class=${classMap(modes)}>
+        <div class="content">
+          <slot></slot>
+        </div>
+        ${this.closable ? html `<gv-icon shape="general:close" @click="${this._onClick}"></gv-icon>` : ''}
+      </div>
+    `;
+    }
+};
+GvMessage.styles = css `
+    :host {
+      display: block;
+      vertical-align: middle;
+    }
+
+    .box {
+      display: flex;
+      align-items: center;
+      font-style: normal;
+      font-weight: normal;
+      line-height: normal;
+      padding: 12px 0px;
+      text-align: center;
+      width: 100%;
+    }
+
+    .info {
+      background-color: var(--gv-theme-color-info-light, #64b5f6);
+    }
+
+    .success {
+      background-color: var(--gv-theme-color-success-light, #81c784);
+    }
+
+    .warning {
+      background-color: var(--gv-theme-color-warning-light, #ffb74d);
+    }
+
+    .error {
+      background-color: var(--gv-theme-color-error-light, #e57373);
+    }
+
+    .close {
+      transition: opacity 250ms ease-in-out;
+      opacity: 0;
+    }
+
+    gv-icon {
+      --gv-icon--s: 24px;
+      margin-right: 12px;
+    }
+
+    gv-icon:hover {
+      cursor: pointer;
+    }
+    .content {
+      flex: 1 1 auto;
+      margin-left: 12px;
+    }
+  `;
+__decorate([
+    property()
+], GvMessage.prototype, "closable", void 0);
+__decorate([
+    property()
+], GvMessage.prototype, "type", void 0);
+GvMessage = __decorate([
+    customElement('gv-message')
+], GvMessage);
+export { GvMessage };

package/dist/src/atoms/gv-metric.d.ts

@@ -0,0 +1,32 @@
+/**
+ * A Metric
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {String} icon - name of shape
+ * @attr {String} name - the name of the metric
+ * @attr {String} value - the value of the metric
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ *
+ * @cssprop {Color} [--gv-metric--c=var(--gv-theme-color, #5a7684)] - Color
+ * @cssprop {Length} [--gv-metric-icon--s=24px] - Height and icon width
+ */
+export class GvMetric extends LitElement {
+    static get properties(): {
+        icon: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+}
+import { LitElement } from "lit-element/lit-element";

package/dist/src/atoms/gv-metric.js

@@ -0,0 +1,112 @@
+/*
+ * 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 { classMap } from 'lit/directives/class-map';
+import { LitElement, html, css } from 'lit';
+import { skeleton } from '../styles/skeleton';
+import './gv-icon';
+/**
+ * A Metric
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {String} icon - name of shape
+ * @attr {String} name - the name of the metric
+ * @attr {String} value - the value of the metric
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ *
+ * @cssprop {Color} [--gv-metric--c=var(--gv-theme-color, #5a7684)] - Color
+ * @cssprop {Length} [--gv-metric-icon--s=24px] - Height and icon width
+ */
+export class GvMetric extends LitElement {
+    static get properties() {
+        return {
+            icon: { type: String },
+            name: { type: String },
+            value: { type: String },
+            skeleton: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+        }
+
+        .metric {
+          --gv-icon--s: var(--gv-metric-icon--s, 24px);
+          --gv-icon--c: var(--gv-metric--c, var(--gv-theme-color, #5a7684));
+          min-width: 75px;
+          height: 100%;
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+        }
+
+        .icon {
+          align-self: center;
+          margin-right: 4px;
+        }
+
+        div {
+          display: block;
+        }
+
+        .metric-data {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+
+        .metric-value {
+          font-size: var(--gv-theme-font-size-m, 14px);
+          line-height: var(--gv-theme-font-size-m, 14px);
+        }
+
+        .metric-name {
+          font-size: var(--gv-theme-font-size-xs, 10px);
+          line-height: var(--gv-theme-font-size-xs, 10px);
+          opacity: 0.5;
+        }
+      `,
+            skeleton,
+        ];
+    }
+    render() {
+        const modes = {
+            skeleton: this.skeleton,
+            metric: true,
+        };
+        return html `
+      <div class=${classMap(modes)}>
+        ${this.value
+            ? html `
+              <div class="icon">
+                <gv-icon shape="${this.icon}"></gv-icon>
+              </div>
+              <div class="metric-data">
+                <div class="metric-value">${this.value}</div>
+                <div class="metric-name">${this.name}</div>
+              </div>
+            `
+            : ''}
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-metric', GvMetric);

package/dist/src/atoms/gv-relative-time.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Component to display a localized humanized relative date (ex: "two minutes ago").
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @prop {String|Number} datetime - Date as ISO string or timestamp.
+ * @prop {Boolean} noFuture - Whether a date in future is allowed or not (useful when not sync).
+ */
+export class GvRelativeTime extends LitElement {
+    static get properties(): {
+        datetime: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        noFuture: {
+            type: BooleanConstructor;
+        };
+        _relativeTime: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        _updateIntervalId: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+    };
+    _formatter: {
+        new (locales?: string | string[] | undefined, options?: Intl.RelativeTimeFormatOptions | undefined): Intl.RelativeTimeFormat;
+        supportedLocalesOf(locales?: string | string[] | undefined, options?: Intl.RelativeTimeFormatOptions | undefined): string[];
+    } | null;
+    getFormatter(): Promise<{
+        new (locales?: string | string[] | undefined, options?: Intl.RelativeTimeFormatOptions | undefined): Intl.RelativeTimeFormat;
+        supportedLocalesOf(locales?: string | string[] | undefined, options?: Intl.RelativeTimeFormatOptions | undefined): string[];
+    }>;
+    set datetime(arg: any);
+    _datetime: any;
+    _formatDateInThePast(date: any): any;
+    _format(dateStr: any, lang: any): Promise<string | undefined>;
+    updateIntervalId: NodeJS.Timeout | null | undefined;
+}
+import { LitElement } from "lit-element/lit-element";

package/dist/src/atoms/gv-relative-time.js

@@ -0,0 +1,143 @@
+/*
+ * 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 { getLanguage, getAvailableLanguages } from '../lib/i18n';
+import { LitElement, html } from 'lit';
+import { until } from 'lit/directives/until';
+import { shouldPolyfill as shouldPolyfillIntlRelativeTimeFormat } from '@formatjs/intl-relativetimeformat/should-polyfill';
+const options = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    timeZoneName: 'short',
+};
+const UNITS = [
+    { unit: 'year', duration: 1000 * 60 * 60 * 24 * 365.25 },
+    { unit: 'month', duration: 1000 * 60 * 60 * 24 * (365.25 / 12) },
+    { unit: 'week', duration: 1000 * 60 * 60 * 24 * 7 },
+    { unit: 'day', duration: 1000 * 60 * 60 * 24 },
+    { unit: 'hour', duration: 1000 * 60 * 60 },
+    { unit: 'minute', duration: 1000 * 60 },
+    { unit: 'second', duration: 1000 },
+];
+/**
+ * Component to display a localized humanized relative date (ex: "two minutes ago").
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @prop {String|Number} datetime - Date as ISO string or timestamp.
+ * @prop {Boolean} noFuture - Whether a date in future is allowed or not (useful when not sync).
+ */
+export class GvRelativeTime extends LitElement {
+    static get properties() {
+        return {
+            datetime: { type: String },
+            title: { type: String, reflect: true },
+            noFuture: { type: Boolean },
+            _relativeTime: { type: String, attribute: false },
+            _updateIntervalId: { type: String, attribute: false },
+        };
+    }
+    constructor() {
+        super();
+        this._formatter = null;
+    }
+    async getFormatter() {
+        if (this._formatter == null) {
+            if (!shouldPolyfillIntlRelativeTimeFormat()) {
+                this._formatter = Intl.RelativeTimeFormat;
+                return this._formatter;
+            }
+            else {
+                // Load the needed polyfills 1st BEFORE loading data
+                return import('@formatjs/intl-locale/polyfill')
+                    .then(() => import('@formatjs/intl-relativetimeformat/polyfill'))
+                    .then(() => Promise.all([
+                    ...Object.values(getAvailableLanguages()).map((_lang) => {
+                        return import(`@formatjs/intl-relativetimeformat/locale-data/${_lang}`);
+                    }),
+                ]))
+                    .then(() => {
+                    this._formatter = Intl.RelativeTimeFormat;
+                    return this._formatter;
+                })
+                    .catch((err) => {
+                    console.error(err);
+                    throw new Error('Cannot load @formatjs/intl polyfills');
+                });
+            }
+        }
+        else {
+            return this._formatter;
+        }
+    }
+    set datetime(value) {
+        value = this.noFuture ? this._formatDateInThePast(value) : value;
+        const dtf = new Intl.DateTimeFormat(getLanguage(), options);
+        this.title = dtf.format(new Date(value));
+        this._datetime = value;
+    }
+    _formatDateInThePast(date) {
+        // to avoid to have date in the future in case of desynchronization between browser and server
+        if (date) {
+            const now = new Date();
+            if (now.getTime() < new Date(date).getTime()) {
+                date = now;
+            }
+        }
+        return date;
+    }
+    async _format(dateStr, lang) {
+        const Formatter = await this.getFormatter();
+        const format = (value, unit) => {
+            if (!isNaN(value)) {
+                return new Formatter(lang, { numeric: 'auto' }).format(-value, unit);
+            }
+        };
+        const now = new Date().getTime();
+        const diff = now - new Date(dateStr).getTime();
+        for (const { unit, duration } of UNITS) {
+            const value = diff / duration;
+            const roundedValue = Math.round(value);
+            if (Math.abs(value) >= 1) {
+                return format(roundedValue, unit);
+            }
+        }
+        return format(Math.round(diff / 1000), 'second');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.updateIntervalId == null) {
+            setTimeout(() => {
+                this.performUpdate();
+            });
+            this.updateIntervalId = setInterval(() => {
+                this.performUpdate();
+            }, 10 * 1000);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearInterval(this.updateIntervalId);
+        this.updateIntervalId = null;
+    }
+    render() {
+        return html `<span title="${this.title}">${until(this._format(this._datetime, getLanguage()))}</span>`;
+    }
+}
+window.customElements.define('gv-relative-time', GvRelativeTime);