@genexus/genexus-ide-ui 1.0.19 → 1.0.21

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

@@ -1,186 +1,231 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m")
-        throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _GxIdeWWImages__componentLocale, _GxIdeWWImages_filterInitialData, _GxIdeWWImages_renderedFirstTime, _GxIdeWWImages_imagesMap, _GxIdeWWImages_chGridEl, _GxIdeWWImages_filterAfterTypeEl, _GxIdeWWImages_filterAllDescendantsEl, _GxIdeWWImages_filterCategoryEl, _GxIdeWWImages_filterDensityEl, _GxIdeWWImages_filterLanguageEl, _GxIdeWWImages_filterLayerEl, _GxIdeWWImages_filterModifiedDateEl, _GxIdeWWImages_filterModuleEl, _GxIdeWWImages_filterNameEl, _GxIdeWWImages_filterSearchContentsEl, _GxIdeWWImages_filterStyleEl, _GxIdeWWImages_filterUserEl, _GxIdeWWImages_deleteSelectionCallbackHandler, _GxIdeWWImages_deselectAll, _GxIdeWWImages_filterAfterTypeChangeHandler, _GxIdeWWImages_filterImagesInformationHandler, _GxIdeWWImages_filterInputHandler, _GxIdeWWImages_toggleFilterButtonClickedHandler, _GxIdeWWImages_getImages, _GxIdeWWImages_getToday, _GxIdeWWImages_listenChanges, _GxIdeWWImages_newObjectCallbackHandler, _GxIdeWWImages_openSelectionCallBackHandler, _GxIdeWWImages_renderHeader, _GxIdeWWImages_renderFilter, _GxIdeWWImages_renderImages, _GxIdeWWImages_renderImagesData, _GxIdeWWImages_resetFilterHandler, _GxIdeWWImages_saveInitialFilterData, _GxIdeWWImages_selectAll;
-/* eslint-disable @stencil-community/own-props-must-be-private */
 /* STENCIL IMPORTS */
 import { Host, h } from "@stencil/core";
-import { getIconPath } from "@genexus/mercury";
 /* CUSTOM IMPORTS */
-import { FILTER_AFTER } from "../../common/constants";
-import { config } from "../../common/config";
-import { formatDate, hiChar } from "../../common/helpers";
 import { Locale } from "../../common/locale";
