@genexus/genexus-ide-ui 1.0.18 → 1.0.19

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

@@ -1,231 +1,186 @@
+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 { Locale } from "../../common/locale";
-import { config } from "../../common/config";
-import { renderFormItems } from "../../common/common";
 import { FILTER_AFTER } from "../../common/constants";
-import { formatDate, hiChar, closeOnOutsideClickHandler } from "../../common/helpers";
+import { config } from "../../common/config";
+import { formatDate, hiChar } from "../../common/helpers";
+import { Locale } from "../../common/locale";
+import { mapOptionsToComboBoxItemModel } from "./helpers";
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    // "utils/form",
-    // "utils/layout",
-    // "utils/typography",
-    // "components/button",
-    // "components/checkbox",
-    // "components/edit",
-    "components/tabular-grid"
+    "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
+    }
 ];
 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;
-            }
-        };
         /**
-         * @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.
+         * The component hard-coded strings translations.
          */
-        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", { 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
+        _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
             };
-            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.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();
+                __classPrivateFieldGet(this, _GxIdeWWImages_deselectAll, "f").call(this);
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterImagesInformationHandler, "f").call(this);
             });
+        });
+        _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 */
-            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();
+            __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").addEventListener("valueChanged", () => {
+                __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
             });
             // for grid selection
-            this.chGridEl.addEventListener("selectionChanged", (ev) => {
-                this.loadImageItemsCallback(ev.detail.rowsId[0]).then((items) => {
-                    this.imagesSelectedItems = items;
-                });
+            __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("rowDoubleClicked", () => {
-                this.openSelectionCallBackHandler();
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowDoubleClicked", () => {
+                __classPrivateFieldGet(this, _GxIdeWWImages_openSelectionCallBackHandler, "f").call(this);
             });
-            this.chGridEl.addEventListener("selectionChanged", (ev) => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("selectionChanged", (ev) => {
                 this.selectedObjectsIds = ev.detail.rowsId;
                 this.selectionObjectChangedCallback(this.selectedObjectsIds);
             });
-            this.chGridEl.addEventListener("rowContextMenu", (ev) => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowContextMenu", (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.contextMenuCallback({
@@ -234,120 +189,267 @@ export class GxIdeWWImages {
                     clientY: ev.detail.clientY
                 });
             });
-        };
-        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 = "";
+        });
+        _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.filterModified = false;
-        this.images = [];
         this.filteredImages = [];
+        this.images = [];
         this.imagesSelectedItems = [];
         this.selectedObjectsIds = [];
-        this.filterImagesInputValue = "";
-        this.displayTitle = false;
-        this.secondaryFilter = false;
+        this.toggleFilterButtonActive = false;
         this.categories = undefined;
-        this.densities = undefined;
+        this.contextMenuCallback = undefined;
         this.defaultCategory = undefined;
         this.defaultModule = undefined;
-        this.defaultType = undefined;
-        this.filterModules = undefined;
+        this.deleteSelectionCallback = undefined;
+        this.densities = 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;
     }
-    filtersHiddenHandler(hidden) {
-        if (hidden) {
-            this.removeDetectClickOutsideFilter();
-        }
-        else {
-            this.attachDetectClickOutsideFilter();
-        }
+    toggleFilterButtonActiveChanged(active) {
+        this.filterSidebarExpanded = active;
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.componentDidLoadEvent.emit(true);
+    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);
+    }
+    async connectedCallback() {
+        TODAY = __classPrivateFieldGet(this, _GxIdeWWImages_getToday, "f").call(this);
     }
     componentDidLoad() {
-        this.listenChanges();
-        this.getImages();
-        this.saveInitialFilterData();
-        this.filterNameEl.focus();
+        __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();
     }
     componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_renderedFirstTime, "f")) {
+            this.componentDidRenderFirstTime.emit(__classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").componentName);
+            __classPrivateFieldSet(this, _GxIdeWWImages_renderedFirstTime, true, "f");
         }
     }
