@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

package/src/molecules/gv-list.js

@@ -1,227 +1 @@
-/*
- * 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);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvList=void 0;const e=require("lit"),t=require("lit/directives/repeat"),i=require("lit/directives/class-map"),s=require("../lib/i18n"),r=require("../styles/link");require("../molecules/gv-identity-picture");const l=require("../lib/events"),n=require("../lib/item"),a=require("../mixins/with-skeleton-attribute");class o extends((0,a.withSkeletonAttribute)(e.LitElement)){static get properties(){return{...super.styles,items:{type:Object},title:{type:String},clickable:{type:Boolean},_items:{type:Object,attribute:!1}}}static get styles(){return[...super.styles,r.link,e.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,#fff));--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:.6;letter-spacing:.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:.9;letter-spacing:.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:.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(e){(0,l.dispatchCustomEvent)(this,"click",e)}_renderImage(t){return e.html`<gv-identity-picture .picture="${(0,n.getPicture)(t)}" .display_name="${(0,n.getPictureDisplayName)(t)}"></gv-identity-picture>`}_renderStatus(t){if(t){if(t.filter((e=>"PAUSED"===e.status.toUpperCase())).length>0)return e.html`<gv-icon title="${(0,s.i18n)("gv-list.paused")}" shape="media:pause"></gv-icon>`;if(t.filter((e=>"PENDING"===e.status.toUpperCase())).length>0)return e.html`<gv-icon title="${(0,s.i18n)("gv-list.pending")}" shape="home:timer"></gv-icon>`}return""}_renderItem(t){return t?e.html`<div class="item__image">${this._renderImage(t.item)}</div><div class="item__content"><h4 class="item__title">${this._renderStatus(t.subscriptions)}${t.item.name} <span>${(0,n.getVersion)(t.item)}</span></h4><div class="item__description">${t.item.description}</div></div>`:e.html`<p>xxxx-xxxx-xxxx-xxxx</p>`}_renderItems(){return this._empty&&!this._skeleton?"":this._skeleton?e.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>`:e.html`<ul class="list"><h3>${this.title?this.title:""} ${this._items&&this._items.length>0?e.html`<span>(${this._items.length})</span>`:""}</h3><div class="scrollable-container">${this._items?(0,t.repeat)(this._items,(e=>e),(t=>this.clickable?e.html`<li class="${(0,i.classMap)({item:!0,link:!0})}" @click="${this._onClick.bind(this,t)}">${this._renderItem(t)}</li>`:e.html`<li class="${(0,i.classMap)({item:!0})}">${this._renderItem(t)}</li>`)):""}</div></ul>`}render(){return e.html`<div>${this._error?e.html`<div class="error">${(0,s.i18n)("gv-list.error")}</div>`:this._renderItems()}</div>`}}exports.GvList=o,window.customElements.define("gv-list",o);

package/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 {};

package/src/molecules/gv-metrics.js

@@ -1,162 +1 @@
-/*
- * 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);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvMetrics=void 0;const t=require("lit");require("../atoms/gv-metric");const e=require("../lib/i18n"),i=require("../styles/link"),s=require("../mixins/with-skeleton-attribute"),r=require("lit/directives/class-map"),c=require("../lib/events"),l=require("lit/directives/if-defined");class n extends((0,s.withSkeletonAttribute)(t.LitElement)){static get properties(){return{metrics:{type:Object},_metrics:{type:Object,attribute:!1}}}static get styles(){return[...super.styles,i.link,t.css`:host{box-sizing:border-box;margin:.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=!1,this._error=!1,this._empty=!1}_isClickable(t){return!(!this._metrics||"object"!=typeof this._metrics[t])&&this._metrics[t].clickable}_getValue(t){return"object"==typeof t?t.value:t}_getSubscribers(){return this._metrics?this._getValue(this._metrics.subscribers):null}_getHits(){return this._metrics?this._getValue(this._metrics.hits):null}_getHealth(){if(this._metrics){const t=this._getValue(this._metrics.health);return isNaN(t)?"":Intl.NumberFormat.call(this,navigator.language,{style:"percent",maximumFractionDigits:2}).format(t)}return null}_getTitle(t){return this._metrics&&"object"==typeof this._metrics[t]?this._metrics[t].title:null}_onClick(t){(0,c.dispatchCustomEvent)(this,"click",{key:t})}_renderMetric(e,i,s,c){const n=this._isClickable(e);return c||this._skeleton?t.html`<gv-metric @click="${n?this._onClick.bind(this,e):null}" .skeleton="${this._skeleton}" icon="${i}" name="${s}" value="${c}" class="${(0,r.classMap)({link:n})}" title="${(0,l.ifDefined)(this._getTitle(e))}"></gv-metric>`:t.html``}render(){if(this._error)return t.html`<div class="error">${(0,e.i18n)("gv-metrics.error")}</div>`;const i=this._getSubscribers(),s=this._getHits(),r=this._getHealth();return t.html`${this._renderMetric("subscribers","communication:group",(0,e.i18n)("gv-metrics.subscribers",{count:i}),i)} ${this._renderMetric("hits","general:cursor",(0,e.i18n)("gv-metrics.hits",{count:s}),s)} ${this._renderMetric("health","general:heart",(0,e.i18n)("gv-metrics.health"),r)}<slot></slot>`}}exports.GvMetrics=n,window.customElements.define("gv-metrics",n);

package/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";