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

package/src/mixins/with-skeleton-attribute.js

@@ -1,112 +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 } from 'lit';
-import { skeleton } from '../styles/skeleton';
-import { empty } from '../styles/empty';
-
-const timeBeforeSkeleton = 500;
-const minimumTimeOfSkeleton = 1000;
-
-/**
- * This is a mixin for withSkeletonStates
- * @mixinFunction
- */
-export function withSkeletonAttribute(ParentClass) {
-  /**
-   * @mixinClass
-   */
-  return class extends ParentClass {
-    static get properties() {
-      return {
-        /** @required */
-        _invisible: { type: Boolean, reflect: true },
-        _skeleton: { type: Boolean, attribute: false },
-        _error: { type: Boolean, attribute: false },
-        _empty: { type: Boolean, attribute: false },
-      };
-    }
-
-    static get styles() {
-      return [
-        skeleton,
-        empty,
-        // language=CSS
-        css`
-          :host([_invisible]) {
-            visibility: hidden;
-          }
-        `,
-      ];
-    }
-
-    constructor() {
-      super();
-      this._invisible = true;
-      this._skeleton = false;
-      this._error = false;
-      this._empty = false;
-    }
-
-    updated(changedProperties) {
-      if (this._skeletonAttribute != null && changedProperties.has(this._skeletonAttribute)) {
-        this._error = false;
-        this._empty = false;
-        const start = new Date().getTime();
-        let end = null;
-        const timer = setTimeout(() => {
-          this._invisible = false;
-          this._skeleton = true;
-          end = new Date().getTime();
-        }, timeBeforeSkeleton);
-
-        const attribute = this[this._skeletonAttribute];
-        Promise.resolve(attribute)
-          .then((value) => {
-            clearTimeout(timer);
-            if (end && end - start < minimumTimeOfSkeleton) {
-              setTimeout(() => {
-                this[this._skeletonAttribute] = value;
-              }, minimumTimeOfSkeleton - (end - start));
-            } else {
-              this._invisible = value === undefined;
-              this._skeleton = value === null;
-              if (value) {
-                if (Array.isArray(value)) {
-                  this._empty = value.length === 0;
-                } else {
-                  this._empty = Object.keys(value).length === 0;
-                }
-                this[`_${this._skeletonAttribute}`] = value;
-              }
-            }
-          })
-          .catch((err) => {
-            clearTimeout(timer);
-            if (end && end - start < minimumTimeOfSkeleton) {
-              setTimeout(() => {
-                this[this._skeletonAttribute] = Promise.reject(err);
-              }, minimumTimeOfSkeleton - (end - start));
-            } else {
-              this._error = true;
-              this._skeleton = false;
-              this._empty = false;
-              this._invisible = false;
-            }
-          });
-      }
-    }
-  };
-}
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.withSkeletonAttribute=void 0;const t=require("lit"),e=require("../styles/skeleton"),i=require("../styles/empty");exports.withSkeletonAttribute=function(s){return class extends s{static get properties(){return{_invisible:{type:Boolean,reflect:!0},_skeleton:{type:Boolean,attribute:!1},_error:{type:Boolean,attribute:!1},_empty:{type:Boolean,attribute:!1}}}static get styles(){return[e.skeleton,i.empty,t.css`:host([_invisible]){visibility:hidden}`]}constructor(){super(),this._invisible=!0,this._skeleton=!1,this._error=!1,this._empty=!1}updated(t){if(null!=this._skeletonAttribute&&t.has(this._skeletonAttribute)){this._error=!1,this._empty=!1;const t=(new Date).getTime();let e=null;const i=setTimeout((()=>{this._invisible=!1,this._skeleton=!0,e=(new Date).getTime()}),500),s=this[this._skeletonAttribute];Promise.resolve(s).then((s=>{clearTimeout(i),e&&e-t<1e3?setTimeout((()=>{this[this._skeletonAttribute]=s}),1e3-(e-t)):(this._invisible=void 0===s,this._skeleton=null===s,s&&(Array.isArray(s)?this._empty=0===s.length:this._empty=0===Object.keys(s).length,this[`_${this._skeletonAttribute}`]=s))})).catch((s=>{clearTimeout(i),e&&e-t<1e3?setTimeout((()=>{this[this._skeletonAttribute]=Promise.reject(s)}),1e3-(e-t)):(this._error=!0,this._skeleton=!1,this._empty=!1,this._invisible=!1)}))}}}};

