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

package/src/molecules/gv-stats.js

@@ -1,121 +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 '../atoms/gv-button';
-import '../atoms/gv-tag';
-import { repeat } from 'lit/directives/repeat';
-import { classMap } from 'lit/directives/class-map';
-import { i18n } from '../lib/i18n';
-import { withSkeletonAttribute } from '../mixins/with-skeleton-attribute';
-
-/**
- * Stats component
- *
- * ## Details
- * * has @theme facet
- *
- * @attr {Object} stats - The stats (count by key). Key can be: count, min, max, avg, sum, rps, rpm or rph.
- * @attr {Array<any>} options - The list of options to display.
- */
-export class GvStats extends withSkeletonAttribute(LitElement) {
-  static get properties() {
-    return {
-      stats: { type: Object },
-      options: { type: Array },
-    };
-  }
-
-  static get styles() {
-    return [
-      ...super.styles,
-      // language=CSS
-      css`
-        .stats {
-          align-content: center;
-          justify-content: center;
-          display: flex;
-          flex-wrap: wrap;
-          height: 100%;
-        }
-
-        .stats-container {
-          border: 1px solid;
-          border-radius: 8px;
-          margin: 15px;
-          padding: 15px;
-        }
-
-        .stats-value {
-          font-size: 30px;
-          text-align: center;
-        }
-
-        .stats-label {
-          font-size: 15px;
-          text-align: center;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this._skeletonAttribute = 'stats';
-  }
-
-  _getStat(option) {
-    if (!this.stats) {
-      return '<div></div>';
-    }
-    let value = Math.round(this.stats[option.key]);
-    if (isNaN(value)) {
-      value = 0;
-    }
-    if (value === 0 && option.fallback) {
-      const fallback = option.fallback.find((fallback) => Math.round(this.stats[fallback.key]) > 0);
-      if (fallback) {
-        option.key = fallback.key;
-        option.label = fallback.label;
-        value = Math.round(this.stats[option.key]);
-      }
-    }
-
-    return html`
-      <div class="stats-container" style="color: ${option.color}">
-        <div class="stats-value">${value}${option.unit}</div>
-        <div class="stats-label">${option.label || option.key}</div>
-      </div>
-    `;
-  }
-
-  render() {
-    if (this._error) {
-      return html`<div class="error">${i18n('gv-stats.error')}</div>`;
-    }
-    if (this._empty) {
-      return html`<div class="empty">${i18n('gv-stats.empty')}</div>`;
-    }
-    return html`<div class="${classMap({ stats: true, skeleton: this._skeleton })}">
-      ${repeat(
-        this.options,
-        (option) => option,
-        (option) => this._getStat(option),
-      )}
-    </div> `;
-  }
-}
-
-window.customElements.define('gv-stats', GvStats);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvStats=void 0;const t=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const e=require("lit/directives/repeat"),s=require("lit/directives/class-map"),i=require("../lib/i18n"),r=require("../mixins/with-skeleton-attribute");class a extends((0,r.withSkeletonAttribute)(t.LitElement)){static get properties(){return{stats:{type:Object},options:{type:Array}}}static get styles(){return[...super.styles,t.css`.stats{align-content:center;justify-content:center;display:flex;flex-wrap:wrap;height:100%}.stats-container{border:1px solid;border-radius:8px;margin:15px;padding:15px}.stats-value{font-size:30px;text-align:center}.stats-label{font-size:15px;text-align:center}`]}constructor(){super(),this._skeletonAttribute="stats"}_getStat(e){if(!this.stats)return"<div></div>";let s=Math.round(this.stats[e.key]);if(isNaN(s)&&(s=0),0===s&&e.fallback){const t=e.fallback.find((t=>Math.round(this.stats[t.key])>0));t&&(e.key=t.key,e.label=t.label,s=Math.round(this.stats[e.key]))}return t.html`<div class="stats-container" style="color:${e.color}"><div class="stats-value">${s}${e.unit}</div><div class="stats-label">${e.label||e.key}</div></div>`}render(){return this._error?t.html`<div class="error">${(0,i.i18n)("gv-stats.error")}</div>`:this._empty?t.html`<div class="empty">${(0,i.i18n)("gv-stats.empty")}</div>`:t.html`<div class="${(0,s.classMap)({stats:!0,skeleton:this._skeleton})}">${(0,e.repeat)(this.options,(t=>t),(t=>this._getStat(t)))}</div>`}}exports.GvStats=a,window.customElements.define("gv-stats",a);

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

@@ -0,0 +1,46 @@
+/**
+ * Stepper component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-stepper:change - when step change
+ *
+ * @attr {Length} current - The current selected step
+ * @attr {Array} steps - Array of step {title: string, description: string, valid: boolean, invalid: boolean}
+ * @attr {Boolean} [disabled=false] - Indicate if stepper is disabled
+ *
+ * @cssprop {Color} [--gv-stepper-valid--bgc=var(--gv-theme-color, #5a7684)] - Valid background color
+ * @cssprop {Color} [--gv-stepper-passed--bdc=var(--gv-theme-color-light, #86c3d0)] - Passed border color
+ * @cssprop {Color} [--gv-stepper--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Background color
+ * @cssprop {Color} [--gv-stepper--bdc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Border color
+ * @cssprop {Color} [--gv-stepper--c=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Color
+ * @cssprop {Color} [--gv-stepper-passed--c=#595959] - Passed color
+ * @cssprop {Length} [--gv-stepper-icon--s=32px] - Height and icon width
+ */
+export class GvStepper extends LitElement {
+    static get properties(): {
+        current: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        steps: {
+            type: ArrayConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        _error: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    current: number;
+    _steps: any[];
+    _error: boolean;
+    _empty: boolean;
+    _onClick(index: any): void;
+    _getIcon(step: any): import("lit-html").TemplateResult<1>;
+    _getStep(step: any, index: any): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/molecules/gv-stepper.js

@@ -1,288 +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 { link } from '../styles/link';
-import { dispatchCustomEvent } from '../lib/events';
-import { i18n } from '../lib/i18n';
-
-/**
- * Stepper component
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-stepper:change - when step change
- *
- * @attr {Length} current - The current selected step
- * @attr {Array} steps - Array of step {title: string, description: string, valid: boolean, invalid: boolean}
- * @attr {Boolean} [disabled=false] - Indicate if stepper is disabled
- *
- * @cssprop {Color} [--gv-stepper-valid--bgc=var(--gv-theme-color, #5a7684)] - Valid background color
- * @cssprop {Color} [--gv-stepper-passed--bdc=var(--gv-theme-color-light, #86c3d0)] - Passed border color
- * @cssprop {Color} [--gv-stepper--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Background color
- * @cssprop {Color} [--gv-stepper--bdc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Border color
- * @cssprop {Color} [--gv-stepper--c=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Color
- * @cssprop {Color} [--gv-stepper-passed--c=#595959] - Passed color
- * @cssprop {Length} [--gv-stepper-icon--s=32px] - Height and icon width
- */
-export class GvStepper extends LitElement {
-  static get properties() {
-    return {
-      current: { type: Number, reflect: true },
-      steps: { type: Array },
-      disabled: { type: Boolean },
-      _error: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      link,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          --passed--bgc: var(--gv-stepper-valid--bgc, var(--gv-theme-color, #5a7684));
-          --passed--bdc: var(--gv-stepper-passed--bdc, var(--gv-theme-color-light, #86c3d0));
-          --bdc: var(--gv-stepper--bdc, var(--gv-theme-neutral-color-dark, #bfbfbf));
-          --bgc: var(--gv-stepper--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf));
-          --passed--c: var(--gv-stepper-passed--c, #595959);
-          --c: var(--gv-stepper--c, var(--gv-theme-neutral-color-dark, #bfbfbf));
-        }
-
-        .stepper {
-          display: flex;
-          justify-content: center;
-        }
-
-        .disabled .step {
-          cursor: not-allowed;
-        }
-
-        .step {
-          display: flex;
-          flex-direction: column;
-          cursor: pointer;
-        }
-
-        .graph {
-          display: flex;
-          flex-direction: row;
-          min-height: 22px;
-          min-width: 250px;
-        }
-
-        .round {
-          min-width: 6px;
-          width: 6px;
-          min-height: 6px;
-          height: 6px;
-          border-radius: 50%;
-          margin: 2px 7px 2px 7px;
-        }
-
-        .border {
-          margin-top: 4px;
-          min-width: 100px;
-          width: 100%;
-          height: 2px;
-          clear: both;
-        }
-
-        .round {
-          background-color: var(--bgc);
-          transition: all 0.2s ease-in;
-        }
-
-        .border {
-          background-color: var(--bdc);
-          margin-bottom: 5px;
-          transition: all 0.2s ease-in;
-        }
-
-        .passed .round {
-          background-color: var(--passed--bgc);
-        }
-
-        .passed .border {
-          background-color: var(--passed--bdc);
-        }
-
-        .passed .round {
-          height: 10px;
-          width: 10px;
-          min-height: 10px;
-          min-width: 10px;
-          margin: 0 5px 0 5px;
-        }
-
-        .first .border:first-of-type {
-          visibility: hidden;
-        }
-
-        .end .border:last-of-type {
-          visibility: hidden;
-        }
-
-        .content {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-
-          padding: 5px;
-          line-height: 24px;
-          font-size: var(--gv-theme-font-size-l, 16px);
-          color: var(--c);
-        }
-
-        .passed .content {
-          color: var(--passed--c);
-        }
-
-        .title {
-          font-weight: bold;
-        }
-
-        .description {
-          font-size: var(--gv-theme-font-size-m, 14px);
-        }
-
-        .error {
-          text-align: center;
-        }
-
-        .circle {
-          border: 1px solid var(--passed--bgc);
-          margin-top: -12px;
-          border-radius: 50%;
-          animation: validate 0.2s ease-in;
-        }
-
-        .invalid.circle {
-        }
-
-        gv-icon {
-          --gv-icon--c: var(--passed--bgc);
-          --gv-icon--s: var(--gv-stepper-icon--s, 32px);
-        }
-
-        .invalid gv-icon {
-          --gv-icon--c: var(--gv-theme-color-danger);
-        }
-
-        @keyframes validate {
-          from {
-            opacity: 0;
-          }
-          to {
-            opacity: 1;
-          }
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.current = 0;
-    this._steps = [];
-    this._error = false;
-    this._empty = true;
-  }
-
-  _onClick(index) {
-    if (this.disabled !== true) {
-      this.current = index + 1;
-      dispatchCustomEvent(this, 'change', { current: this.current });
-    }
-  }
-
-  async performUpdate() {
-    await Promise.all([this.steps, this.current])
-      .then(([steps, current]) => {
-        this._steps = steps.map((step, _index) => {
-          step.passed = step.valid === true || (current > 0 && _index + 1 <= current);
-          return step;
-        });
-        this._error = false;
-        this._empty = !(this._steps && this._steps.length > 0);
-      })
-      .catch(() => {
-        this._error = true;
-        this._empty = false;
-      });
-    super.performUpdate();
-  }
-
-  _getIcon(step) {
-    if (step.invalid) {
-      return html`<div class="circle invalid"><gv-icon shape="code:error"></gv-icon></div>`;
-    }
-    if (step.valid) {
-      return html`<div class="circle"><gv-icon shape="code:check"></gv-icon></div>`;
-    }
-    return html`<div class="round"></div>`;
-  }
-
-  _getStep(step, index) {
-    const classes = {
-      passed: step.passed,
-      valid: step.valid,
-      step: true,
-      first: index === 0,
-      end: index === this._steps.length - 1,
-    };
-
-    const contentClasses = {
-      content: true,
-      link: !this.disabled,
-    };
-    return html`
-      <div class="${classMap(classes)}" @click="${this._onClick.bind(this, index)}" title="${step.title}">
-        <div class="graph">
-          <div class="border"></div>
-          ${this._getIcon(step)}
-          <div class="border"></div>
-        </div>
-        <div class="${classMap(contentClasses)}">
-          <div class="title">${step.title}</div>
-          <div class="description">${step.description}</div>
-        </div>
-      </div>
-    `;
-  }
-
-  render() {
-    if (this._error) {
-      return html`<div class="error">${i18n('gv-stepper.error')}</div>`;
-    }
-    if (this._empty) {
-      return html`<div></div>`;
-    }
-    const classes = { stepper: true, disabled: this.disabled };
-    return html`<div class="${classMap(classes)}">
-      ${repeat(
-        this._steps,
-        (step) => step,
-        (step, index) => this._getStep(step, index),
-      )}
-    </div> `;
-  }
-}
-
-window.customElements.define('gv-stepper', GvStepper);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvStepper=void 0;const e=require("lit"),t=require("lit/directives/repeat"),r=require("lit/directives/class-map"),i=require("../styles/link"),s=require("../lib/events"),a=require("../lib/i18n");class d extends e.LitElement{static get properties(){return{current:{type:Number,reflect:!0},steps:{type:Array},disabled:{type:Boolean},_error:{type:Boolean}}}static get styles(){return[i.link,e.css`:host{box-sizing:border-box;--passed--bgc:var(--gv-stepper-valid--bgc, var(--gv-theme-color, #5a7684));--passed--bdc:var(--gv-stepper-passed--bdc, var(--gv-theme-color-light, #86c3d0));--bdc:var(--gv-stepper--bdc, var(--gv-theme-neutral-color-dark, #bfbfbf));--bgc:var(--gv-stepper--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf));--passed--c:var(--gv-stepper-passed--c, #595959);--c:var(--gv-stepper--c, var(--gv-theme-neutral-color-dark, #bfbfbf))}.stepper{display:flex;justify-content:center}.disabled .step{cursor:not-allowed}.step{display:flex;flex-direction:column;cursor:pointer}.graph{display:flex;flex-direction:row;min-height:22px;min-width:250px}.round{min-width:6px;width:6px;min-height:6px;height:6px;border-radius:50%;margin:2px 7px 2px 7px}.border{margin-top:4px;min-width:100px;width:100%;height:2px;clear:both}.round{background-color:var(--bgc);transition:all .2s ease-in}.border{background-color:var(--bdc);margin-bottom:5px;transition:all .2s ease-in}.passed .round{background-color:var(--passed--bgc)}.passed .border{background-color:var(--passed--bdc)}.passed .round{height:10px;width:10px;min-height:10px;min-width:10px;margin:0 5px 0 5px}.first .border:first-of-type{visibility:hidden}.end .border:last-of-type{visibility:hidden}.content{display:flex;flex-direction:column;align-items:center;padding:5px;line-height:24px;font-size:var(--gv-theme-font-size-l,16px);color:var(--c)}.passed .content{color:var(--passed--c)}.title{font-weight:700}.description{font-size:var(--gv-theme-font-size-m,14px)}.error{text-align:center}.circle{border:1px solid var(--passed--bgc);margin-top:-12px;border-radius:50%;animation:validate .2s ease-in}gv-icon{--gv-icon--c:var(--passed--bgc);--gv-icon--s:var(--gv-stepper-icon--s, 32px)}.invalid gv-icon{--gv-icon--c:var(--gv-theme-color-danger)}@keyframes validate{from{opacity:0}to{opacity:1}}`]}constructor(){super(),this.current=0,this._steps=[],this._error=!1,this._empty=!0}_onClick(e){!0!==this.disabled&&(this.current=e+1,(0,s.dispatchCustomEvent)(this,"change",{current:this.current}))}async performUpdate(){await Promise.all([this.steps,this.current]).then((([e,t])=>{this._steps=e.map(((e,r)=>(e.passed=!0===e.valid||t>0&&r+1<=t,e))),this._error=!1,this._empty=!(this._steps&&this._steps.length>0)})).catch((()=>{this._error=!0,this._empty=!1})),super.performUpdate()}_getIcon(t){return t.invalid?e.html`<div class="circle invalid"><gv-icon shape="code:error"></gv-icon></div>`:t.valid?e.html`<div class="circle"><gv-icon shape="code:check"></gv-icon></div>`:e.html`<div class="round"></div>`}_getStep(t,i){const s={passed:t.passed,valid:t.valid,step:!0,first:0===i,end:i===this._steps.length-1},a={content:!0,link:!this.disabled};return e.html`<div class="${(0,r.classMap)(s)}" @click="${this._onClick.bind(this,i)}" title="${t.title}"><div class="graph"><div class="border"></div>${this._getIcon(t)}<div class="border"></div></div><div class="${(0,r.classMap)(a)}"><div class="title">${t.title}</div><div class="description">${t.description}</div></div></div>`}render(){if(this._error)return e.html`<div class="error">${(0,a.i18n)("gv-stepper.error")}</div>`;if(this._empty)return e.html`<div></div>`;const i={stepper:!0,disabled:this.disabled};return e.html`<div class="${(0,r.classMap)(i)}">${(0,t.repeat)(this._steps,(e=>e),((e,t)=>this._getStep(e,t)))}</div>`}}exports.GvStepper=d,window.customElements.define("gv-stepper",d);

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

@@ -0,0 +1,159 @@
+declare const GvTable_base: {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};
+/**
+ * Table component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-table:select - when table row is selected
+ * @fires gv-table:mouseenter - when the pointer is entering on a table row
+ * @fires gv-table:mouseleave - when the pointer is leaving a table row
+ * @fires gv-table:sort - when the order is changed
+ *
+ * @attr {Array<any>} items - A list of items to display
+ * @attr {String} title - A title to display
+ * @attr {String} order - If defined, the table will be ordered by the field. Start with '-' to sort in desc
+ * @attr {Array<any>} options - The list of options to display
+ * @attr {Boolean} noheader - Used to hide the table header
+ * @attr {Boolean} nosort - Used to disable the click on header to sort
+ * @attr {String} rowsheight - The height of the table rows
+ * @attr {String} rowheight - The height of the table single row
+ * @attr {String} emptymessage - The empty message to display
+ * @attr {Function} format - A function to format table headers and string cells
+ * @attr {Function} compareFn - A function to define how to sort. Default function will sort selected field ignoring case
+ * @attr {Array<any>} selected - A list of selected ids of the items displayed
+ * @attr {String} total - Total of data displayed on the table (useful with in case of pagination)
+ * @attr {Boolean} skeleton - Force gv-table to be in skeleton mode
+ *
+ * @cssprop {Color} [--gv-table-selected--bgc=var(--gv-theme-color, #5a7684)] - Selected background color
+ * @cssprop {Color} [--gv-table-hover--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Row background color on hover
+ * @cssprop {Color} [--gv-table--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-table--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {String} [--gv-table-header--fz=var(--gv-theme-font-size-l, 20px)] - Title font size
+ * @cssprop {Length} [--gv-table-header--p=2rem 4rem] - Title padding
+ * @cssprop {String} [--gv-table-rows--ov=auto] - Overflow on table
+ * @cssprop {Length} [--gv-table--colmg=0.2rem] - Column gap
+ * @cssprop {String} [--gv-table-row--ai=center] - Row align-items
+ * @cssprop {String} [--gv-table-row--ac=center] - Row align-content
+ * @cssprop {String} [--gv-table-cell--d=flex] - Cell display
+ */
+export class GvTable extends GvTable_base {
+    static get properties(): {
+        items: {
+            type: ArrayConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        order: {
+            type: StringConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        noheader: {
+            type: BooleanConstructor;
+        };
+        nosort: {
+            type: BooleanConstructor;
+        };
+        rowsheight: {
+            type: StringConstructor;
+        };
+        rowheight: {
+            type: StringConstructor;
+        };
+        emptymessage: {
+            type: StringConstructor;
+        };
+        format: {
+            type: FunctionConstructor;
+        };
+        compareFn: {
+            type: FunctionConstructor;
+        };
+        selected: {
+            type: ArrayConstructor;
+            reflect: boolean;
+        };
+        total: {
+            type: StringConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        _items: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _skeleton: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _empty: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _itemsProvider: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _page: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _id: number;
+    breakpoints: {
+        width: number[];
+    };
+    _empty: boolean;
+    order: string;
+    _page: number;
+    _itemsProvider: any[];
+    selected: any[];
+    compareFn: (item: any, item2: any, value: any) => any;
+    set items(arg: any[]);
+    get items(): any[];
+    _skeleton: boolean | undefined;
+    _error: boolean | undefined;
+    _onSortChanged(field: any, e: any): void;
+    get _items(): any[];
+    _getItemId(item: any): any;
+    _onSelect(item: any, event: any): void;
+    get selectedItems(): any[];
+    _onMouseEnter(item: any): void;
+    _onMouseLeave(): void;
+    _renderHeader(styleGridColumns: any): "" | import("lit-html").TemplateResult<1>;
+    _renderIcon(item: any, itemIndex: any, option: any): "" | import("lit-html").TemplateResult<1>;
+    _renderComponent(item: any, itemIndex: any, option: any, value: any, type: any): any;
+    _renderCell(formattedValue: any, option: any, item: any, itemIndex: any): any;
+    _getFormattedCellValue(option: any, item: any): any;
+    _isSelected(item: any): boolean;
+    _renderRows(styleGridColumns: any): import("lit-html").TemplateResult<1>;
+    _renderItems(): import("lit-html").TemplateResult<1>;
+    _renderPagination(): import("lit-html").TemplateResult<1> | undefined;
+    _getDataFromField(item: any, field: any): any;
+    _renderTag(option: any, item: any): "" | import("lit-html").TemplateResult<1>;
+    _onImageLoaded(): void;
+    _renderImage(picture: any, alt: any): import("lit-html").TemplateResult<1>;
+    updated(props: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};