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

package/src/molecules/gv-expression-language.js

@@ -1,270 +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 { GvCode } from '../molecules/gv-code';
-import { dispatchCustomEvent } from '../lib/events';
-import { pickedCompletion, startCompletion } from '@codemirror/autocomplete';
-import { keymap } from '@codemirror/view';
-import { EditorSelection, Prec } from '@codemirror/state';
-import { get } from 'object-path';
-
-/**
- * Expression Language component
- *
- * @fires gv-expression-language:input - input events with the `value` on `detail`
- * @fires gv-expression-language:ready - event dispatch when component is ready
- * @fires gv-expression-language:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
- *
- * @attr {String} label - code language
- * @attr {String} value - code content to be highlighted
- * @attr {options} Object - options based on codemirror
- * @attr {String} placeholder - an example value to display in the input when empty
- * @attr {Number} rows - number of rows of the text element
- * @attr {Boolean} large - for a large input (only if the field has one row)
- * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
- * @attr {Boolean} small - for a small input (only if the field has one row)
- * @attr {Object} grammar - The grammar for Expression Language support
- *
- * @attr {Boolean} [clipboard=false]- true if field has clipboard button
- * @attr {Boolean} [autofocus=false] - true to put the focus on the input
- * @attr {Boolean} [readonly=false] - true if field is readonly mode
- */
-export class GvExpressionLanguage extends GvCode {
-  static get properties() {
-    return {
-      ...super.properties,
-      grammar: { type: Object },
-    };
-  }
-
-  firstUpdated() {
-    super.firstUpdated();
-    dispatchCustomEvent(this, 'ready', { currentTarget: this });
-  }
-
-  getExtensions() {
-    return [Prec.high(this.insertELKeymap())];
-  }
-
-  insertELKeymap() {
-    return keymap.of([
-      {
-        key: 'Ctrl-Shift-e',
-        mac: 'Cmd-Shift-e',
-        run(view) {
-          view.dispatch(
-            view.state.changeByRange((range) => ({
-              changes: [{ from: range.from, to: range.to, insert: '{#}' }],
-              range: EditorSelection.range(range.from + 2, range.from + 2),
-            })),
-          );
-          startCompletion(view);
-          return true;
-        },
-      },
-    ]);
-  }
-
-  buildMethods(type) {
-    const modelType = this.getModelType(type);
-    return modelType.methods.map(({ name, params = [], returnType }) => {
-      const command = `${name}()`;
-      const displayParams = params.map((p) => `${p.type} ${p.name}`);
-      const label = `${name}(${displayParams.join(', ')})`;
-      const detail = `return ${returnType}`;
-      return {
-        type: 'method',
-        command,
-        apply: (view, completion, from, to) => {
-          const anchor = from + name.length + 1;
-          view.dispatch({
-            changes: { from, to, insert: completion.command },
-            selection: { anchor },
-            userEvent: 'input.complete',
-            annotations: pickedCompletion.of(view),
-          });
-        },
-        label,
-        detail,
-      };
-    });
-  }
-
-  findBestAutocompleteHandler(completionContext) {
-    return this.expressionLanguageCompletionHandlers
-      .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
-      .map((handler) => {
-        const match = handler.expr ? completionContext.matchBefore(handler.expr) : true;
-        return { handler, match };
-      })
-      .find(({ match, expr }) => match);
-  }
-
-  getModelType(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_types.${typeId}`);
-    }
-    return null;
-  }
-
-  isMap(typeId) {
-    return ['Map', 'HttpHeaders', 'MultiValueMap'].includes(typeId);
-  }
-
-  getEnum(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_enums.${typeId}`);
-    }
-    return [''];
-  }
-
-  convertType(type) {
-    if (type) {
-      const lowerType = type.toLowerCase();
-      if (lowerType === 'string') {
-        return 'text';
-      } else if (lowerType === 'httpheaders' || lowerType === 'multivaluemap') {
-        return 'type';
-      } else if (lowerType === 'int' || lowerType === 'long') {
-        return 'variable';
-      } else if (lowerType.includes('[]')) {
-        return 'enum';
-      }
-    }
-    return 'variable';
-  }
-
-  get expressionLanguageCompletionHandlers() {
-    return [
-      {
-        expr: /{#[a-z]*/,
-        supportEL: true,
-        run(completionContext, match) {
-          const prefix = match.text.replaceAll('{#', '');
-          const from = completionContext.pos - prefix.length;
-          const options = Object.keys(this.grammar)
-            .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-            .map((command) => {
-              return {
-                type: 'variable',
-                command,
-                apply: command,
-                label: command,
-              };
-            });
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*/,
-        supportEL: true,
-        run(completionContext, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const prefix = tokens[1];
-          let candidate = this.grammar[key][prefix];
-          let options = [];
-          let from = completionContext.pos;
-          if (candidate) {
-            if (this.isMap(candidate._type)) {
-              options = this.getEnum(candidate._type).map((value) => {
-                const type = this.convertType(candidate._type);
-                const command = `['${value}'][0]`;
-                return {
-                  type,
-                  command,
-                  apply: command,
-                  label: value,
-                };
-              });
-            }
-          } else {
-            from -= prefix.length;
-            candidate = this.grammar[key];
-            if (candidate._type) {
-              options = this.buildMethods(candidate._type);
-            } else {
-              options = Object.keys(candidate)
-                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-                .map((command) => ({
-                  type: this.convertType(candidate[command]._type),
-                  command,
-                  apply: command,
-                  label: command,
-                }));
-            }
-          }
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,
-        supportEL: true,
-        run(completionContext, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const word = tokens[1];
-          const prefix = tokens[2];
-          const candidate = this.grammar[key][word];
-          let options = [];
-          let from = completionContext.pos;
-          if (candidate) {
-            if (this.isMap(candidate._type)) {
-              options = this.getEnum(candidate._type)
-                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-                .map((label) => {
-                  const type = this.convertType(candidate._type);
-                  return {
-                    type,
-                    command: `['${label}'][0]`,
-                    apply(view, completion, _from, to) {
-                      from = _from - prefix.length - 1;
-                      view.dispatch({
-                        changes: { from, to, insert: completion.command },
-                        selection: { anchor: from + completion.command.length },
-                        userEvent: 'input.complete',
-                        annotations: pickedCompletion.of(view),
-                      });
-                    },
-                    label,
-                  };
-                });
-            } else {
-              if (candidate._type) {
-                options = this.buildMethods(candidate._type);
-              } else {
-                from -= prefix.length;
-                options = Object.keys(candidate)
-                  .filter((command) => command.startsWith(prefix))
-                  .map((command) => {
-                    return {
-                      type: this.convertType(candidate[command]._type),
-                      command,
-                      apply: command,
-                      label: command,
-                    };
-                  });
-              }
-            }
-          }
-          return { from, options };
-        },
-      },
-      this.defaultCompletionHandler,
-    ];
-  }
-}
-
-window.customElements.define('gv-expression-language', GvExpressionLanguage);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvExpressionLanguage=void 0;const e=require("../molecules/gv-code"),t=require("../lib/events"),r=require("@codemirror/autocomplete"),a=require("@codemirror/view"),s=require("@codemirror/state"),n=require("object-path");class p extends e.GvCode{static get properties(){return{...super.properties,grammar:{type:Object}}}firstUpdated(){super.firstUpdated(),(0,t.dispatchCustomEvent)(this,"ready",{currentTarget:this})}getExtensions(){return[s.Prec.high(this.insertELKeymap())]}insertELKeymap(){return a.keymap.of([{key:"Ctrl-Shift-e",mac:"Cmd-Shift-e",run:e=>(e.dispatch(e.state.changeByRange((e=>({changes:[{from:e.from,to:e.to,insert:"{#}"}],range:s.EditorSelection.range(e.from+2,e.from+2)})))),(0,r.startCompletion)(e),!0)}])}buildMethods(e){return this.getModelType(e).methods.map((({name:e,params:t=[],returnType:a})=>{const s=`${e}()`,n=t.map((e=>`${e.type} ${e.name}`));return{type:"method",command:s,apply:(t,a,s,n)=>{const p=s+e.length+1;t.dispatch({changes:{from:s,to:n,insert:a.command},selection:{anchor:p},userEvent:"input.complete",annotations:r.pickedCompletion.of(t)})},label:`${e}(${n.join(", ")})`,detail:`return ${a}`}}))}findBestAutocompleteHandler(e){return this.expressionLanguageCompletionHandlers.filter((e=>null!=this.grammar&&!0===e.supportEL||!0!==e.supportEL)).map((t=>({handler:t,match:!t.expr||e.matchBefore(t.expr)}))).find((({match:e,expr:t})=>e))}getModelType(e){return null!=this.grammar?(0,n.get)(this.grammar,`_types.${e}`):null}isMap(e){return["Map","HttpHeaders","MultiValueMap"].includes(e)}getEnum(e){return null!=this.grammar?(0,n.get)(this.grammar,`_enums.${e}`):[""]}convertType(e){if(e){const t=e.toLowerCase();if("string"===t)return"text";if("httpheaders"===t||"multivaluemap"===t)return"type";if("int"===t||"long"===t)return"variable";if(t.includes("[]"))return"enum"}return"variable"}get expressionLanguageCompletionHandlers(){return[{expr:/{#[a-z]*/,supportEL:!0,run(e,t){const r=t.text.replaceAll("{#","");return{from:e.pos-r.length,options:Object.keys(this.grammar).filter((e=>!e.startsWith("_")&&e.startsWith(r))).map((e=>({type:"variable",command:e,apply:e,label:e})))}}},{expr:/{#[a-z]*.[a-zA-Z]*/,supportEL:!0,run(e,t){const r=t.text.split("."),a=r[0].replaceAll("{#",""),s=r[1];let n=this.grammar[a][s],p=[],i=e.pos;return n?this.isMap(n._type)&&(p=this.getEnum(n._type).map((e=>{const t=`['${e}'][0]`;return{type:this.convertType(n._type),command:t,apply:t,label:e}}))):(i-=s.length,n=this.grammar[a],p=n._type?this.buildMethods(n._type):Object.keys(n).filter((e=>!e.startsWith("_")&&e.startsWith(s))).map((e=>({type:this.convertType(n[e]._type),command:e,apply:e,label:e})))),{from:i,options:p}}},{expr:/{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,supportEL:!0,run(e,t){const a=t.text.split("."),s=a[0].replaceAll("{#",""),n=a[1],p=a[2],i=this.grammar[s][n];let o=[],l=e.pos;return i&&(this.isMap(i._type)?o=this.getEnum(i._type).filter((e=>!e.startsWith("_")&&e.startsWith(p))).map((e=>({type:this.convertType(i._type),command:`['${e}'][0]`,apply(e,t,a,s){l=a-p.length-1,e.dispatch({changes:{from:l,to:s,insert:t.command},selection:{anchor:l+t.command.length},userEvent:"input.complete",annotations:r.pickedCompletion.of(e)})},label:e}))):i._type?o=this.buildMethods(i._type):(l-=p.length,o=Object.keys(i).filter((e=>e.startsWith(p))).map((e=>({type:this.convertType(i[e]._type),command:e,apply:e,label:e}))))),{from:l,options:o}}},this.defaultCompletionHandler]}}exports.GvExpressionLanguage=p,window.customElements.define("gv-expression-language",p);

package/src/molecules/gv-identity-picture.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Identity picture component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {String} picture - the picture
+ * @attr {String} display_name - the display_name of the picture
+ * @attr {Boolean} notification - true to display a notification info
+ * @attr {Boolean} rounded - true for rounded image/icon
+ *
+ * @cssprop {Color} [--gv-identity-picture-notification--bgc=var(--gv-theme-color-light, #86c3d0)] - Notification background color
+ */
+export class GvIdentityPicture extends LitElement {
+    static get properties(): {
+        picture: {
+            type: StringConstructor;
+        };
+        display_name: {
+            type: StringConstructor;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        notification: {
+            type: BooleanConstructor;
+        };
+        rounded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _onError(): void;
+    _error: boolean | undefined;
+    _toNumber(size: any): number;
+    _onLoaded(): void;
+    _getMaxSize(width: any, height: any): number;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/molecules/gv-identity-picture.js

@@ -1,148 +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 jdenticon from 'jdenticon';
-import { skeleton } from '../styles/skeleton';
-import { styleMap } from 'lit/directives/style-map';
-import '../atoms/gv-image';
-
-/**
- * Identity picture component
- *
- * ## Details
- * * has @theme facet
- *
- * @attr {String} picture - the picture
- * @attr {String} display_name - the display_name of the picture
- * @attr {Boolean} notification - true to display a notification info
- * @attr {Boolean} rounded - true for rounded image/icon
- *
- * @cssprop {Color} [--gv-identity-picture-notification--bgc=var(--gv-theme-color-light, #86c3d0)] - Notification background color
- */
-export class GvIdentityPicture extends LitElement {
-  static get properties() {
-    return {
-      picture: { type: String },
-      display_name: { type: String },
-      _error: { type: Boolean, attribute: false },
-      notification: { type: Boolean },
-      rounded: { type: Boolean, reflect: true },
-      skeleton: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      skeleton,
-      // language=CSS
-      css`
-        :host {
-          display: block;
-          position: relative;
-        }
-
-        div {
-          text-align: center;
-        }
-
-        svg,
-        .skeleton {
-          width: auto;
-          height: auto;
-          max-width: 100%;
-          max-height: 100%;
-        }
-
-        gv-image {
-          width: 100%;
-          height: 100%;
-          --gv-image--of: contain;
-        }
-
-        :host([rounded]) gv-image,
-        :host([rounded]) svg {
-          border: 2px solid var(--gv-theme-neutral-color-lighter, #fafafa);
-          border-radius: 50%;
-          box-sizing: border-box;
-          --gv-image--of: cover;
-        }
-
-        .notification {
-          position: absolute;
-          width: 8px;
-          height: 8px;
-          background-clip: padding-box;
-          border-radius: 50%;
-          background-color: var(--gv-identity-picture-notification--bgc, var(--gv-theme-color-light, #86c3d0));
-        }
-      `,
-    ];
-  }
-
-  _onError() {
-    this._error = true;
-  }
-
-  _toNumber(size) {
-    return parseInt(size.replace('px', ''), 10);
-  }
-
-  _onLoaded() {
-    this._error = false;
-  }
-
-  _getMaxSize(width, height) {
-    return Math.min(this._toNumber(width), this._toNumber(height));
-  }
-
-  updated(properties) {
-    if (properties.has('picture')) {
-      this._error = false;
-    }
-  }
-
-  render() {
-    const { width, height } = window.getComputedStyle(this);
-    if ((!this.picture || this._error) && width && height) {
-      const size = this._getMaxSize(width, height);
-      const container = document.createElement('div');
-      if (this.skeleton) {
-        container.classList.add('skeleton');
-      }
-      container.title = this.display_name;
-      container.innerHTML = jdenticon.toSvg(this.display_name, size, { backColor: '#FFF' });
-      if (this.notification) {
-        const notification = document.createElement('span');
-        notification.className = 'notification';
-        notification.style.left = width;
-        container.appendChild(notification);
-      }
-      return html`${container}`;
-    }
-    return html`
-      <gv-image
-        src="${this.picture}"
-        alt="${this.display_name}"
-        title="${this.display_name}"
-        @error="${this._onError}"
-        @gv-image:loaded="${this._onLoaded}"
-      ></gv-image>
-      ${this.notification ? html`<span class="notification" style="${styleMap({ left: width })}"></span>` : ''}
-    `;
-  }
-}
-
-window.customElements.define('gv-identity-picture', GvIdentityPicture);
+var e=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvIdentityPicture=void 0;const t=require("lit"),i=e(require("jdenticon")),r=require("../styles/skeleton"),o=require("lit/directives/style-map");require("../atoms/gv-image");class n extends t.LitElement{static get properties(){return{picture:{type:String},display_name:{type:String},_error:{type:Boolean,attribute:!1},notification:{type:Boolean},rounded:{type:Boolean,reflect:!0},skeleton:{type:Boolean}}}static get styles(){return[r.skeleton,t.css`:host{display:block;position:relative}div{text-align:center}.skeleton,svg{width:auto;height:auto;max-width:100%;max-height:100%}gv-image{width:100%;height:100%;--gv-image--of:contain}:host([rounded]) gv-image,:host([rounded]) svg{border:2px solid var(--gv-theme-neutral-color-lighter,#fafafa);border-radius:50%;box-sizing:border-box;--gv-image--of:cover}.notification{position:absolute;width:8px;height:8px;background-clip:padding-box;border-radius:50%;background-color:var(--gv-identity-picture-notification--bgc,var(--gv-theme-color-light,#86c3d0))}`]}_onError(){this._error=!0}_toNumber(e){return parseInt(e.replace("px",""),10)}_onLoaded(){this._error=!1}_getMaxSize(e,t){return Math.min(this._toNumber(e),this._toNumber(t))}updated(e){e.has("picture")&&(this._error=!1)}render(){const{width:e,height:r}=window.getComputedStyle(this);if((!this.picture||this._error)&&e&&r){const o=this._getMaxSize(e,r),n=document.createElement("div");if(this.skeleton&&n.classList.add("skeleton"),n.title=this.display_name,n.innerHTML=i.default.toSvg(this.display_name,o,{backColor:"#FFF"}),this.notification){const t=document.createElement("span");t.className="notification",t.style.left=e,n.appendChild(t)}return t.html`${n}`}return t.html`<gv-image src="${this.picture}" alt="${this.display_name}" title="${this.display_name}" @error="${this._onError}" @gv-image:loaded="${this._onLoaded}"></gv-image>${this.notification?t.html`<span class="notification" style="${(0,o.styleMap)({left:e})}"></span>`:""}`}}exports.GvIdentityPicture=n,window.customElements.define("gv-identity-picture",n);

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

@@ -0,0 +1,123 @@
+declare const GvList_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[];
+};
+/**
+ * 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 GvList_base {
+    static get properties(): {
+        items: {
+            type: ObjectConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+        _items: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        length: number;
+        toString(): string;
+        toLocaleString(): string;
+        pop(): import("lit").CSSResult | undefined;
+        push(...items: import("lit").CSSResult[]): number;
+        concat(...items: ConcatArray<import("lit").CSSResult>[]): import("lit").CSSResult[];
+        concat(...items: (import("lit").CSSResult | ConcatArray<import("lit").CSSResult>)[]): import("lit").CSSResult[];
+        join(separator?: string | undefined): string;
+        reverse(): import("lit").CSSResult[];
+        shift(): import("lit").CSSResult | undefined;
+        slice(start?: number | undefined, end?: number | undefined): import("lit").CSSResult[];
+        sort(compareFn?: ((a: import("lit").CSSResult, b: import("lit").CSSResult) => number) | undefined): import("lit").CSSResult[];
+        splice(start: number, deleteCount?: number | undefined): import("lit").CSSResult[];
+        splice(start: number, deleteCount: number, ...items: import("lit").CSSResult[]): import("lit").CSSResult[];
+        unshift(...items: import("lit").CSSResult[]): number;
+        indexOf(searchElement: import("lit").CSSResult, fromIndex?: number | undefined): number;
+        lastIndexOf(searchElement: import("lit").CSSResult, fromIndex?: number | undefined): number;
+        every<S extends import("lit").CSSResult>(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => value is S, thisArg?: any): this is S[];
+        every(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => unknown, thisArg?: any): boolean;
+        some(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => unknown, thisArg?: any): boolean;
+        forEach(callbackfn: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => void, thisArg?: any): void;
+        map<U>(callbackfn: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => U, thisArg?: any): U[];
+        filter<S_1 extends import("lit").CSSResult>(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => value is S_1, thisArg?: any): S_1[];
+        filter(predicate: (value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => unknown, thisArg?: any): import("lit").CSSResult[];
+        reduce(callbackfn: (previousValue: import("lit").CSSResult, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => import("lit").CSSResult): import("lit").CSSResult;
+        reduce(callbackfn: (previousValue: import("lit").CSSResult, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => import("lit").CSSResult, initialValue: import("lit").CSSResult): import("lit").CSSResult;
+        reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => U_1, initialValue: U_1): U_1;
+        reduceRight(callbackfn: (previousValue: import("lit").CSSResult, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => import("lit").CSSResult): import("lit").CSSResult;
+        reduceRight(callbackfn: (previousValue: import("lit").CSSResult, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => import("lit").CSSResult, initialValue: import("lit").CSSResult): import("lit").CSSResult;
+        reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: import("lit").CSSResult, currentIndex: number, array: import("lit").CSSResult[]) => U_2, initialValue: U_2): U_2;
+        find<S_2 extends import("lit").CSSResult>(predicate: (this: void, value: import("lit").CSSResult, index: number, obj: import("lit").CSSResult[]) => value is S_2, thisArg?: any): S_2 | undefined;
+        find(predicate: (value: import("lit").CSSResult, index: number, obj: import("lit").CSSResult[]) => unknown, thisArg?: any): import("lit").CSSResult | undefined;
+        findIndex(predicate: (value: import("lit").CSSResult, index: number, obj: import("lit").CSSResult[]) => unknown, thisArg?: any): number;
+        fill(value: import("lit").CSSResult, start?: number | undefined, end?: number | undefined): import("lit").CSSResult[];
+        copyWithin(target: number, start: number, end?: number | undefined): import("lit").CSSResult[];
+        entries(): IterableIterator<[number, import("lit").CSSResult]>;
+        keys(): IterableIterator<number>;
+        values(): IterableIterator<import("lit").CSSResult>;
+        includes(searchElement: import("lit").CSSResult, fromIndex?: number | undefined): boolean;
+        flatMap<U_3, This = undefined>(callback: (this: This, value: import("lit").CSSResult, index: number, array: import("lit").CSSResult[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
+        flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
+        [Symbol.iterator](): IterableIterator<import("lit").CSSResult>;
+        [Symbol.unscopables](): {
+            copyWithin: boolean;
+            entries: boolean;
+            fill: boolean;
+            find: boolean;
+            findIndex: boolean;
+            keys: boolean;
+            values: boolean;
+        };
+    };
+    _skeletonAttribute: string;
+    _onClick(item: any): void;
+    _renderImage(item: any): import("lit-html").TemplateResult<1>;
+    _renderStatus(subscriptions: any): "" | import("lit-html").TemplateResult<1>;
+    _renderItem(item: any): import("lit-html").TemplateResult<1>;
+    _renderItems(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};