package/src/molecules/gv-card-full.d.ts

@@ -0,0 +1,78 @@
+declare const GvCardFull_base: {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _onImageLoaded(): void;
+        _skeleton: boolean;
+        _renderImage(): "" | import("lit-html").TemplateResult<1>;
+        _onTagClick(tagValue: any, event: any): void;
+        _renderLabels(clickable: any): unknown;
+        _renderStates(): unknown;
+        _onClickToMetrics(event: any): void;
+        _renderMetricsWithRating(): "" | import("lit-html").TemplateResult<1>;
+        _renderInfoRating(): "" | import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _error: boolean;
+        _empty: boolean;
+        updated(changedProperties: any): void;
+    };
+    readonly properties: {
+        item: {
+            type: ObjectConstructor;
+        };
+        href: {
+            type: StringConstructor;
+        };
+        metrics: {
+            type: ObjectConstructor;
+        };
+        _item: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _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[];
+};
+/**
+ * Full Card component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-card-full:click - Custom click event
+ * @fires gv-tag:click - Custom click event on card labels
+ *
+ * @attr {Promise<Object>} item - An item.
+ * @attr {Promise<Metrics>} metrics - A Metrics.
+ *
+ * @cssprop {Color} [--gv-card-full--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Length} [--gv-card-full-image--h=65px] - Image height
+ * @cssprop {Length} [--gv-card-full-image--w=110px] - Image width
+ */
+export class GvCardFull extends GvCardFull_base {
+    static get properties(): {
+        metrics: {
+            type: ObjectConstructor;
+        };
+    };
+    limit: number;
+    _onClick(e: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/molecules/gv-card-full.js

@@ -1,218 +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 { skeleton } from '../styles/skeleton';
-import { classMap } from 'lit/directives/class-map';
-import '../atoms/gv-image';
-import '../atoms/gv-button';
-import '../molecules/gv-metrics';
-import '../molecules/gv-rating';
-import '../atoms/gv-state';
-import '../atoms/gv-tag';
-import { truncate } from '../lib/utils';
-import { i18n } from '../lib/i18n';
-import { ItemResource } from '../mixins/item-resource';
-import { dispatchCustomEvent } from '../lib/events';
-import { getVersion, getTitle, getDescription, getOwner } from '../lib/item';
-
-/**
- * Full Card component
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-card-full:click - Custom click event
- * @fires gv-tag:click - Custom click event on card labels
- *
- * @attr {Promise<Object>} item - An item.
- * @attr {Promise<Metrics>} metrics - A Metrics.
- *
- * @cssprop {Color} [--gv-card-full--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
- * @cssprop {Length} [--gv-card-full-image--h=65px] - Image height
- * @cssprop {Length} [--gv-card-full-image--w=110px] - Image width
- */
-export class GvCardFull extends ItemResource(LitElement) {
-  static get properties() {
-    return {
-      metrics: { type: Object },
-    };
-  }
-
-  static get styles() {
-    return [
-      ...super.styles,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: inline-block;
-          margin: 0.2rem;
-
-          vertical-align: middle;
-          width: 100%;
-          max-height: 281px;
-          line-height: 22px;
-          font-size: var(--gv-theme-font-size-m, 14px);
-        }
-
-        gv-identity-picture {
-          height: var(--gv-card-full-image--h, 65px);
-          width: var(--gv-card-full-image--w, 110px);
-          --gv-image--of: contain;
-        }
-
-        .card {
-          display: flex;
-          flex-direction: column;
-          height: 250px;
-          border-radius: 4px;
-          background-color: var(--gv-card-full--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
-          color: var(--gv-theme-font-color-dark, #262626);
-          padding: 16px;
-          box-shadow: 0 0 0 1px var(--gv-theme-neutral-color, #f5f5f5), 0 1px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
-          transition: transform 0.3s;
-        }
-
-        .card:hover {
-          transform: translateY(-4px);
-          box-shadow: 0 20px 40px -14px var(--gv-theme-neutral-color-dark, #bfbfbf);
-          cursor: pointer;
-        }
-
-        .card > div {
-          display: flex;
-        }
-
-        .image {
-          min-height: 65px;
-          min-width: 0;
-          position: relative;
-          padding-top: 0.2rem;
-        }
-
-        .title {
-          line-height: 22px;
-          font-size: var(--gv-theme-font-size-l, 16px);
-          text-transform: capitalize;
-          font-weight: bold;
-          padding-bottom: 5px;
-        }
-
-        .owner {
-          --gv-icon--c: var(--gv-theme-neutral-color-dark, #bfbfbf);
-          --gv-icon--s: 16px;
-          color: var(--gv-theme-neutral-color-dark, #bfbfbf);
-          display: flex;
-          padding-bottom: 2px;
-          line-height: initial;
-        }
-
-        .content {
-          flex: 1;
-          padding: 0 10px 10px 10px;
-        }
-
-        .version {
-          color: var(--gv-theme-neutral-color-dark, #d9d9d9);
-          padding: 10px 8px;
-          font-size: var(--gv-theme-font-size-s, 12px);
-        }
-
-        .description {
-          padding: 0 16px;
-          margin: 6px 0;
-          flex: 1;
-          flex-grow: 1;
-          max-height: 150px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .infos {
-          display: flex;
-          border-bottom: 1px solid var(--gv-theme-neutral-color-dark, #d9d9d9);
-          padding: 0.5rem 0;
-          justify-content: flex-end;
-        }
-
-        gv-metrics {
-          display: flex;
-          height: 100%;
-          justify-content: flex-end;
-          align-items: stretch;
-        }
-
-        .skeleton .infos {
-          border-bottom: none;
-        }
-
-        .labels {
-          padding: 0 16px;
-        }
-
-        .error .labels,
-        .error .infos,
-        .error .states {
-          visibility: hidden;
-        }
-      `,
-      skeleton,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.limit = 150;
-  }
-
-  _onClick(e) {
-    if (!this._empty && !this._error && !this._skeleton && !e.target.tagName.toLowerCase().startsWith('gv-metrics')) {
-      dispatchCustomEvent(this, 'click', this._item);
-    }
-  }
-
-  render() {
-    const title = getTitle(this._item);
-    const owner = getOwner(this._item);
-    const classes = { error: this._error || this._empty, card: true };
-    return html`<div class="${classMap(classes)}" title="${title}" @click="${this._onClick}">
-      <div class="${classMap({ skeleton: this._skeleton })}">
-        <div class="${classMap({ image: true })}">${this._renderImage()}</div>
-        <div class="content">
-          <div class="${classMap({ title: true })}">${title}</div>
-          ${owner != null && owner.trim().length > 0
-            ? html`<div class="owner"><gv-icon shape="general:user" size="8px"></gv-icon>${owner}</div>`
-            : ''}
-          <div class="states">${this._renderStates()}</div>
-        </div>
-        <div class="version"><span class="${classMap({ skeleton: this._skeleton })}">${getVersion(this._item)}</span></div>
-      </div>
-      <div class="${classMap({ skeleton: this._skeleton, description: true })}">
-        ${truncate(
-          this._error ? i18n('gv-card-full.error') : this._empty ? i18n('gv-card-full.empty') : getDescription(this._item),
-          this.limit,
-        )}
-      </div>
-      <span class="${classMap({ skeleton: this._skeleton })}">
-        <div class="infos">${this._renderMetricsWithRating()}</div>
-
-        <div class="labels">${this._renderLabels(true)}</div>
-      </span>
-    </div>`;
-  }
-}
-
-window.customElements.define('gv-card-full', GvCardFull);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCardFull=void 0;const e=require("lit"),t=require("../styles/skeleton"),i=require("lit/directives/class-map");require("../atoms/gv-image"),require("../atoms/gv-button"),require("../molecules/gv-metrics"),require("../molecules/gv-rating"),require("../atoms/gv-state"),require("../atoms/gv-tag");const r=require("../lib/utils"),s=require("../lib/i18n"),l=require("../mixins/item-resource"),a=require("../lib/events"),o=require("../lib/item");class n extends((0,l.ItemResource)(e.LitElement)){static get properties(){return{metrics:{type:Object}}}static get styles(){return[...super.styles,e.css`:host{box-sizing:border-box;display:inline-block;margin:.2rem;vertical-align:middle;width:100%;max-height:281px;line-height:22px;font-size:var(--gv-theme-font-size-m,14px)}gv-identity-picture{height:var(--gv-card-full-image--h,65px);width:var(--gv-card-full-image--w,110px);--gv-image--of:contain}.card{display:flex;flex-direction:column;height:250px;border-radius:4px;background-color:var(--gv-card-full--bgc,var(--gv-theme-neutral-color-lightest,#fff));color:var(--gv-theme-font-color-dark,#262626);padding:16px;box-shadow:0 0 0 1px var(--gv-theme-neutral-color,#f5f5f5),0 1px 3px var(--gv-theme-neutral-color-dark,#bfbfbf);transition:transform .3s}.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -14px var(--gv-theme-neutral-color-dark,#bfbfbf);cursor:pointer}.card>div{display:flex}.image{min-height:65px;min-width:0;position:relative;padding-top:.2rem}.title{line-height:22px;font-size:var(--gv-theme-font-size-l,16px);text-transform:capitalize;font-weight:700;padding-bottom:5px}.owner{--gv-icon--c:var(--gv-theme-neutral-color-dark, #bfbfbf);--gv-icon--s:16px;color:var(--gv-theme-neutral-color-dark,#bfbfbf);display:flex;padding-bottom:2px;line-height:initial}.content{flex:1;padding:0 10px 10px 10px}.version{color:var(--gv-theme-neutral-color-dark,#d9d9d9);padding:10px 8px;font-size:var(--gv-theme-font-size-s,12px)}.description{padding:0 16px;margin:6px 0;flex:1;flex-grow:1;max-height:150px;overflow:hidden;text-overflow:ellipsis}.infos{display:flex;border-bottom:1px solid var(--gv-theme-neutral-color-dark,#d9d9d9);padding:.5rem 0;justify-content:flex-end}gv-metrics{display:flex;height:100%;justify-content:flex-end;align-items:stretch}.skeleton .infos{border-bottom:none}.labels{padding:0 16px}.error .infos,.error .labels,.error .states{visibility:hidden}`,t.skeleton]}constructor(){super(),this.limit=150}_onClick(e){this._empty||this._error||this._skeleton||e.target.tagName.toLowerCase().startsWith("gv-metrics")||(0,a.dispatchCustomEvent)(this,"click",this._item)}render(){const t=(0,o.getTitle)(this._item),l=(0,o.getOwner)(this._item),a={error:this._error||this._empty,card:!0};return e.html`<div class="${(0,i.classMap)(a)}" title="${t}" @click="${this._onClick}"><div class="${(0,i.classMap)({skeleton:this._skeleton})}"><div class="${(0,i.classMap)({image:!0})}">${this._renderImage()}</div><div class="content"><div class="${(0,i.classMap)({title:!0})}">${t}</div>${null!=l&&l.trim().length>0?e.html`<div class="owner"><gv-icon shape="general:user" size="8px"></gv-icon>${l}</div>`:""}<div class="states">${this._renderStates()}</div></div><div class="version"><span class="${(0,i.classMap)({skeleton:this._skeleton})}">${(0,o.getVersion)(this._item)}</span></div></div><div class="${(0,i.classMap)({skeleton:this._skeleton,description:!0})}">${(0,r.truncate)(this._error?(0,s.i18n)("gv-card-full.error"):this._empty?(0,s.i18n)("gv-card-full.empty"):(0,o.getDescription)(this._item),this.limit)}</div><span class="${(0,i.classMap)({skeleton:this._skeleton})}"><div class="infos">${this._renderMetricsWithRating()}</div><div class="labels">${this._renderLabels(!0)}</div></span></div>`}}exports.GvCardFull=n,window.customElements.define("gv-card-full",n);

package/src/molecules/gv-card-list.d.ts

@@ -0,0 +1,33 @@
+declare const GvCardList_base: {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};
+/**
+ * List of cards
+ *
+ * ## Details
+ * * has @theme facet
+ */
+export class GvCardList extends GvCardList_base {
+    static get properties(): {
+        items: {
+            type: ArrayConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    breakpoints: {
+        width: number[];
+    };
+    renderItem(item: any, index: any): import("lit-html").TemplateResult<1>;
+    render(): "" | import("lit-html").TemplateResult<1>;
+    updated(changedProperties: any): void;
+}
+export {};

package/src/molecules/gv-card-list.js

@@ -1,113 +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 { repeat } from 'lit/directives/repeat';
-import { withResizeObserver } from '../mixins/with-resize-observer';
-import { i18n } from '../lib/i18n';
-import './gv-card-full';
-
-/**
- * List of cards
- *
- * ## Details
- * * has @theme facet
- */
-export class GvCardList extends withResizeObserver(LitElement) {
-  static get properties() {
-    return {
-      items: { type: Array },
-    };
-  }
-
-  constructor() {
-    super();
-    this.breakpoints = {
-      width: [845, 1270],
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          grid-gap: 0.5rem;
-        }
-
-        :host([w-lt-1270]) .container {
-          grid-template-columns: repeat(2, 1fr);
-        }
-
-        :host([w-lt-845]) .container {
-          display: flex;
-          flex-direction: column;
-        }
-
-        :host([w-lt-845]) .container > .item {
-          flex: 0 1 auto;
-        }
-
-        .item {
-          opacity: 0;
-          transition: opacity 100ms ease-in-out;
-        }
-
-        .item.show {
-          opacity: 1;
-        }
-      `,
-    ];
-  }
-
-  renderItem(item, index) {
-    const _item = item && item.item ? item.item : null;
-    const _metrics = item && item.metrics ? item.metrics : null;
-    return html`<gv-card-full class="item" .item="${_item}" .metrics="${_metrics}"> </gv-card-full>`;
-  }
-
-  render() {
-    if (this._error) {
-      return html`<div>${i18n('gv-card-list.error')}</div>`;
-    }
-
-    if (this.items) {
-      return html`${repeat(
-        this.items,
-        (item) => item,
-        (item, index) => this.renderItem(item, index),
-      )}`;
-    }
-    return '';
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('items')) {
-      if (this.items && this.items.length > 0) {
-        const items = this.shadowRoot.querySelectorAll('.item');
-        items.forEach((item, index) => {
-          setTimeout(() => {
-            item.classList.add('show');
-          }, index * 100);
-        });
-      }
-    }
-  }
-}
-
-window.customElements.define('gv-card-list', GvCardList);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCardList=void 0;const e=require("lit"),t=require("lit/directives/repeat"),i=require("../mixins/with-resize-observer"),r=require("../lib/i18n");require("./gv-card-full");class s extends((0,i.withResizeObserver)(e.LitElement)){static get properties(){return{items:{type:Array}}}constructor(){super(),this.breakpoints={width:[845,1270]}}static get styles(){return[e.css`:host{box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:.5rem}:host([w-lt-1270]) .container{grid-template-columns:repeat(2,1fr)}:host([w-lt-845]) .container{display:flex;flex-direction:column}:host([w-lt-845]) .container>.item{flex:0 1 auto}.item{opacity:0;transition:opacity .1s ease-in-out}.item.show{opacity:1}`]}renderItem(t,i){const r=t&&t.item?t.item:null,s=t&&t.metrics?t.metrics:null;return e.html`<gv-card-full class="item" .item="${r}" .metrics="${s}"></gv-card-full>`}render(){return this._error?e.html`<div>${(0,r.i18n)("gv-card-list.error")}</div>`:this.items?e.html`${(0,t.repeat)(this.items,(e=>e),((e,t)=>this.renderItem(e,t)))}`:""}updated(e){if(e.has("items")&&this.items&&this.items.length>0){this.shadowRoot.querySelectorAll(".item").forEach(((e,t)=>{setTimeout((()=>{e.classList.add("show")}),100*t)}))}}}exports.GvCardList=s,window.customElements.define("gv-card-list",s);

package/src/molecules/gv-card.d.ts

@@ -0,0 +1,65 @@
+declare const GvCard_base: {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _onImageLoaded(): void;
+        _skeleton: boolean;
+        _renderImage(): "" | import("lit-html").TemplateResult<1>;
+        _onTagClick(tagValue: any, event: any): void;
+        _renderLabels(clickable: any): unknown;
+        _renderStates(): unknown;
+        _onClickToMetrics(event: any): void;
+        _renderMetricsWithRating(): "" | import("lit-html").TemplateResult<1>;
+        _renderInfoRating(): "" | import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _error: boolean;
+        _empty: boolean;
+        updated(changedProperties: any): void;
+    };
+    readonly properties: {
+        item: {
+            type: ObjectConstructor;
+        };
+        href: {
+            type: StringConstructor;
+        };
+        metrics: {
+            type: ObjectConstructor;
+        };
+        _item: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _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[];
+};
+/**
+ * Card component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Promise<any>} item - An item.
+ *
+ * @cssprop {Color} [--gv-card--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ */
+export class GvCard extends GvCard_base {
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};