-import { mapOptionsToComboBoxItemModel } from "./helpers";
+import { config } from "../../common/config";
+import { renderFormItems } from "../../common/common";
+import { FILTER_AFTER } from "../../common/constants";
+import { formatDate, hiChar, closeOnOutsideClickHandler } from "../../common/helpers";
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    "components/accordion",
-    "components/button",
-    "components/checkbox",
-    "components/combo-box",
-    "components/edit",
-    "components/tabular-grid",
-    "components/sidebar",
-    "utils/form",
-    "utils/layout",
-    "utils/typography",
-    "utils/spacing",
-    "chameleon/scrollbar"
-];
-let TODAY = null;
-// icons
-const RESET_ICON = getIconPath({
-    category: "gemini-tools",
-    name: "reset",
-    colorType: "neutral"
-});
-const SEARCH_ICON = getIconPath({
-    category: "gemini-tools",
-    name: "search",
-    colorType: "neutral"
-});
-const FILTER_ICON = getIconPath({
-    category: "window-tools",
-    name: "filter",
-    colorType: "primary"
-});
-const MODIFIED_ACCORDION_MODEL = [
-    {
-        id: "modified",
-        caption: "Modified",
-        expanded: false
-    }
+    // "utils/form",
+    // "utils/layout",
+    // "utils/typography",
+    // "components/button",
+    // "components/checkbox",
+    // "components/edit",
+    "components/tabular-grid"
 ];
 export class GxIdeWWImages {
     constructor() {
+        this.renderedFirstTime = false;
+        // 9.LOCAL METHODS //
+        this.attachDetectClickOutsideFilter = () => {
+            document.addEventListener("click", this.detectClickOutsideFilter);
+        };
+        this.removeDetectClickOutsideFilter = () => {
+            document.removeEventListener("click", this.detectClickOutsideFilter);
+        };
+        this.detectClickOutsideFilter = (e) => {
+            const clickedOutside = closeOnOutsideClickHandler(e, this.filterEl);
+            if (clickedOutside) {
+                this.filtersHidden = true;
+            }
+            else {
+                this.filtersHidden = false;
+            }
+        };
         /**
-         * The component hard-coded strings translations.
+         * @description This is needed for resetting the filter. When the user resets the filter, all the filter controls values have to be restored to the value they had on componentDidLoad.
          */
-        _GxIdeWWImages__componentLocale.set(this, void 0);
-        _GxIdeWWImages_filterInitialData.set(this, void 0);
-        _GxIdeWWImages_renderedFirstTime.set(this, false);
-        _GxIdeWWImages_imagesMap.set(this, new Map());
-        _GxIdeWWImages_chGridEl.set(this, void 0);
-        _GxIdeWWImages_filterAfterTypeEl.set(this, void 0);
-        _GxIdeWWImages_filterAllDescendantsEl.set(this, void 0);
-        _GxIdeWWImages_filterCategoryEl.set(this, void 0);
-        _GxIdeWWImages_filterDensityEl.set(this, void 0);
-        _GxIdeWWImages_filterLanguageEl.set(this, void 0);
-        _GxIdeWWImages_filterLayerEl.set(this, void 0);
-        _GxIdeWWImages_filterModifiedDateEl.set(this, void 0);
-        _GxIdeWWImages_filterModuleEl.set(this, void 0);
-        _GxIdeWWImages_filterNameEl.set(this, void 0);
-        _GxIdeWWImages_filterSearchContentsEl.set(this, void 0);
-        _GxIdeWWImages_filterStyleEl.set(this, void 0);
-        _GxIdeWWImages_filterUserEl.set(this, void 0);
-        _GxIdeWWImages_deleteSelectionCallbackHandler.set(this, () => {
-            this.deleteSelectionCallback(this.selectedObjectsIds);
-        });
-        _GxIdeWWImages_deselectAll.set(this, () => {
-            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").selectAllRows(false);
-        });
-        _GxIdeWWImages_filterAfterTypeChangeHandler.set(this, (event) => {
-            this.afterCurrentValue = event.detail;
-            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
-        });
-        _GxIdeWWImages_filterImagesInformationHandler.set(this, () => {
-            const filterValue = this.filterImagesInputValue.toLocaleLowerCase();
-            this.filteredImages = this.images.filter(image => {
-                var _a, _b, _c;
-                const nameMatch = image.name.toLocaleLowerCase().includes(filterValue);
-                const moduleMatch = image.module
-                    .toLocaleLowerCase()
-                    .includes(filterValue);
-                const descriptionMatch = image.description
-                    .toLocaleLowerCase()
-                    .includes(filterValue);
-                const modifiedDateMatch = (_a = image.modifiedDate) === null || _a === void 0 ? void 0 : _a.toString().includes(filterValue);
-                const lastUser = (_b = image.lastUser) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase().includes(filterValue);
-                const importDateMatch = (_c = image.importDate) === null || _c === void 0 ? void 0 : _c.toString().includes(filterValue);
-                return (nameMatch ||
-                    moduleMatch ||
-                    descriptionMatch ||
-                    modifiedDateMatch ||
-                    lastUser ||
-                    importDateMatch);
-            });
-        });
-        _GxIdeWWImages_filterInputHandler.set(this, (event) => {
-            this.filterImagesInputValue = event.detail.toLowerCase();
-            __classPrivateFieldGet(this, _GxIdeWWImages_filterImagesInformationHandler, "f").call(this);
-        });
-        _GxIdeWWImages_toggleFilterButtonClickedHandler.set(this, () => {
-            this.toggleFilterButtonActive = !this.toggleFilterButtonActive;
-        });
-        _GxIdeWWImages_getImages.set(this, () => {
-            var _a;
-            __classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").clear();
-            const filters = {
-                name: __classPrivateFieldGet(this, _GxIdeWWImages_filterNameEl, "f").value,
-                searchContents: __classPrivateFieldGet(this, _GxIdeWWImages_filterSearchContentsEl, "f").value,
-                category: __classPrivateFieldGet(this, _GxIdeWWImages_filterCategoryEl, "f").value,
-                parent: __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").value ? __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").value.id : null,
-                allDescendants: !!__classPrivateFieldGet(this, _GxIdeWWImages_filterAllDescendantsEl, "f").value,
-                modifiedAfter: __classPrivateFieldGet(this, _GxIdeWWImages_filterAfterTypeEl, "f").value,
-                modifiedBy: __classPrivateFieldGet(this, _GxIdeWWImages_filterUserEl, "f").value,
-                modifiedDate: new Date(__classPrivateFieldGet(this, _GxIdeWWImages_filterModifiedDateEl, "f").value),
-                style: __classPrivateFieldGet(this, _GxIdeWWImages_filterStyleEl, "f").value,
-                language: __classPrivateFieldGet(this, _GxIdeWWImages_filterLanguageEl, "f").value,
-                density: __classPrivateFieldGet(this, _GxIdeWWImages_filterDensityEl, "f").value,
-                layer: (_a = __classPrivateFieldGet(this, _GxIdeWWImages_filterLayerEl, "f")) === null || _a === void 0 ? void 0 : _a.value
+        this.saveInitialFilterData = () => {
+            this.filterInitialData = {
+                name: this.filterNameEl.value,
+                module: this.filterModuleEl.value,
+                searchContents: this.filterSearchContentsEl.value,
+                category: this.filterCategoryEl.value,
+                allDescendants: this.filterAllDescendantsEl.checked,
+                modified: this.filterModifiedEl.checked,
+                dateTime: this.filterModifiedDateEl.value,
+                after: this.filterAfterTypeEl.value,
+                user: this.filterUserEl.value,
+                style: this.filterStyleEl.value,
+                language: this.filterLanguageEl.value,
+                density: this.filterDensityEl.value,
+                layer: this.filterLayerEl.value
+            };
+        };
+        // 9.LOCAL METHODS -> Renders //
+        this.renderFilter = () => {
+            var _a, _b, _c, _d, _e;
+            return (h("div", { class: "filter filter--padding", ref: (el) => (this.filterEl = el) }, h("div", { class: "filter__first-row" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.name, ref: (el) => (this.filterNameEl = el), part: "filter-name", class: "name" }), h("div", { class: "second-column" }, h("gx-ide-entity-selector", { "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module-folder", part: "filter-module-folder" }), h("gxg-button", { onClick: this.resetFilterHandler, part: "gxg-button-reset-filter", type: "secondary-icon-only", icon: "gemini-tools/reset", class: "reset-filter-btn" }), h("gxg-button", { onClick: this.toggleFiltersHandler, part: "gxg-button gxg-button--more-less", type: "secondary-icon-only", icon: true ? "window-tools/filter-conditions" : "window-tools/filter", class: "filter-btn" }))), h("div", { class: {
+                    "filters-outer-wrapper": true,
+                    "filters-outer-wrapper--hidden": this.filtersHidden
+                } }, h("div", { class: {
+                    "filter": true,
+                    "filter--gap": true,
+                    "filters-inner-wrapper": true
+                } }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.search, ref: (el) => (this.filterSearchContentsEl = el), class: { "search-contents": true }, part: "filter-search" }), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.category, value: this.defaultCategory, disabled: !this.categories, ref: (el) => (this.filterCategoryEl = el), class: "category", part: "filter-category" }, renderFormItems("gxg-combo-box-item", (_a = this.categories) !== null && _a !== void 0 ? _a : [])), h("div", { class: "options" }, h("gxg-label", { labelPosition: "above", center: false }, "Options:"), h("div", { class: "checkboxes-wrapper" }, h("gxg-form-checkbox", { label: this._componentLocale.filter.allDescendants, ref: (el) => (this.filterAllDescendantsEl =
+                    el), class: "all-descendants", part: "filter-all-descendants" }), h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, ref: (el) => (this.filterModifiedEl = el), class: "modified", part: "filter-modified" }))), h("div", { class: {
+                    "hide": !this.filterModified ||
+                        this.filterAfterType !== FILTER_AFTER.DATE_TIME,
+                    "date-time": true
+                }, part: "filter-datetime" }, h("div", { class: "date-time-wrapper" }, h("gxg-label", { "label-position": "above" }, this._componentLocale.filter.dateTime), h("gxg-date-picker", { class: "date-picker", disabled: !this.filterModified, ref: (el) => (this.filterModifiedDateEl = el) }))), h("gxg-combo-box", { class: "after-date-time", disabled: !this.filterModified, label: this._componentLocale.filter.afterLabel, "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", { disabled: !this.filterModified, labelPosition: "above", label: this._componentLocale.filter.user, ref: (el) => (this.filterUserEl = el), value: "hey", centerLabel: false, class: "user", part: "filter-user" }), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.style, disabled: !this.styles, ref: (el) => (this.filterStyleEl = el), class: "style", part: "filter-style" }, renderFormItems("gxg-combo-box-item", (_b = this.styles) !== null && _b !== void 0 ? _b : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.language, disabled: !this.languages, ref: (el) => (this.filterLanguageEl = el), class: "language", part: "filter-language" }, renderFormItems("gxg-combo-box-item", (_c = this.languages) !== null && _c !== void 0 ? _c : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.density, disabled: !this.densities, ref: (el) => (this.filterDensityEl = el), class: "density", part: "filter-density" }, renderFormItems("gxg-combo-box-item", (_d = this.densities) !== null && _d !== void 0 ? _d : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.layer, disabled: !this.layers, ref: (el) => (this.filterLayerEl = el), class: "layer", part: "filter-layer" }, renderFormItems("gxg-combo-box-item", (_e = this.layers) !== null && _e !== void 0 ? _e : []))))));
+        };
+        this.renderImagesData = () => {
+            return (
+            /* images information*/
+            h("gx-ide-container", { contentBorderEnd: true, noContentPadding: true, titleType: "secondary", containerTitle: !this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, class: { "images-information": true, "overflow-auto": true }, part: "grid-container" }, this.secondaryFilter ? (h("header", { class: "images-information__header", slot: "header" }, h("gx-ide-title", { type: "secondary", class: "images-information__header-title" }, this._componentLocale.imagesDataTitle), h("gxg-form-text", { icon: "gemini-tools/search", "icon-position": "start", placeholder: "Search by any field", onInput: this.filterInputHandler }))) : null, h("ch-tabular-grid", { ref: (el) => (this.chGridEl = el), part: "ch-grid-images", rowSelectionMode: "single", class: "tabular-grid tabular-grid-ww-images" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { columnName: "", columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.name, columnNameHidden: false, settingable: false, class: "tabular-grid-column", size: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.module, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.common, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.description, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.commonDouble, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" })), this.filteredImages.map((obj) => (h("ch-tabular-grid-row", { rowid: obj.id, class: "tabular-grid-row" }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("ch-image", { src: obj.icon })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.name, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.module, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.description, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.modifiedDate)}`, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.lastUser, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.importDate)}`, this.filterImagesInputValue))))))));
+        };
+        this.renderImages = () => {
+            return (
+            /* tiles */
+            h("gx-ide-container", { containerTitle: this._componentLocale.imagesTitle, noContentPadding: true, titleType: "secondary", class: "overflow-auto", titleHeightAsInput: this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, part: "image-data-container" }, h("div", { class: "images-container" }, this.imagesSelectedItems.map(item => (h("div", { class: "image-item" }, h("div", { class: "image-item__container" }, h("div", { class: "img" }, h("img", { src: item.url, alt: item.id }))), h("span", { class: "image-item__name" }, item.name)))))));
+        };
+        // 9.LOCAL METHODS -> Other //
+        this.getImages = () => {
+            let filters = {
+                name: this.filterNameEl.value,
+                parent: this.filterModuleEl.value ? this.filterModuleEl.value.id : null
             };
+            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 = [];
-                __classPrivateFieldGet(this, _GxIdeWWImages_deselectAll, "f").call(this);
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterImagesInformationHandler, "f").call(this);
+                this.deselectAll();
+                this.filterImagesInformationHandler();
+            });
+        };
+        this.newObjectCallbackHandler = () => {
+            this.newObjectCallback();
+        };
+        this.openSelectionCallBackHandler = () => {
+            this.openSelectionCallback(this.selectedObjectsIds);
+        };
+        this.deleteSelectionCallbackHandler = () => {
+            this.deleteSelectionCallback(this.selectedObjectsIds);
+        };
+        this.resetFilterHandler = () => {
+            if (this.filterInitialData) {
+                this.filterNameEl.value = this.filterInitialData.name;
+                this.filterModuleEl.value = this.filterInitialData.module;
+                this.filterSearchContentsEl.value = this.filterInitialData.searchContents;
+                this.filterCategoryEl.value = this.filterInitialData.category;
+                this.filterAllDescendantsEl.checked =
+                    this.filterInitialData.allDescendants;
+                this.filterModifiedEl.checked = this.filterInitialData.modified;
+                this.filterModifiedDateEl.value = this.filterInitialData.dateTime;
+                this.filterAfterTypeEl.value = this.filterInitialData.after;
+                this.filterUserEl.value = this.filterInitialData.user;
+                this.filterStyleEl.value = this.filterInitialData.style;
+                this.filterLanguageEl.value = this.filterInitialData.language;
+                this.filterDensityEl.value = this.filterInitialData.density;
+                this.filterLayerEl.value = this.filterInitialData.layer;
+            }
+        };
+        this.toggleFiltersHandler = () => {
+            this.filtersHidden = !this.filtersHidden;
+        };
+        this.selectAll = () => {
+            this.chGridEl.selectAllRows();
+        };
+        this.deselectAll = () => {
+            this.chGridEl.selectAllRows(false);
+        };
+        this.listenChanges = () => {
+            /* name */
+            this.filterNameEl.addEventListener("change", () => {
+                this.getImages();
             });
-        });
-        _GxIdeWWImages_getToday.set(this, () => {
-            const now = new Date();
-            const date = now.toISOString().split("T")[0];
-            const time = now.toISOString().split("T")[1].slice(0, 5); // Only take 'HH:MM' part
-            return `${date}T${time}`;
-        });
-        _GxIdeWWImages_listenChanges.set(this, () => {
             /* module/folder */
-            __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").addEventListener("valueChanged", () => {
-                __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+            this.filterModuleEl.addEventListener("valueChanged", () => {
+                this.getImages();
+            });
+            /* search contents*/
+            this.filterSearchContentsEl.addEventListener("change", () => {
+                this.getImages();
+            });
+            /* category */
+            this.filterCategoryEl.addEventListener("valueChanged", () => {
+                this.getImages();
+            });
+            /* (options) -> all descendants */
+            this.filterAllDescendantsEl.addEventListener("change", () => {
+                this.getImages();
+            });
+            /* (options) -> modified */
+            this.filterModifiedEl.addEventListener("change", (e) => {
+                this.filterModified = e.detail.value;
+                this.getImages();
+            });
+            /* date/time */
+            this.filterModifiedDateEl.addEventListener("valueChanged", () => {
+                this.getImages();
+            });
+            /* after */
+            this.filterAfterTypeEl.addEventListener("valueChanged", () => {
+                this.filterAfterType = this.filterAfterTypeEl.value;
+                this.getImages();
+            });
+            /* user */
+            this.filterUserEl.addEventListener("change", () => {
+                this.getImages();
+            });
+            /* style */
+            this.filterStyleEl.addEventListener("valueChanged", () => {
+                this.getImages();
+            });
+            /* language */
+            this.filterLanguageEl.addEventListener("valueChanged", () => {
+                this.getImages();
+            });
+            /* density */
+            this.filterDensityEl.addEventListener("valueChanged", () => {
+                this.getImages();
+            });
+            /* layer */
+            this.filterLayerEl.addEventListener("valueChanged", () => {
+                this.getImages();
             });
             // for grid selection
-            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("selectionChanged", (ev) => {
-                const selectedId = ev.detail.rowsId[0];
-                if (__classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").has(selectedId)) {
-                    this.imagesSelectedItems = __classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").get(selectedId);
-                }
-                else {
-                    this.loadImageItemsCallback(selectedId).then((items) => {
-                        __classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").set(selectedId, items);
-                        this.imagesSelectedItems = items;
-                    });
-                }
+            this.chGridEl.addEventListener("selectionChanged", (ev) => {
+                this.loadImageItemsCallback(ev.detail.rowsId[0]).then((items) => {
+                    this.imagesSelectedItems = items;
+                });
             });
-            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowDoubleClicked", () => {
-                __classPrivateFieldGet(this, _GxIdeWWImages_openSelectionCallBackHandler, "f").call(this);
+            this.chGridEl.addEventListener("rowDoubleClicked", () => {
+                this.openSelectionCallBackHandler();
             });
-            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("selectionChanged", (ev) => {
+            this.chGridEl.addEventListener("selectionChanged", (ev) => {
                 this.selectedObjectsIds = ev.detail.rowsId;
                 this.selectionObjectChangedCallback(this.selectedObjectsIds);
             });
-            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowContextMenu", (ev) => {
+            this.chGridEl.addEventListener("rowContextMenu", (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.contextMenuCallback({
@@ -189,267 +234,120 @@ export class GxIdeWWImages {
                     clientY: ev.detail.clientY
                 });
             });
-        });
-        _GxIdeWWImages_newObjectCallbackHandler.set(this, () => {
-            this.newObjectCallback();
-        });
-        _GxIdeWWImages_openSelectionCallBackHandler.set(this, () => {
-            this.openSelectionCallback(this.selectedObjectsIds);
-        });
-        // #removeDetectClickOutsideFilter = () => {
-        //   document.removeEventListener("click", this.#detectClickOutsideFilter);
-        // };
-        _GxIdeWWImages_renderHeader.set(this, () => {
-            return [
-                h("div", {
-                    // name
-                    class: "field field-block name"
-                }, h("label", { class: "label", htmlFor: "filter-name" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.name), h("ch-edit", { id: "filter-name", class: "input name", ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterNameEl, el, "f")), debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f"), part: "filter-name" })),
-                h("div", { class: "field field-block module-folder" }, h("label", { class: "label", htmlFor: "module-folder" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.moduleFolder), h("gx-ide-entity-selector", {
-                    // module/folder
-                    class: "module-folder", part: "filter-module-folder", id: "module/folder", labelPosition: "none", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterModuleEl, el, "f"))
-                })),
-                h("button", {
-                    // toggle / untoggle filter button
-                    class: "button-secondary button-icon-and-text", onClick: __classPrivateFieldGet(this, _GxIdeWWImages_toggleFilterButtonClickedHandler, "f")
-                }, h("ch-image", { class: "icon-md", src: FILTER_ICON }), this.filterSidebarExpanded
-                    ? __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.less
-                    : __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.more)
-                // <button
-                //   class="button-tertiary button-icon-only"
-                //   aria-label={
-                //     this.toggleFilterButtonActive
-                //       ? this.#_componentLocale.filter.btnUntoggleFilter
-                //       : this.#_componentLocale.filter.btnToggleFilter
-                //   }
-                //   onClick={this.#toggleFilterButtonClickedHandler}
-                // >
-                //   <ch-image class="icon-md" src={FILTER_ICON}></ch-image>
-                // </button>
-            ];
-        });
-        _GxIdeWWImages_renderFilter.set(this, () => {
-            var _a, _b, _c, _d, _e;
-            return (h("div", { class: "sidebar-container scrollable" }, h("ch-sidebar", { class: "sidebar sidebar-collapsed-hidden sidebar-with-motion sidebar-filter", expanded: this.filterSidebarExpanded }, h("div", { class: "main__filter field-group spacing-body-inline spacing-body-block scrollable" }, h("ch-checkbox", { class: "checkbox all-descendants", caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.allDescendants, checkedValue: "filterAllDescendants", ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterAllDescendantsEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f"), part: "filter-all-descendants" }), h("ch-accordion-render", {
-                // modified
-                class: "accordion-outlined modified-accordion", model: MODIFIED_ACCORDION_MODEL
-            }, h("div", { slot: "modified", class: "spacing-body" }, h("div", { class: "field-group field-group-modified" }, h("div", {
-                // after
-                class: "field field-block after-date-time"
-            }, h("label", { class: "label", htmlFor: "filter-after-type" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.afterLabel), h("ch-combo-box-render", { id: "filter-after-type", class: "combo-box", value: (_a = this.filterAfterOptions[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterAfterTypeEl, el, "f")), model: this.filterAfterOptions, part: "filter-after-type", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_filterAfterTypeChangeHandler, "f") })), h("div", {
-                // date/time
-                class: "field field-block date-time"
-            }, h("label", { class: {
-                    "label": true,
-                    "label--disabled": this.afterCurrentValue !== FILTER_AFTER.DATE_TIME
-                }, htmlFor: "modified-date" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.dateTime), h("input", { type: "datetime-local", class: "input ", id: "modified-date", name: "modifiedDate", part: "modified-date", max: TODAY, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterModifiedDateEl, el, "f")), disabled: this.afterCurrentValue !== FILTER_AFTER.DATE_TIME, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
-                // user
-                class: "field field-block user"
-            }, h("label", { class: "label", htmlFor: "filter-user" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.user), h("ch-edit", { id: "filter-user", value: "hey", class: "input", ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterUserEl, el, "f")), debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f"), part: "filter-user" }))))), h("div", {
-                // category
-                class: "field field-block category"
-            }, h("label", { class: "label", htmlFor: "filter-category" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.category), h("ch-combo-box-render", { id: "filter-category", class: "combo-box", value: this.defaultCategory, disabled: !this.categories, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterCategoryEl, el, "f")), model: this.categoriesComboBoxModel, part: "filter-category", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
-                // style
-                class: "field field-block style"
-            }, h("label", { class: "label", htmlFor: "filter-style" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.style), h("ch-combo-box-render", { id: "filter-style", class: "combo-box", value: (_b = this.stylesComboBoxModel[0]) === null || _b === void 0 ? void 0 : _b.value, disabled: !this.styles, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterStyleEl, el, "f")), model: this.stylesComboBoxModel, part: "filter-style", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
-                // language
-                class: "field field-block language"
-            }, h("label", { class: "label", htmlFor: "filter-language" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.language), h("ch-combo-box-render", { id: "filter-language", class: "combo-box", value: (_c = this.languagesComboBoxModel[0]) === null || _c === void 0 ? void 0 : _c.value, disabled: !this.languages, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterLanguageEl, el, "f")), model: this.languagesComboBoxModel, part: "filter-language", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
-                // density
-                class: "field field-block"
-            }, h("label", { class: "label", htmlFor: "filter-density" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.density), h("ch-combo-box-render", { id: "filter-density", class: "combo-box", value: (_d = this.densitiesComboBoxModel[0]) === null || _d === void 0 ? void 0 : _d.value, disabled: !this.densities, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterDensityEl, el, "f")), model: this.densitiesComboBoxModel, part: "filter-density", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
-                // layer
-                class: "field field-block"
-            }, h("label", { class: "label", htmlFor: "filter-layer" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.layer), h("ch-combo-box-render", { id: "filter-layer", class: "combo-box", value: (_e = this.layersComboBoxModel[0]) === null || _e === void 0 ? void 0 : _e.value, disabled: !this.layers, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterLayerEl, el, "f")), model: this.layersComboBoxModel, part: "filter-layer", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })))), __classPrivateFieldGet(this, _GxIdeWWImages_renderImages, "f").call(this)));
-        });
-        _GxIdeWWImages_renderImages.set(this, () => {
-            return (
-            /* tiles */
-            h("div", { class: "main__images-container spacing-body-inline" }, this.imagesSelectedItems.map(item => (h("figure", { class: "figure" }, h("picture", { class: "figure__picture" }, h("img", { class: "figure__img", src: item.url, alt: item.name })), h("figcaption", { class: "figure__figcaption" }, item.name))))));
-        });
-        _GxIdeWWImages_renderImagesData.set(this, () => {
-            return (h("div", { class: {
-                    "field-group": true,
-                    "main__grid": true,
-                    "main__grid--with-filter": this.secondaryFilter
-                } }, this.secondaryFilter ? (h("header", { class: "images-information__header spacing-body-inline-start", slot: "header" }, h("div", {
-                // search contents
-                class: "field field-inline"
-            }, h("label", { class: "label", htmlFor: "search-input" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.search), h("ch-edit", { id: "search-input", class: "input name", placeholder: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.searchByContentPlaceholder, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterSearchContentsEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeWWImages_filterInputHandler, "f"), startImgSrc: SEARCH_ICON, part: "search-input" })))) : null, h("ch-tabular-grid", { ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_chGridEl, el, "f")), part: "ch-grid-images", rowSelectionMode: "multiple", class: "tabular-grid tabular-grid-ww-images" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { columnName: "", columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.name, columnNameHidden: false, settingable: false, class: "tabular-grid-column", size: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.module, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.common, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.description, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.commonDouble, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.modifiedDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.lastUser, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.importDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" })), this.filteredImages.length ? (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, this.filteredImages.map((obj) => (h("ch-tabular-grid-row", { rowid: obj.id, class: "tabular-grid-row" }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("ch-image", { src: obj.icon })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.name.toLowerCase(), this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.module.toLowerCase(), this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.description.toLowerCase(), this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.modifiedDate)}`, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.lastUser.toLowerCase(), this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.importDate)}`, this.filterImagesInputValue))))))) : null
-            // TODO (Add empty state)
-            )));
-        });
-        _GxIdeWWImages_resetFilterHandler.set(this, () => {
-            if (__classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f")) {
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterNameEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").name;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").module;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterSearchContentsEl, "f").value =
-                    __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").searchContents;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterCategoryEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").category;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterAllDescendantsEl, "f").value =
-                    __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").allDescendants;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterAfterTypeEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").modifiedAfter;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterModifiedDateEl, "f").value =
-                    __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").modifiedDateTime;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterUserEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").modifiedUser;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterStyleEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").style;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterLanguageEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").language;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterDensityEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").density;
-                __classPrivateFieldGet(this, _GxIdeWWImages_filterLayerEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").layer;
-                __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
-                this.afterCurrentValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterCategoryEl, "f").value; // this value has to be evaluated on a re-render
-            }
-        });
-        _GxIdeWWImages_saveInitialFilterData.set(this, () => {
-            var _a, _b, _c;
-            __classPrivateFieldSet(this, _GxIdeWWImages_filterInitialData, {
-                name: __classPrivateFieldGet(this, _GxIdeWWImages_filterNameEl, "f").value,
-                module: __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").value,
-                searchContents: __classPrivateFieldGet(this, _GxIdeWWImages_filterSearchContentsEl, "f").value,
-                category: __classPrivateFieldGet(this, _GxIdeWWImages_filterCategoryEl, "f").value,
-                allDescendants: __classPrivateFieldGet(this, _GxIdeWWImages_filterAllDescendantsEl, "f").value,
-                modifiedAfter: (_a = __classPrivateFieldGet(this, _GxIdeWWImages_filterAfterTypeEl, "f")) === null || _a === void 0 ? void 0 : _a.value,
-                modifiedDateTime: (_b = __classPrivateFieldGet(this, _GxIdeWWImages_filterModifiedDateEl, "f")) === null || _b === void 0 ? void 0 : _b.value,
-                modifiedUser: (_c = __classPrivateFieldGet(this, _GxIdeWWImages_filterUserEl, "f")) === null || _c === void 0 ? void 0 : _c.value,
-                style: __classPrivateFieldGet(this, _GxIdeWWImages_filterStyleEl, "f").value,
-                language: __classPrivateFieldGet(this, _GxIdeWWImages_filterLanguageEl, "f").value,
-                density: __classPrivateFieldGet(this, _GxIdeWWImages_filterDensityEl, "f").value,
-                layer: __classPrivateFieldGet(this, _GxIdeWWImages_filterLayerEl, "f").value
-            }, "f");
-        });
-        _GxIdeWWImages_selectAll.set(this, () => {
-            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").selectAllRows();
-        });
-        this.categoriesComboBoxModel = [];
-        this.densitiesComboBoxModel = [];
-        this.languagesComboBoxModel = [];
-        this.layersComboBoxModel = [];
-        this.stylesComboBoxModel = [];
-        this.filterSidebarExpanded = false;
-        this.afterCurrentValue = undefined;
-        this.filterAfterOptions = undefined;
-        this.filterImagesInputValue = "";
+        };
+        this.filterInputHandler = (e) => {
+            this.filterImagesInputValue = e.detail;
+            this.filterImagesInformationHandler();
+        };
+        this.filterImagesInformationHandler = () => {
+            const filterValue = this.filterImagesInputValue.toLocaleLowerCase();
+            this.filteredImages = this.images.filter(image => {
+                const nameMatch = image.name.toLocaleLowerCase().includes(filterValue);
+                const moduleMatch = image.module
+                    .toLocaleLowerCase()
+                    .includes(filterValue);
+                const descriptionMatch = image.description
+                    .toLocaleLowerCase()
+                    .includes(filterValue);
+                const modifiedDateMatch = image.modifiedDate
+                    .toString()
+                    .includes(filterValue);
+                const lastUser = image.lastUser.toLocaleLowerCase().includes(filterValue);
+                const importDateMatch = image.importDate && image.importDate.toString().includes(filterValue);
+                return (nameMatch ||
+                    moduleMatch ||
+                    descriptionMatch ||
+                    modifiedDateMatch ||
+                    lastUser ||
+                    importDateMatch);
+            });
+        };
+        this.filtersHidden = true;
+        this.filterAfterType = "";
         this.filterModified = false;