-    // 7.LISTENERS //
+    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;
+    }
     keyDownHandler(eventInfo) {
         if (document.activeElement === this.el) {
             switch (eventInfo.key) {
                 case "Enter":
-                    this.openSelectionCallBackHandler();
+                    __classPrivateFieldGet(this, _GxIdeWWImages_openSelectionCallBackHandler, "f").call(this);
                     break;
                 case "Delete":
-                    this.deleteSelectionCallbackHandler();
+                    __classPrivateFieldGet(this, _GxIdeWWImages_deleteSelectionCallbackHandler, "f").call(this);
                     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.
+     * Reloads the view, refreshing the filters and the images table.
      */
     async reload() {
-        this.deleteSelectionCallbackHandler();
-        this.getImages();
+        __classPrivateFieldGet(this, _GxIdeWWImages_deleteSelectionCallbackHandler, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        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}`)))));
+        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))))));
     }
     static get is() { return "gx-ide-ww-images"; }
     static get encapsulation() { return "shadow"; }
@@ -364,42 +466,6 @@ 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,
@@ -418,20 +484,20 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The categories render in the filter category selector"
+                    "text": "Categories rendered in the filter selector"
                 }
             },
-            "densities": {
+            "contextMenuCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GxOption[]",
-                    "resolved": "GxOption[]",
+                    "original": "ContextMenuCallback",
+                    "resolved": "(contextMenuInfo: ContextMenuInfo) => Promise<void>",
                     "references": {
-                        "GxOption": {
-                            "location": "import",
-                            "path": "../../common/types",
-                            "id": "src/common/types.ts::GxOption"
+                        "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"
                         }
                     }
                 },
@@ -439,7 +505,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The densities render in the filter density selector"
+                    "text": "Function to expand data when right-click"
                 }
             },
             "defaultCategory": {
@@ -454,7 +520,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The default value for the 'categories' filter"
+                    "text": "Default value for the 'categories' filter"
                 },
                 "attribute": "default-category",
                 "reflect": false
@@ -477,27 +543,31 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The default value for the module/folder filter"
+                    "text": "Default value for the module/folder filter"
                 }
             },
-            "defaultType": {
-                "type": "string",
+            "deleteSelectionCallback": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "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": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The default value for the type filter"
-                },
-                "attribute": "default-type",
-                "reflect": false
+                    "text": "Function to delete the selected images."
+                }
             },
-            "filterModules": {
+            "densities": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -515,7 +585,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The modules/folders render in the module/folder selector"
+                    "text": "Densities rendered in the filter selector"
                 }
             },
             "languages": {
@@ -536,7 +606,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The languages render in the filter language selector"
+                    "text": "Languages rendered in the filter selector"
                 }
             },
             "layers": {
@@ -557,49 +627,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "text": "Layers rendered in the filter selector"
                 }
             },
             "loadCallback": {
@@ -620,7 +648,7 @@ export class GxIdeWWImages {
                 "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."
+                    "text": "Function that returns a list of images for the table"
                 }
             },
             "loadImageItemsCallback": {
@@ -641,7 +669,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "This is a function provided by the developer that return a list of items of the image selected."
+                    "text": "Function that returns a list of items for the selected image"
                 }
             },
             "newObjectCallback": {
@@ -662,7 +690,7 @@ export class GxIdeWWImages {
                 "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."
+                    "text": "Callback invoked when user press New button."
                 }
             },
             "openSelectionCallback": {
@@ -683,7 +711,7 @@ export class GxIdeWWImages {
                 "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."
+                    "text": "Function to expand data for double-clicked or entered images"
                 }
             },
             "selectModuleCallback": {
@@ -704,7 +732,7 @@ export class GxIdeWWImages {
                 "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."
+                    "text": "Callback invoked when an action is executed on the Module/Folder filter."
                 }
             },
             "selectionObjectChangedCallback": {
@@ -725,9 +753,27 @@ export class GxIdeWWImages {
                 "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."
+                    "text": "Callback invoked when an item is selected"
                 }
             },
+            "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,
@@ -764,7 +810,7 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The styles render in the filter style selector"
+                    "text": "Styles rendered in the filter style selector"
                 }
             },
             "types": {
@@ -785,21 +831,28 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The types render in the filter type selector"
+                    "text": "Types rendered in the filter type selector"
                 }
             }
         };
     }
     static get states() {
         return {
-            "filtersHidden": {},
-            "filterAfterType": {},
+            "categoriesComboBoxModel": {},
+            "densitiesComboBoxModel": {},
+            "languagesComboBoxModel": {},
+            "layersComboBoxModel": {},
+            "stylesComboBoxModel": {},
+            "filterSidebarExpanded": {},
+            "afterCurrentValue": {},
+            "filterAfterOptions": {},
+            "filterImagesInputValue": {},
             "filterModified": {},
-            "images": {},
             "filteredImages": {},
+            "images": {},
             "imagesSelectedItems": {},
             "selectedObjectsIds": {},
-            "filterImagesInputValue": {}
+            "toggleFilterButtonActive": {}
         };
     }
     static get events() {
@@ -811,7 +864,7 @@ export class GxIdeWWImages {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is emitted once just after the component is fully loaded and the first render() occurs."
+                    "text": "Emitted once after the component fully loads and renders for the first time."
                 },
                 "complexType": {
                     "original": "boolean",
@@ -840,23 +893,6 @@ 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>",
@@ -870,7 +906,7 @@ export class GxIdeWWImages {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "This method reload the view, refreshing the filters and the table of images.",
+                    "text": "Reloads the view, refreshing the filters and the images table.",
                     "tags": []
                 }
             }
@@ -879,8 +915,23 @@ export class GxIdeWWImages {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "filtersHidden",
-                "methodName": "filtersHiddenHandler"
+                "propName": "toggleFilterButtonActive",
+                "methodName": "toggleFilterButtonActiveChanged"
+            }, {
+                "propName": "categories",
+                "methodName": "categoriesChanged"
+            }, {
+                "propName": "densities",
+                "methodName": "densitiesChanged"
+            }, {
+                "propName": "languages",
+                "methodName": "languagesChanged"
+            }, {
+                "propName": "layers",
+                "methodName": "layersChanged"
+            }, {
+                "propName": "styles",
+                "methodName": "stylesChanged"
             }];
     }
     static get listeners() {
@@ -893,4 +944,5 @@ 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