@genexus/genexus-ide-ui 0.0.41 → 0.0.42

package/dist/collection/components/ww-images/ww-images.js

@@ -0,0 +1,674 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+import { renderFormItems } from "../../common/common";
+import { FILTER_AFTER } from "../../common/constants";
+export class GxIdeWWImages {
+  constructor() {
+    // 9.LOCAL METHODS //
+    // Renders
+    this.renderFilter = () => {
+      var _a, _b, _c, _d, _e;
+      return (h("gxg-container", { fieldset: true, displayBorder: true, containerTitle: this._componentLocale.filter.title, part: "filters-container" }, h("div", { class: "grid filter-grid" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.name, ref: (el) => (this.filterNameEl = el), part: "filter-name" }), h("gx-ide-entity-selector", { label: this._componentLocale.filter.moduleFolder, "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), part: "filter-module-folder" }), h("div", null, h("gxg-button", { id: "button-more-less", type: "primary-text-only", onClick: this.showMoreFilter, part: "gxg-button gxg-button--more-less" }, this.filterMore
+        ? this._componentLocale.filter.btnLess
+        : this._componentLocale.filter.btnMore)), h("gxg-form-text", { class: { hide: !this.filterMore }, "label-position": "above", label: this._componentLocale.filter.search, ref: (el) => (this.filterSearchContentsEl = el), part: "filter-search" }), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.category, value: this.defaultCategory, disabled: !this.categories, ref: (el) => (this.filterCategoryEl = el), part: "filter-category" }, renderFormItems("gxg-combo-box-item", (_a = this.categories) !== null && _a !== void 0 ? _a : [])), h("div", { class: { hide: !this.filterMore } }, h("gxg-form-checkbox", { label: this._componentLocale.filter.allDescendants, class: "align-center", ref: (el) => (this.filterAllDescendantsEl = el), part: "filter-all-descendants" })), h("div", { class: {
+          "flex": true,
+          "with-gap": true,
+          "hide": !this.filterMore
+        } }, h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, class: "align-center", ref: (el) => (this.filterModifiedEl = el), part: "filter-modified" }), h("gxg-combo-box", { class: { hide: !this.filterModified }, "disable-filter": true, value: this.filterAfterType, ref: (el) => (this.filterAfterTypeEl = el), part: "filter-after-type" }, renderFormItems("gxg-combo-box-item", [
+        {
+          id: FILTER_AFTER.NONE,
+          label: this._componentLocale.filter.afterNone,
+          value: FILTER_AFTER.NONE
+        },
+        {
+          id: FILTER_AFTER.DATE_TIME,
+          label: this._componentLocale.filter[FILTER_AFTER.DATE_TIME],
+          value: FILTER_AFTER.DATE_TIME
+        },
+        {
+          id: FILTER_AFTER.IMPORT,
+          label: this._componentLocale.filter[FILTER_AFTER.IMPORT],
+          value: FILTER_AFTER.IMPORT
+        },
+        {
+          id: FILTER_AFTER.LAST_BUILD,
+          label: this._componentLocale.filter[FILTER_AFTER.LAST_BUILD],
+          value: FILTER_AFTER.LAST_BUILD
+        }
+      ])), h("gxg-form-text", { class: { hide: !this.filterModified }, "label-position": "start", label: this._componentLocale.filter.user, "max-width": "150px", ref: (el) => (this.filterUserEl = el), part: "filter-user" }), h("div", { class: {
+          flex: true,
+          hide: !this.filterModified ||
+            this.filterAfterType !== FILTER_AFTER.DATE_TIME
+        }, part: "filter-datetime" }, h("gxg-label", { "label-position": "start" }, this._componentLocale.filter.dateTime), h("gxg-date-picker", { ref: (el) => (this.filterModifiedDateEl = el) }))), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.style, disabled: !this.styles, ref: (el) => (this.filterStyleEl = el), part: "filter-style" }, renderFormItems("gxg-combo-box-item", (_b = this.styles) !== null && _b !== void 0 ? _b : [])), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.language, disabled: !this.languages, ref: (el) => (this.filterLanguageEl = el), part: "filter-language" }, renderFormItems("gxg-combo-box-item", (_c = this.languages) !== null && _c !== void 0 ? _c : [])), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.density, disabled: !this.densities, ref: (el) => (this.filterDensityEl = el), part: "filter-density" }, renderFormItems("gxg-combo-box-item", (_d = this.densities) !== null && _d !== void 0 ? _d : [])), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.layer, disabled: !this.layers, ref: (el) => (this.filterLayerEl = el), part: "filter-layer" }, renderFormItems("gxg-combo-box-item", (_e = this.layers) !== null && _e !== void 0 ? _e : [])))));
+    };
+    this.renderImages = () => {
+      return (h("gxg-grid", { part: "images-table" }, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-images" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.module, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastBuildDate, columnNamePosition: "text", settingable: false })), this.images.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("gxg-icon", { type: obj.icon })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.module, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${obj.modifiedDate.toISOString().slice(0, 10)}`), h("ch-grid-cell", null, " ", obj.lastUser, " "), h("ch-grid-cell", null, `${obj.importDate.toISOString().slice(0, 10)}`), h("ch-grid-cell", null, `${obj.lastBuildDate.toISOString().slice(0, 10)}`)))))));
+    };
+    this.renderImageData = () => {
+      return (h("gxg-container", { fieldset: true, displayBorder: true, containerTitle: this._componentLocale.imageDataTitle, part: "image-data-container" }, h("div", { class: "grid images-data-flex" }, this.imagesSelectedItems.map(item => (h("div", { class: "image-item" }, h("div", { class: "img" }, h("img", { src: item.url, alt: item.id })), h("gxg-text", { type: "text-regular" }, item.name)))))));
+    };
+    this.getImages = () => {
+      let filters = {
+        name: this.filterNameEl.value,
+        parent: this.filterModuleEl.value ? this.filterModuleEl.value.id : null
+      };
+      if (this.filterMore) {
+        const modified = this.filterModifiedEl.checked;
+        const modifiedAfter = this.filterAfterTypeEl.value;
+        filters = Object.assign(Object.assign({}, filters), { searchContents: this.filterSearchContentsEl.value, category: this.filterCategoryEl.value, allDescendants: this.filterAllDescendantsEl.checked, modifiedAfter: modified ? modifiedAfter : null, modifiedBy: modified ? this.filterUserEl.value : null, modifiedDate: modified && modifiedAfter === FILTER_AFTER.DATE_TIME
+            ? this.filterModifiedDateEl.value
+            : null, style: this.filterStyleEl.value, language: this.filterLanguageEl.value, density: this.filterDensityEl.value, layer: this.filterLayerEl.value });
+      }
+      this.loadCallback(filters).then((items) => {
+        this.images = items;
+        this.selectedObjectsIds = [];
+        this.deselectAll();
+      });
+    };
+    this.newObjectCallbackHandle = () => {
+      this.newObjectCallback();
+    };
+    this.openSelectionCallBackHandle = () => {
+      this.openSelectionCallback(this.selectedObjectsIds);
+    };
+    this.deleteSelectionCallbackHandle = () => {
+      this.deleteSelectionCallback(this.selectedObjectsIds);
+    };
+    this.contextMenuCallbackHandle = () => {
+      this.contextMenuCallback(this.selectedObjectsIds);
+    };
+    this.showMoreFilter = () => {
+      this.filterMore = !this.filterMore;
+    };
+    this.selectAll = () => {
+      this.chGridEl.selectAllRows();
+    };
+    this.deselectAll = () => {
+      this.chGridEl.selectAllRows(false);
+    };
+    this.listenChanges = () => {
+      this.filterNameEl.addEventListener("change", () => {
+        this.getImages();
+      });
+      this.filterSearchContentsEl.addEventListener("change", () => {
+        this.getImages();
+      });
+      this.filterAllDescendantsEl.addEventListener("change", () => {
+        this.getImages();
+      });
+      this.filterModifiedEl.addEventListener("change", (e) => {
+        this.filterModified = e.detail.value;
+        this.getImages();
+      });
+      this.filterUserEl.addEventListener("change", () => {
+        this.getImages();
+      });
+      this.filterCategoryEl.addEventListener("valueChanged", () => {
+        this.getImages();
+      });
+      this.filterModuleEl.addEventListener("valueChanged", () => {
+        this.getImages();
+      });
+      this.filterAfterTypeEl.addEventListener("valueChanged", () => {
+        this.filterAfterType = this.filterAfterTypeEl.value;
+        this.getImages();
+      });
+      // for grid selection
+      this.chGridEl.addEventListener("rowClicked", (ev) => {
+        ev.detail.rowId;
+        this.loadImageItemsCallback(ev.detail.rowId).then((items) => {
+          this.imagesSelectedItems = items;
+        });
+      });
+      this.chGridEl.addEventListener("rowDoubleClicked", () => {
+        this.openSelectionCallBackHandle();
+      });
+      this.chGridEl.addEventListener("selectionChanged", (ev) => {
+        this.selectedObjectsIds = ev.detail.rowsId;
+        this.selectionObjectChangeCallback(this.selectedObjectsIds);
+      });
+      this.chGridEl.addEventListener("contextmenu", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.contextMenuCallbackHandle();
+      });
+    };
+    this.filterAfterType = "";
+    this.filterModified = false;
+    this.filterMore = false;
+    this.images = [];
+    this.imagesSelectedItems = [];
+    this.selectedObjectsIds = [];
+    this.categories = undefined;
+    this.densities = undefined;
+    this.defaultCategory = undefined;
+    this.defaultModule = undefined;
+    this.defaultType = undefined;
+    this.filterModules = undefined;
+    this.languages = undefined;
+    this.layers = undefined;
+    this.contextMenuCallback = undefined;
+    this.deleteSelectionCallback = undefined;
+    this.loadCallback = undefined;
+    this.loadImageItemsCallback = undefined;
+    this.newObjectCallback = undefined;
+    this.openSelectionCallback = undefined;
+    this.selectModuleCallback = undefined;
+    this.selectionObjectChangeCallback = undefined;
+    this.shadow = false;
+    this.styles = undefined;
+    this.types = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+    this.componentDidLoadEvent.emit(true);
+  }
+  componentDidLoad() {
+    this.listenChanges();
+    this.getImages();
+  }
+  // 7.LISTENERS //
+  keyDownHandler(eventInfo) {
+    if (document.activeElement === this.el) {
+      switch (eventInfo.key) {
+        case "Enter":
+          this.openSelectionCallBackHandle();
+          break;
+        case "Delete":
+          this.deleteSelectionCallbackHandle();
+          break;
+      }
+    }
+  }
+  // 8.PUBLIC METHODS API //
+  /**
+   * Validate necessary data input
+   */
+  async validate() {
+    const isValid = true;
+    return isValid;
+  }
+  /**
+   * This method reload the view, refreshing the filters and the table of images.
+   */
+  async reload() {
+    this.filterUserEl.value = null;
+    this.filterAfterTypeEl.value = null;
+    this.filterAfterType = null;
+    this.filterModifiedEl.checked = false;
+    this.filterAllDescendantsEl.checked = false;
+    this.filterModuleEl.value = null;
+    this.filterCategoryEl.value = null;
+    this.filterSearchContentsEl.value = null;
+    this.filterNameEl.value = null;
+    this.filterStyleEl.value = null;
+    this.filterLanguageEl.value = null;
+    this.filterDensityEl.value = null;
+    this.filterLayerEl.value = null;
+    this.filterMore = false;
+    this.getImages();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, this.renderFilter(), h("gxg-container", null, h("div", { class: "grid images-grid" }, this.renderImages(), this.renderImageData())), h("gxg-container", null, h("div", { class: "grid objects-count" }, h("div", { class: "flex with-gap" }, h("gxg-button", { id: "button-select-all", type: "primary-text-only", onClick: this.selectAll, part: "gxg-button gxg-button--select-all" }, this._componentLocale.footer.btnSelectAll), h("gxg-button", { id: "button-new-file", type: "primary-text-only", onClick: this.newObjectCallbackHandle, part: "gxg-button gxg-button--new-file" }, this._componentLocale.footer.btnNew)), h("gxg-text", { class: "align-end", part: "objects-matching" }, `${this.images.length} ${this._componentLocale.objCount.matching}`))))));
+  }
+  static get is() { return "gx-ide-ww-images"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ww-images.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ww-images.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/ww-images"]; }
+  static get properties() {
+    return {
+      "categories": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The categories render in the filter category selector"
+        }
+      },
+      "densities": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The densities render in the filter density selector"
+        }
+      },
+      "defaultCategory": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The default value for the 'categories' filter"
+        },
+        "attribute": "default-category",
+        "reflect": false
+      },
+      "defaultModule": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EntityData",
+          "resolved": "{ id: string; name: string; iconSrc?: string; iconColor?: Color; }",
+          "references": {
+            "EntityData": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The default value for the module/folder filter"
+        }
+      },
+      "defaultType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The default value for the type filter"
+        },
+        "attribute": "default-type",
+        "reflect": false
+      },
+      "filterModules": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The modules/folders render in the module/folder selector"
+        }
+      },
+      "languages": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The languages render in the filter language selector"
+        }
+      },
+      "layers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The layers render in the filter layer selector"
+        }
+      },
+      "contextMenuCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ContextMenuCallback",
+          "resolved": "(ids: string[]) => Promise<void>",
+          "references": {
+            "ContextMenuCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This is a function provided by the developer for expanded the data of images that is double-clicked or entered."
+        }
+      },
+      "deleteSelectionCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DeleteSelectionCallback",
+          "resolved": "(ids: string[]) => Promise<void>",
+          "references": {
+            "DeleteSelectionCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This is a function provided by the developer for expanded the data of images that is double-clicked or entered."
+        }
+      },
+      "loadCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "LoadCallback",
+          "resolved": "(filters: ImageFiltersData) => Promise<ImageData[]>",
+          "references": {
+            "LoadCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This is a function provided by the developer that return a list of images to populate the table of images."
+        }
+      },
+      "loadImageItemsCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "LoadImageItemsCallback",
+          "resolved": "(id: string) => Promise<ImageItemData[]>",
+          "references": {
+            "LoadImageItemsCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This is a function provided by the developer that return a list of items of the image selected."
+        }
+      },
+      "newObjectCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "NewObjectCallback",
+          "resolved": "() => Promise<void>",
+          "references": {
+            "NewObjectCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This is a function provided by the developer for expanded the data of images that is double-clicked or entered."
+        }
+      },
+      "openSelectionCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "OpenSelectionCallback",
+          "resolved": "(ids: string[]) => Promise<void>",
+          "references": {
+            "OpenSelectionCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This is a function provided by the developer for expanded the data of images that is double-clicked or entered."
+        }
+      },
+      "selectModuleCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SelectModuleCallback",
+          "resolved": "() => Promise<EntityData>",
+          "references": {
+            "SelectModuleCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the action is executed on the Module/Folder filter (button '...'). It returns the information of the selected object (id and name) or 'undefined' if it was canceled."
+        }
+      },
+      "selectionObjectChangeCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SelectionChangeCallback",
+          "resolved": "(ids: string[]) => Promise<void>",
+          "references": {
+            "SelectionChangeCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This is a function provided by the developer for expanded the data of images that is double-clicked or entered."
+        }
+      },
+      "shadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Applies a shadow all around"
+        },
+        "attribute": "shadow",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "styles": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The styles render in the filter style selector"
+        }
+      },
+      "types": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The types render in the filter type selector"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "filterAfterType": {},
+      "filterModified": {},
+      "filterMore": {},
+      "images": {},
+      "imagesSelectedItems": {},
+      "selectedObjectsIds": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentDidLoadEvent",
+        "name": "componentDidLoadEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emitted once just after the component is fully loaded and the first render() occurs."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "validate": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Validate necessary data input",
+          "tags": []
+        }
+      },
+      "reload": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method reload the view, refreshing the filters and the table of images.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "keyDownHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }];
+  }
+}