-        this.filteredImages = [];
         this.images = [];
+        this.filteredImages = [];
         this.imagesSelectedItems = [];
         this.selectedObjectsIds = [];
-        this.toggleFilterButtonActive = false;
+        this.filterImagesInputValue = "";
+        this.displayTitle = false;
+        this.secondaryFilter = false;
         this.categories = undefined;
-        this.contextMenuCallback = undefined;
+        this.densities = undefined;
         this.defaultCategory = undefined;
         this.defaultModule = undefined;
-        this.deleteSelectionCallback = undefined;
-        this.densities = 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.selectionObjectChangedCallback = undefined;
-        this.secondaryFilter = false;
         this.shadow = false;
         this.styles = undefined;
         this.types = undefined;
     }
-    toggleFilterButtonActiveChanged(active) {
-        this.filterSidebarExpanded = active;
-    }
-    categoriesChanged(newCategories) {
-        this.categoriesComboBoxModel = mapOptionsToComboBoxItemModel(newCategories);
-    }
-    densitiesChanged(newDensities) {
-        this.densitiesComboBoxModel = mapOptionsToComboBoxItemModel(newDensities);
-    }
-    languagesChanged(newLanguages) {
-        this.languagesComboBoxModel = mapOptionsToComboBoxItemModel(newLanguages);
-    }
-    layersChanged(newLayers) {
-        this.layersComboBoxModel = mapOptionsToComboBoxItemModel(newLayers);
-    }
-    stylesChanged(newStyles) {
-        this.stylesComboBoxModel = mapOptionsToComboBoxItemModel(newStyles);
+    filtersHiddenHandler(hidden) {
+        if (hidden) {
+            this.removeDetectClickOutsideFilter();
+        }
+        else {
+            this.attachDetectClickOutsideFilter();
+        }
     }
-    async connectedCallback() {
-        TODAY = __classPrivateFieldGet(this, _GxIdeWWImages_getToday, "f").call(this);
+    // 6.COMPONENT LIFECYCLE EVENTS //
+    async componentWillLoad() {
+        this._componentLocale = await Locale.getComponentStrings(this.el);
+        this.componentDidLoadEvent.emit(true);
     }
     componentDidLoad() {
-        __classPrivateFieldGet(this, _GxIdeWWImages_listenChanges, "f").call(this);
-        __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
-        __classPrivateFieldGet(this, _GxIdeWWImages_saveInitialFilterData, "f").call(this);
-        __classPrivateFieldGet(this, _GxIdeWWImages_filterNameEl, "f").focus();
+        this.listenChanges();
+        this.getImages();
+        this.saveInitialFilterData();
+        this.filterNameEl.focus();
     }
     componentDidRender() {
-        if (!__classPrivateFieldGet(this, _GxIdeWWImages_renderedFirstTime, "f")) {
-            this.componentDidRenderFirstTime.emit(__classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").componentName);
-            __classPrivateFieldSet(this, _GxIdeWWImages_renderedFirstTime, true, "f");
+        if (!this.renderedFirstTime) {
+            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+            this.renderedFirstTime = true;
         }
     }
-    async componentWillLoad() {
-        __classPrivateFieldSet(this, _GxIdeWWImages__componentLocale, await Locale.getComponentStrings(this.el), "f");
-        this.componentDidLoadEvent.emit(true);
-        // initialize combo-box models
-        this.categoriesChanged(this.categories);
-        this.densitiesChanged(this.densities);
-        this.languagesChanged(this.languages);
-        this.layersChanged(this.layers);
-        this.stylesChanged(this.styles);
-        // initialize "After" combo-box options
-        this.filterAfterOptions = [
-            {
-                caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.afterNone,
-                value: FILTER_AFTER.NONE
-            },
-            {
-                caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter[FILTER_AFTER.DATE_TIME],
-                value: FILTER_AFTER.DATE_TIME
-            },
-            {
-                caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter[FILTER_AFTER.IMPORT],
-                value: FILTER_AFTER.IMPORT
-            },
-            {
-                caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter[FILTER_AFTER.LAST_BUILD],
-                value: FILTER_AFTER.LAST_BUILD
-            }
-        ];
-        this.afterCurrentValue = this.filterAfterOptions[0].value;
-    }
+    // 7.LISTENERS //
     keyDownHandler(eventInfo) {
         if (document.activeElement === this.el) {
             switch (eventInfo.key) {
                 case "Enter":
-                    __classPrivateFieldGet(this, _GxIdeWWImages_openSelectionCallBackHandler, "f").call(this);
+                    this.openSelectionCallBackHandler();
                     break;
                 case "Delete":
-                    __classPrivateFieldGet(this, _GxIdeWWImages_deleteSelectionCallbackHandler, "f").call(this);
+                    this.deleteSelectionCallbackHandler();
                     break;
             }
         }
     }
+    // 8.PUBLIC METHODS API //
     /**
-     * Reloads the view, refreshing the filters and the images table.
+     * 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() {
-        __classPrivateFieldGet(this, _GxIdeWWImages_deleteSelectionCallbackHandler, "f").call(this);
-        __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        this.deleteSelectionCallbackHandler();
+        this.getImages();
     }
+    // 10.RENDER() FUNCTION //
     render() {
-        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("header", { class: "header control-header-with-border spacing-body-inline spacing-body-block-start field-group" }, __classPrivateFieldGet(this, _GxIdeWWImages_renderHeader, "f").call(this)), h("div", { class: "main" }, __classPrivateFieldGet(this, _GxIdeWWImages_renderImagesData, "f").call(this), h("div", { class: "main__aside field-group" }, h("div", { class: "spacing-body-inline" }, h("button", {
-            // reset filter button
-            class: "button-secondary button-icon-and-text button-reset", onClick: __classPrivateFieldGet(this, _GxIdeWWImages_resetFilterHandler, "f")
-        }, h("ch-image", { class: "icon-sm", src: RESET_ICON }), "Reset")), __classPrivateFieldGet(this, _GxIdeWWImages_renderFilter, "f").call(this))), h("footer", { class: "control-footer-with-border control-footer-space-between spacing-body" }, h("p", {
-            // matching objects
-            class: "text-body", part: "objects-matching"
-        }, `${this.filteredImages.length} ${__classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").objCount.matching}`), h("div", { class: "buttons-spacer" }, h("button", {
-            // select all button
-            id: "button-select-all", class: "button-secondary", onClick: __classPrivateFieldGet(this, _GxIdeWWImages_selectAll, "f"), part: "button button--select-all"
-        }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").footer.btnSelectAll), h("button", {
-            // new image button
-            id: "button-new-file", class: "button-primary button-icon-and-text", onClick: __classPrivateFieldGet(this, _GxIdeWWImages_newObjectCallbackHandler, "f"), part: "button button--new-file"
-        }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").footer.btnNew))))));
+        return (h(Host, { class: "gx-ide-component" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "master-wrapper" }, this.renderFilter(), h("div", { class: "grid-images-container" }, this.renderImagesData(), this.renderImages())), h("gxg-button", { id: "button-select-all", type: "outlined", onClick: this.selectAll, part: "gxg-button gxg-button--select-all", slot: "footer-end" }, this._componentLocale.footer.btnSelectAll), h("gxg-button", { id: "button-new-file", type: "primary-text-icon", icon: "objects/image", onClick: this.newObjectCallbackHandler, part: "gxg-button gxg-button--new-file", slot: "footer-end" }, this._componentLocale.footer.btnNew), h("gxg-text", { class: "align-end", part: "objects-matching", slot: "footer-start" }, `${this.filteredImages.length} ${this._componentLocale.objCount.matching}`)))));
     }
     static get is() { return "gx-ide-ww-images"; }
     static get encapsulation() { return "shadow"; }
@@ -466,6 +364,42 @@ export class GxIdeWWImages {
     static get assetsDirs() { return ["gx-ide-assets/ww-images"]; }
     static get properties() {
         return {
+            "displayTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "false",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true it displays the component title on the header"
+                },
+                "attribute": "display-title",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "secondaryFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "false",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays a secondary filter, used to filter over the filtered images"
+                },
+                "attribute": "secondary-filter",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "categories": {
                 "type": "unknown",
                 "mutable": false,
@@ -484,20 +418,20 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Categories rendered in the filter selector"
+                    "text": "The categories render in the filter category selector"
                 }
             },
-            "contextMenuCallback": {
+            "densities": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ContextMenuCallback",
-                    "resolved": "(contextMenuInfo: ContextMenuInfo) => Promise<void>",
+                    "original": "GxOption[]",
+                    "resolved": "GxOption[]",
                     "references": {
-                        "ContextMenuCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/ww-images/ww-images.tsx",
-                            "id": "src/components/ww-images/ww-images.tsx::ContextMenuCallback"
+                        "GxOption": {
+                            "location": "import",
+                            "path": "../../common/types",
+                            "id": "src/common/types.ts::GxOption"
                         }
                     }
                 },
@@ -505,7 +439,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Function to expand data when right-click"
+                    "text": "The densities render in the filter density selector"
                 }
             },
             "defaultCategory": {
@@ -520,7 +454,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Default value for the 'categories' filter"
+                    "text": "The default value for the 'categories' filter"
                 },
                 "attribute": "default-category",
                 "reflect": false
@@ -543,31 +477,27 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Default value for the module/folder filter"
+                    "text": "The default value for the module/folder filter"
                 }
             },
-            "deleteSelectionCallback": {
-                "type": "unknown",
+            "defaultType": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DeleteSelectionCallback",
-                    "resolved": "(ids: string[]) => Promise<void>",
-                    "references": {
-                        "DeleteSelectionCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/ww-images/ww-images.tsx",
-                            "id": "src/components/ww-images/ww-images.tsx::DeleteSelectionCallback"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Function to delete the selected images."
-                }
+                    "text": "The default value for the type filter"
+                },
+                "attribute": "default-type",
+                "reflect": false
             },
-            "densities": {
+            "filterModules": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -585,7 +515,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Densities rendered in the filter selector"
+                    "text": "The modules/folders render in the module/folder selector"
                 }
             },
             "languages": {
@@ -606,7 +536,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Languages rendered in the filter selector"
+                    "text": "The languages render in the filter language selector"
                 }
             },
             "layers": {
@@ -627,7 +557,49 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Layers rendered in the filter selector"
+                    "text": "The layers render in the filter layer selector"
+                }
+            },
+            "contextMenuCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContextMenuCallback",
+                    "resolved": "(contextMenuInfo: ContextMenuInfo) => Promise<void>",
+                    "references": {
+                        "ContextMenuCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/ww-images/ww-images.tsx",
+                            "id": "src/components/ww-images/ww-images.tsx::ContextMenuCallback"
+                        }
+                    }
+                },
+                "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",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/ww-images/ww-images.tsx",
+                            "id": "src/components/ww-images/ww-images.tsx::DeleteSelectionCallback"
+                        }
+                    }
+                },
+                "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": {
@@ -648,7 +620,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Function that returns a list of images for the table"
+                    "text": "This is a function provided by the developer that return a list of images to populate the table of images."
                 }
             },
             "loadImageItemsCallback": {
@@ -669,7 +641,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Function that returns a list of items for the selected image"
+                    "text": "This is a function provided by the developer that return a list of items of the image selected."
                 }
             },
             "newObjectCallback": {
@@ -690,7 +662,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when user press New button."
+                    "text": "This is a function provided by the developer for expanded the data of images that is double-clicked or entered."
                 }
             },
             "openSelectionCallback": {
@@ -711,7 +683,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Function to expand data for double-clicked or entered images"
+                    "text": "This is a function provided by the developer for expanded the data of images that is double-clicked or entered."
                 }
             },
             "selectModuleCallback": {
@@ -732,7 +704,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when an action is executed on the Module/Folder filter."
+                    "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."
                 }
             },
             "selectionObjectChangedCallback": {
@@ -753,27 +725,9 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when an item is selected"
+                    "text": "This is a function provided by the developer for expanded the data of images that is double-clicked or entered."
                 }
             },
-            "secondaryFilter": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Displays a secondary filter, used to filter over the filtered images"
-                },
-                "attribute": "secondary-filter",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "shadow": {
                 "type": "boolean",
                 "mutable": false,
@@ -810,7 +764,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Styles rendered in the filter style selector"
+                    "text": "The styles render in the filter style selector"
                 }
             },
             "types": {
@@ -831,28 +785,21 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Types rendered in the filter type selector"
+                    "text": "The types render in the filter type selector"
                 }
             }
         };
     }
     static get states() {
         return {
-            "categoriesComboBoxModel": {},
-            "densitiesComboBoxModel": {},
-            "languagesComboBoxModel": {},
-            "layersComboBoxModel": {},
-            "stylesComboBoxModel": {},
-            "filterSidebarExpanded": {},
-            "afterCurrentValue": {},
-            "filterAfterOptions": {},
-            "filterImagesInputValue": {},
+            "filtersHidden": {},
+            "filterAfterType": {},
             "filterModified": {},
-            "filteredImages": {},
             "images": {},
+            "filteredImages": {},
             "imagesSelectedItems": {},
             "selectedObjectsIds": {},
-            "toggleFilterButtonActive": {}
+            "filterImagesInputValue": {}
         };
     }
     static get events() {
@@ -864,7 +811,7 @@ export class GxIdeWWImages {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted once after the component fully loads and renders for the first time."
+                    "text": "This event is emitted once just after the component is fully loaded and the first render() occurs."
                 },
                 "complexType": {
                     "original": "boolean",
@@ -893,6 +840,23 @@ export class GxIdeWWImages {
     }
     static get methods() {
         return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validate necessary data input",
+                    "tags": []
+                }
+            },
             "reload": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -906,7 +870,7 @@ export class GxIdeWWImages {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Reloads the view, refreshing the filters and the images table.",
+                    "text": "This method reload the view, refreshing the filters and the table of images.",
                     "tags": []
                 }
             }
@@ -915,23 +879,8 @@ export class GxIdeWWImages {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "toggleFilterButtonActive",
-                "methodName": "toggleFilterButtonActiveChanged"
-            }, {
-                "propName": "categories",
-                "methodName": "categoriesChanged"
-            }, {
-                "propName": "densities",
-                "methodName": "densitiesChanged"
-            }, {
-                "propName": "languages",
-                "methodName": "languagesChanged"
-            }, {
-                "propName": "layers",
-                "methodName": "layersChanged"
-            }, {
-                "propName": "styles",
-                "methodName": "stylesChanged"
+                "propName": "filtersHidden",
+                "methodName": "filtersHiddenHandler"
             }];
     }
     static get listeners() {
@@ -944,5 +893,4 @@ export class GxIdeWWImages {
             }];
     }
 }
-_GxIdeWWImages__componentLocale = new WeakMap(), _GxIdeWWImages_filterInitialData = new WeakMap(), _GxIdeWWImages_renderedFirstTime = new WeakMap(), _GxIdeWWImages_imagesMap = new WeakMap(), _GxIdeWWImages_chGridEl = new WeakMap(), _GxIdeWWImages_filterAfterTypeEl = new WeakMap(), _GxIdeWWImages_filterAllDescendantsEl = new WeakMap(), _GxIdeWWImages_filterCategoryEl = new WeakMap(), _GxIdeWWImages_filterDensityEl = new WeakMap(), _GxIdeWWImages_filterLanguageEl = new WeakMap(), _GxIdeWWImages_filterLayerEl = new WeakMap(), _GxIdeWWImages_filterModifiedDateEl = new WeakMap(), _GxIdeWWImages_filterModuleEl = new WeakMap(), _GxIdeWWImages_filterNameEl = new WeakMap(), _GxIdeWWImages_filterSearchContentsEl = new WeakMap(), _GxIdeWWImages_filterStyleEl = new WeakMap(), _GxIdeWWImages_filterUserEl = new WeakMap(), _GxIdeWWImages_deleteSelectionCallbackHandler = new WeakMap(), _GxIdeWWImages_deselectAll = new WeakMap(), _GxIdeWWImages_filterAfterTypeChangeHandler = new WeakMap(), _GxIdeWWImages_filterImagesInformationHandler = new WeakMap(), _GxIdeWWImages_filterInputHandler = new WeakMap(), _GxIdeWWImages_toggleFilterButtonClickedHandler = new WeakMap(), _GxIdeWWImages_getImages = new WeakMap(), _GxIdeWWImages_getToday = new WeakMap(), _GxIdeWWImages_listenChanges = new WeakMap(), _GxIdeWWImages_newObjectCallbackHandler = new WeakMap(), _GxIdeWWImages_openSelectionCallBackHandler = new WeakMap(), _GxIdeWWImages_renderHeader = new WeakMap(), _GxIdeWWImages_renderFilter = new WeakMap(), _GxIdeWWImages_renderImages = new WeakMap(), _GxIdeWWImages_renderImagesData = new WeakMap(), _GxIdeWWImages_resetFilterHandler = new WeakMap(), _GxIdeWWImages_saveInitialFilterData = new WeakMap(), _GxIdeWWImages_selectAll = new WeakMap();
 //# sourceMappingURL=ww-images.js.map