@genexus/genexus-ide-ui 2.0.0 → 2.1.1

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

@@ -1,231 +1,240 @@
+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_instances, _GxIdeWWImages_componentLocale, _GxIdeWWImages_filterInitialData, _GxIdeWWImages_ACCORDION_MODEL, _GxIdeWWImages_ACCORDION_FILTER_ID, _GxIdeWWImages_imagesMap, _GxIdeWWImages_chGridEl, _GxIdeWWImages_filterModuleEl, _GxIdeWWImages_isInitialLoad, _GxIdeWWImages_deleteSelectionCallbackHandler, _GxIdeWWImages_deselectAll, _GxIdeWWImages_handleNameChange, _GxIdeWWImages_handleSearchContentsChange, _GxIdeWWImages_applyDefaultCategory, _GxIdeWWImages_handleCategoryChange, _GxIdeWWImages_handleAllDescendantsChange, _GxIdeWWImages_handleAfterTypeChange, _GxIdeWWImages_handleUserChange, _GxIdeWWImages_handleModifiedDateChange, _GxIdeWWImages_handleStyleChange, _GxIdeWWImages_handleLanguageChange, _GxIdeWWImages_handleDensityChange, _GxIdeWWImages_handleLayerChange, _GxIdeWWImages_handleModuleChange, _GxIdeWWImages_filterImagesInformationHandler, _GxIdeWWImages_getImages, _GxIdeWWImages_getToday, _GxIdeWWImages_addEventListeners, _GxIdeWWImages_getImageValue, _GxIdeWWImages_sortImages, _GxIdeWWImages_handleColumnSortChanged, _GxIdeWWImages_newObjectCallbackHandler, _GxIdeWWImages_openSelectionCallBackHandler, _GxIdeWWImages_toggleModifiedControls, _GxIdeWWImages_renderHeader, _GxIdeWWImages_renderFilter, _GxIdeWWImages_renderImages, _GxIdeWWImages_renderTabularGrid, _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 } 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/icon",
+    "components/tabular-grid",
+    "components/sidebar",
+    "utils/form",
+    "utils/layout",
+    "utils/typography",
+    "utils/spacing",
+    "chameleon/scrollbar"
 ];
+const ALL_DESCENDANTS_VALUE = "all-descendants";
+const MODIFIED_VALUE = "modified";
+let TODAY = null;
+// icons
+const RESET_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "reset",
+    colorType: "interactive"
+});
+const SEARCH_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "search",
+    colorType: "neutral"
+});
+const NOTICE_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "notice",
+    colorType: "on-elevation"
+});
 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;
-            }
-        };
+        _GxIdeWWImages_instances.add(this);
         /**
-         * @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", { 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
+        _GxIdeWWImages_componentLocale.set(this, void 0);
+        _GxIdeWWImages_filterInitialData.set(this, void 0);
+        _GxIdeWWImages_ACCORDION_MODEL.set(this, []);
+        _GxIdeWWImages_ACCORDION_FILTER_ID.set(this, "advanced-filter");
+        _GxIdeWWImages_imagesMap.set(this, new Map());
+        _GxIdeWWImages_chGridEl.set(this, void 0);
+        // Only keep refs that are actually needed for operations (event listeners)
+        _GxIdeWWImages_filterModuleEl.set(this, void 0);
+        /**
+         * Flag to prevent triggering #getImages on initial load
+         */
+        _GxIdeWWImages_isInitialLoad.set(this, true);
+        _GxIdeWWImages_deleteSelectionCallbackHandler.set(this, () => {
+            this.deleteSelectionCallback(this.selectedObjectsIds);
+        });
+        _GxIdeWWImages_deselectAll.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").selectAllRows(false);
+        });
+        /**
+         * Individual handler functions for each filter control
+         */
+        _GxIdeWWImages_handleNameChange.set(this, (event) => {
+            this.filterNameValue = (event.detail ||
+                event.target.value);
+        });
+        _GxIdeWWImages_handleSearchContentsChange.set(this, (event) => {
+            this.filterSearchContentsValue = (event.detail ||
+                event.target.value);
+        });
+        _GxIdeWWImages_applyDefaultCategory.set(this, () => {
+            if (this.defaultCategory && this.categoriesComboBoxModel.length > 0) {
+                const categoryExists = this.categoriesComboBoxModel.some(item => item.value === this.defaultCategory);
+                if (categoryExists) {
+                    this.filterCategoryValue = this.defaultCategory;
                 }
-            ])), 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, class: { "images-information": true, "overflow-auto": true }, part: "grid-container" }, this.secondaryFilter ? (h("header", { class: "images-information__header", slot: "header" }, 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, sortable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.name, columnNameHidden: false, settingable: false, sortable: false, class: "tabular-grid-column", size: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.module, columnNameHidden: false, settingable: false, sortable: false, size: config.tabularGrid.colSize.common, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.description, columnNameHidden: false, settingable: false, sortable: false, size: config.tabularGrid.colSize.commonDouble, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNameHidden: false, settingable: false, sortable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNameHidden: false, settingable: false, sortable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNameHidden: false, settingable: false, sortable: 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", { noContentPadding: true, 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_handleCategoryChange.set(this, (event) => {
+            this.filterCategoryValue = event.detail;
+        });
+        _GxIdeWWImages_handleAllDescendantsChange.set(this, (event) => {
+            this.filterAllDescendantsValue = event.detail === ALL_DESCENDANTS_VALUE;
+        });
+        _GxIdeWWImages_handleAfterTypeChange.set(this, (event) => {
+            this.filterAfterTypeValue = event.detail;
+            this.afterCurrentValue = event.detail;
+        });
+        _GxIdeWWImages_handleUserChange.set(this, (event) => {
+            this.filterUserValue = (event.detail ||
+                event.target.value);
+        });
+        _GxIdeWWImages_handleModifiedDateChange.set(this, (event) => {
+            this.filterModifiedDateValue = event.target.value;
+        });
+        _GxIdeWWImages_handleStyleChange.set(this, (event) => {
+            this.filterStyleValue = event.detail;
+        });
+        _GxIdeWWImages_handleLanguageChange.set(this, (event) => {
+            this.filterLanguageValue = event.detail;
+        });
+        _GxIdeWWImages_handleDensityChange.set(this, (event) => {
+            this.filterDensityValue = event.detail;
+        });
+        _GxIdeWWImages_handleLayerChange.set(this, (event) => {
+            this.filterLayerValue = event.detail;
+        });
+        _GxIdeWWImages_handleModuleChange.set(this, () => {
+            // Module change is handled via event listener, but we update state
+            if (__classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f")) {
+                this.filterModuleValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").value;
+            }
+        });
+        _GxIdeWWImages_filterImagesInformationHandler.set(this, () => {
+            // Copy images from server to tabularGridData (will be sorted before rendering)
+            this.tabularGridData = [...this.images];
+        });
+        _GxIdeWWImages_getImages.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").clear();
+            const filters = {
+                name: this.filterNameValue,
+                searchContents: this.filterSearchContentsValue,
+                category: this.filterCategoryValue,
+                parent: this.filterModuleValue ? this.filterModuleValue.id : null,
+                allDescendants: this.filterAllDescendantsValue,
+                modifiedAfter: this.filterAfterTypeValue,
+                modifiedBy: this.filterUserValue,
+                modifiedDate: this.filterModifiedDateValue
+                    ? new Date(this.filterModifiedDateValue)
+                    : undefined,
+                style: this.filterStyleValue,
+                language: this.filterLanguageValue,
+                density: this.filterDensityValue,
+                layer: this.filterLayerValue
             };
-            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_addEventListeners.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_handleModuleChange, "f").call(this);
             });
             // for grid selection
-            this.chGridEl.addEventListener("selectionChanged", (ev) => {
-                this.loadImageItemsCallback(ev.detail.rowsId[0]).then((items) => {
-                    this.imagesSelectedItems = items;
-                });
-            });
-            this.chGridEl.addEventListener("rowDoubleClicked", () => {
-                this.openSelectionCallBackHandler();
-            });
-            this.chGridEl.addEventListener("selectionChanged", (ev) => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("selectionChanged", (ev) => {
                 this.selectedObjectsIds = ev.detail.rowsId;
                 this.selectionObjectChangedCallback(this.selectedObjectsIds);
+                if (this.selectedObjectsIds.length === 0) {
+                    this.imagesSelectedItems = [];
+                    return;
+                }
+                // Collect cached items immediately
+                const cachedItems = [];
+                const idsToLoad = [];
+                this.selectedObjectsIds.forEach((selectedId) => {
+                    if (__classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").has(selectedId)) {
+                        const items = __classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").get(selectedId);
+                        if (items) {
+                            cachedItems.push(...items);
+                        }
+                    }
+                    else {
+                        idsToLoad.push(selectedId);
+                    }
+                });
+                // If all items were cached, update immediately
+                if (idsToLoad.length === 0) {
+                    this.imagesSelectedItems = cachedItems;
+                    return;
+                }
+                // Store current selection to verify later (prevents race conditions)
+                const currentSelection = [...this.selectedObjectsIds].sort().join(",");
+                // Load missing items and combine with cached ones
+                // loadImageItemsCallback must be invoked the first time a user selects an image
+                const loadPromises = idsToLoad.map((selectedId) => this.loadImageItemsCallback(selectedId).then((items) => {
+                    // Cache the items for future use
+                    __classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").set(selectedId, items);
+                    return items;
+                }));
+                Promise.all(loadPromises).then((loadedItemsArrays) => {
+                    // Verify that selection hasn't changed while loading
+                    const currentSelectionAfterLoad = [...this.selectedObjectsIds]
+                        .sort()
+                        .join(",");
+                    if (currentSelection !== currentSelectionAfterLoad) {
+                        // Selection changed, ignore this result
+                        return;
+                    }
+                    // Combine cached items with newly loaded items
+                    const allImageItems = [...cachedItems];
+                    loadedItemsArrays.forEach(items => {
+                        allImageItems.push(...items);
+                    });
+                    this.imagesSelectedItems = allImageItems;
+                });
             });
-            this.chGridEl.addEventListener("rowContextMenu", (ev) => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowDoubleClicked", () => {
+                __classPrivateFieldGet(this, _GxIdeWWImages_openSelectionCallBackHandler, "f").call(this);
+            });
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowContextMenu", (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.contextMenuCallback({
@@ -234,119 +243,377 @@ 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 = "";
-        this.filterModified = false;
+        });
+        /**
+         * Sorts images based on the current order criteria
+         */
+        _GxIdeWWImages_sortImages.set(this, (a, b) => {
+            if (this.order.orderCriteria) {
+                const valueA = __classPrivateFieldGet(this, _GxIdeWWImages_instances, "m", _GxIdeWWImages_getImageValue).call(this, a, this.order.orderCriteria).toUpperCase();
+                const valueB = __classPrivateFieldGet(this, _GxIdeWWImages_instances, "m", _GxIdeWWImages_getImageValue).call(this, b, this.order.orderCriteria).toUpperCase();
+                if (valueA < valueB) {
+                    return this.order.ascending ? -1 : 1;
+                }
+                if (valueA > valueB) {
+                    return this.order.ascending ? 1 : -1;
+                }
+            }
+            return 0;
+        });
+        /**
+         * Handles column sort changes
+         */
+        _GxIdeWWImages_handleColumnSortChanged.set(this, (e) => {
+            const { columnId, sortDirection } = e.detail;
+            this.order = {
+                orderCriteria: columnId,
+                ascending: sortDirection === "asc"
+            };
+        });
+        _GxIdeWWImages_newObjectCallbackHandler.set(this, () => {
+            this.newObjectCallback();
+        });
+        _GxIdeWWImages_openSelectionCallBackHandler.set(this, () => {
+            this.openSelectionCallback(this.selectedObjectsIds);
+        });
+        _GxIdeWWImages_toggleModifiedControls.set(this, (event) => {
+            this.enabledModifiedControls = event.detail === MODIFIED_VALUE;
+        });
+        _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", autoFocus: true, value: this.filterNameValue, debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleNameChange, "f") })),
+                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
+                    id: "module/folder", labelPosition: "none", value: this.filterModuleValue, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterModuleEl, el, "f"))
+                })),
+                h("ch-accordion-render", {
+                    // modified
+                    class: "accordion-outlined advanced-filter-accordion", model: __classPrivateFieldGet(this, _GxIdeWWImages_ACCORDION_MODEL, "f")
+                }, h("div", { slot: __classPrivateFieldGet(this, _GxIdeWWImages_ACCORDION_FILTER_ID, "f"), class: "spacing-body" }, h("div", { class: "main__filter field-group scrollable" }, 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.filterCategoryValue, disabled: !this.categories, model: this.categoriesComboBoxModel, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleCategoryChange, "f") })), h("div", {
+                    // category
+                    class: "field-group options"
+                }, h("label", { class: "label", htmlFor: "filter-category" }, __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").filter.options), h("div", {
+                    // options
+                    class: "field field-inline"
+                }, h("ch-checkbox", { class: "checkbox all-descendants", caption: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").filter.allDescendants, checkedValue: ALL_DESCENDANTS_VALUE, value: this.filterAllDescendantsValue
+                        ? ALL_DESCENDANTS_VALUE
+                        : undefined, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleAllDescendantsChange, "f") }), h("ch-checkbox", { class: "checkbox modified", caption: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").filter.modified, checkedValue: MODIFIED_VALUE, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_toggleModifiedControls, "f") }))), h("div", {
+                    // after
+                    class: "field field-block after-date-time"
+                }, h("label", { class: {
+                        "label": true,
+                        "label--disabled": !this.enabledModifiedControls
+                    }, htmlFor: "filter-after-type" }, __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").filter.afterLabel), h("ch-combo-box-render", { id: "filter-after-type", class: "combo-box", value: this.filterAfterTypeValue, disabled: !this.enabledModifiedControls, model: this.filterAfterOptions, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleAfterTypeChange, "f") })), h("div", {
+                    // user
+                    class: "field field-block user"
+                }, h("label", { class: {
+                        "label": true,
+                        "label--disabled": !this.enabledModifiedControls
+                    }, htmlFor: "filter-user" }, __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").filter.user), h("ch-edit", { id: "filter-user", value: this.filterUserValue, class: "input", disabled: !this.enabledModifiedControls, debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleUserChange, "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", value: this.filterModifiedDateValue, max: TODAY, disabled: this.afterCurrentValue !== FILTER_AFTER.DATE_TIME, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleModifiedDateChange, "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: this.filterStyleValue, disabled: !this.styles, model: this.stylesComboBoxModel, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleStyleChange, "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: this.filterLanguageValue, disabled: !this.languages, model: this.languagesComboBoxModel, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleLanguageChange, "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: this.filterDensityValue, disabled: !this.densities, model: this.densitiesComboBoxModel, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleDensityChange, "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: this.filterLayerValue, disabled: !this.layers, model: this.layersComboBoxModel, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleLayerChange, "f") })), h("div", {
+                    // search contents
+                    class: "field field-block search-by-contents"
+                }, h("label", { class: "label", htmlFor: "search-input" }, __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").filter.search), h("ch-edit", { id: "search-input", debounce: config.inputDebounce, class: "input", value: this.filterSearchContentsValue, placeholder: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").filter.searchContentsPlaceholder, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_handleSearchContentsChange, "f"), startImgSrc: SEARCH_ICON, type: "search" })), 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, type: "mask" }), __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").filter.resetFilters))))
+            ];
+        });
+        _GxIdeWWImages_renderFilter.set(this, () => {
+            return (h("div", { class: "sidebar-container scrollable" }, __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_renderTabularGrid.set(this, () => {
+            const commonColSize = "minmax(max-content, auto)";
+            return (h("div", { class: {
+                    "field-group": true,
+                    "main__grid": true
+                } }, h("ch-tabular-grid", { ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_chGridEl, el, "f")), rowSelectionMode: "multiple", class: "tabular-grid tabular-grid-ww-images", columnResizeMode: "splitter" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { columnId: "icon", columnName: "", settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column", resizable: true, sortable: false }), h("ch-tabular-grid-column", { columnId: "name", columnName: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").tableHead.name, settingable: false, class: "tabular-grid-column", "column-name-position": "text", size: commonColSize, resizable: true, sortable: true, onColumnSortChanged: __classPrivateFieldGet(this, _GxIdeWWImages_handleColumnSortChanged, "f") }), h("ch-tabular-grid-column", { columnId: "module", columnName: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").tableHead.module, settingable: false, size: commonColSize, class: "tabular-grid-column", resizable: true, sortable: true, onColumnSortChanged: __classPrivateFieldGet(this, _GxIdeWWImages_handleColumnSortChanged, "f") }), h("ch-tabular-grid-column", { columnId: "description", columnName: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").tableHead.description, settingable: false, size: "minmax(300px, 1fr)", class: "tabular-grid-column", resizable: false, sortable: false }), h("ch-tabular-grid-column", { columnId: "modifiedDate", columnName: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").tableHead.modifiedDate, settingable: false, size: commonColSize, class: "tabular-grid-column", resizable: true, sortable: true, onColumnSortChanged: __classPrivateFieldGet(this, _GxIdeWWImages_handleColumnSortChanged, "f") }), h("ch-tabular-grid-column", { columnId: "lastUser", columnName: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").tableHead.lastUser, settingable: false, size: commonColSize, class: "tabular-grid-column", resizable: true, sortable: true, onColumnSortChanged: __classPrivateFieldGet(this, _GxIdeWWImages_handleColumnSortChanged, "f") }), h("ch-tabular-grid-column", { columnId: "importDate", columnName: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").tableHead.importDate, settingable: false, size: commonColSize, class: "tabular-grid-column", resizable: true, sortable: true, onColumnSortChanged: __classPrivateFieldGet(this, _GxIdeWWImages_handleColumnSortChanged, "f") })), this.tabularGridData.length ? (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, [...this.tabularGridData]
+                .sort(__classPrivateFieldGet(this, _GxIdeWWImages_sortImages, "f"))
+                .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" }, obj.name), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, obj.module), h("ch-tabular-grid-cell", { class: "tabular-grid-cell tabular-grid-cell-description" }, obj.description), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, formatDate(obj.modifiedDate)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, obj.lastUser), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, formatDate(obj.importDate))))))) : (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, h("ch-tabular-grid-rowset-empty", null, h("gx-ide-empty-state", { isAnimated: false, stateIconSrc: NOTICE_ICON, stateTitle: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").emptyState.title, key: "no-images-empty-state" })))))));
+        });
+        _GxIdeWWImages_resetFilterHandler.set(this, () => {
+            if (__classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f")) {
+                this.filterNameValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").name;
+                this.filterModuleValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").module;
+                this.filterSearchContentsValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").searchContents;
+                this.filterCategoryValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").category;
+                this.filterAllDescendantsValue =
+                    __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").allDescendants === ALL_DESCENDANTS_VALUE;
+                this.filterAfterTypeValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").modifiedAfter;
+                this.filterModifiedDateValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").modifiedDateTime;
+                this.filterUserValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").modifiedUser;
+                this.filterStyleValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").style;
+                this.filterLanguageValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").language;
+                this.filterDensityValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").density;
+                this.filterLayerValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").layer;
+                this.afterCurrentValue = this.filterAfterTypeValue;
+            }
+        });
+        _GxIdeWWImages_saveInitialFilterData.set(this, () => {
+            __classPrivateFieldSet(this, _GxIdeWWImages_filterInitialData, {
+                name: this.filterNameValue,
+                module: this.filterModuleValue,
+                searchContents: this.filterSearchContentsValue,
+                category: this.filterCategoryValue,
+                allDescendants: this.filterAllDescendantsValue
+                    ? ALL_DESCENDANTS_VALUE
+                    : "",
+                modifiedAfter: this.filterAfterTypeValue,
+                modifiedDateTime: this.filterModifiedDateValue,
+                modifiedUser: this.filterUserValue,
+                style: this.filterStyleValue,
+                language: this.filterLanguageValue,
+                density: this.filterDensityValue,
+                layer: this.filterLayerValue
+            }, "f");
+        });
+        _GxIdeWWImages_selectAll.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").selectAllRows();
+        });
+        this.categoriesComboBoxModel = [];
+        this.densitiesComboBoxModel = [];
+        this.languagesComboBoxModel = [];
+        this.layersComboBoxModel = [];
+        this.stylesComboBoxModel = [];
+        this.afterCurrentValue = undefined;
+        this.filterAfterOptions = undefined;
+        this.tabularGridData = [];
         this.images = [];
-        this.filteredImages = [];
         this.imagesSelectedItems = [];
         this.selectedObjectsIds = [];
-        this.filterImagesInputValue = "";
-        this.displayTitle = false;
-        this.secondaryFilter = false;
+        this.enabledModifiedControls = false;
+        this.order = {
+            orderCriteria: null,
+            ascending: null
+        };
+        this.filterNameValue = "";
+        this.filterSearchContentsValue = "";
+        this.filterCategoryValue = undefined;
+        this.filterAllDescendantsValue = false;
+        this.filterAfterTypeValue = undefined;
+        this.filterUserValue = "";
+        this.filterModifiedDateValue = "";
+        this.filterStyleValue = undefined;
+        this.filterLanguageValue = undefined;
+        this.filterDensityValue = undefined;
+        this.filterLayerValue = undefined;
+        this.filterModuleValue = undefined;
         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.shadow = false;
         this.styles = undefined;
-        this.types = undefined;
     }
-    filtersHiddenHandler(hidden) {
-        if (hidden) {
-            this.removeDetectClickOutsideFilter();
-        }
-        else {
-            this.attachDetectClickOutsideFilter();
-        }
+    categoriesChanged(newCategories) {
+        this.categoriesComboBoxModel = mapOptionsToComboBoxItemModel(newCategories);
+        __classPrivateFieldGet(this, _GxIdeWWImages_applyDefaultCategory, "f").call(this);
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.componentDidLoadEvent.emit(true);
+    defaultCategoryChanged() {
+        __classPrivateFieldGet(this, _GxIdeWWImages_applyDefaultCategory, "f").call(this);
+    }
+    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();
-    }
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+        __classPrivateFieldGet(this, _GxIdeWWImages_addEventListeners, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeWWImages_saveInitialFilterData, "f").call(this);
+        __classPrivateFieldSet(this, _GxIdeWWImages_isInitialLoad, false, "f");
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeWWImages_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        // 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;
+        this.filterAfterTypeValue = this.filterAfterOptions[0].value;
+        // Initialize filter state values
+        __classPrivateFieldGet(this, _GxIdeWWImages_applyDefaultCategory, "f").call(this);
+        this.filterModuleValue = this.defaultModule;
+        if (this.stylesComboBoxModel.length > 0) {
+            this.filterStyleValue = this.stylesComboBoxModel[0].value;
+        }
+        if (this.languagesComboBoxModel.length > 0) {
+            this.filterLanguageValue = this.languagesComboBoxModel[0].value;
+        }
+        if (this.densitiesComboBoxModel.length > 0) {
+            this.filterDensityValue = this.densitiesComboBoxModel[0].value;
         }
+        if (this.layersComboBoxModel.length > 0) {
+            this.filterLayerValue = this.layersComboBoxModel[0].value;
+        }
+        __classPrivateFieldSet(this, _GxIdeWWImages_ACCORDION_MODEL, [
+            {
+                id: __classPrivateFieldGet(this, _GxIdeWWImages_ACCORDION_FILTER_ID, "f"),
+                caption: __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").filter.accordionCaption,
+                expanded: false
+            }
+        ], "f");
     }
-    // 7.LISTENERS //
     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
+     * Reloads the view, refreshing the filters and the images table.
      */
-    async validate() {
-        const isValid = true;
-        return isValid;
+    async reload() {
+        __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
     }
     /**
-     * This method reload the view, refreshing the filters and the table of images.
+     * Watch filter state variables and trigger #getImages when they change
      */
-    async reload() {
-        this.getImages();
+    filterNameValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterSearchContentsValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterCategoryValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterAllDescendantsValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterAfterTypeValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterUserValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterModifiedDateValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterStyleValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterLanguageValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterDensityValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterLayerValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        }
+    }
+    filterModuleValueChanged() {
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_isInitialLoad, "f")) {
+            __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, 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_renderTabularGrid, "f").call(this), h("div", { class: "main__aside field-group" }, __classPrivateFieldGet(this, _GxIdeWWImages_renderFilter, "f").call(this))), h("footer", { class: "dialog-footer-with-border dialog-footer-space-between spacing-body" }, h("p", {
+            // matching objects
+            class: "text-body"
+        }, `${this.tabularGridData.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")
+        }, __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")
+        }, __classPrivateFieldGet(this, _GxIdeWWImages_componentLocale, "f").footer.btnNew))))));
     }
     static get is() { return "gx-ide-ww-images"; }
     static get encapsulation() { return "shadow"; }
@@ -363,42 +630,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,
@@ -417,20 +648,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"
                         }
                     }
                 },
@@ -438,7 +669,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": {
@@ -453,7 +684,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
@@ -476,27 +707,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": {
@@ -514,7 +749,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": {
@@ -535,7 +770,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": {
@@ -556,49 +791,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": {
@@ -619,7 +812,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": {
@@ -640,7 +833,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": {
@@ -661,7 +854,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": {
@@ -682,7 +875,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": {
@@ -703,7 +896,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": {
@@ -724,27 +917,9 @@ 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"
                 }
             },
-            "shadow": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Applies a shadow all around"
-                },
-                "attribute": "shadow",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "styles": {
                 "type": "unknown",
                 "mutable": false,
@@ -763,99 +938,42 @@ export class GxIdeWWImages {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The styles render in the filter style selector"
-                }
-            },
-            "types": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "GxOption[]",
-                    "resolved": "GxOption[]",
-                    "references": {
-                        "GxOption": {
-                            "location": "import",
-                            "path": "../../common/types",
-                            "id": "src/common/types.ts::GxOption"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The types render in the filter type selector"
+                    "text": "Styles rendered in the filter style selector"
                 }
             }
         };
     }
     static get states() {
         return {
-            "filtersHidden": {},
-            "filterAfterType": {},
-            "filterModified": {},
+            "categoriesComboBoxModel": {},
+            "densitiesComboBoxModel": {},
+            "languagesComboBoxModel": {},
+            "layersComboBoxModel": {},
+            "stylesComboBoxModel": {},
+            "afterCurrentValue": {},
+            "filterAfterOptions": {},
+            "tabularGridData": {},
             "images": {},
-            "filteredImages": {},
             "imagesSelectedItems": {},
             "selectedObjectsIds": {},
-            "filterImagesInputValue": {}
+            "enabledModifiedControls": {},
+            "order": {},
+            "filterNameValue": {},
+            "filterSearchContentsValue": {},
+            "filterCategoryValue": {},
+            "filterAllDescendantsValue": {},
+            "filterAfterTypeValue": {},
+            "filterUserValue": {},
+            "filterModifiedDateValue": {},
+            "filterStyleValue": {},
+            "filterLanguageValue": {},
+            "filterDensityValue": {},
+            "filterLayerValue": {},
+            "filterModuleValue": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "componentDidLoadEvent",
-                "name": "componentDidLoadEvent",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This event is emitted once just after the component is fully loaded and the first render() occurs."
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
-                "method": "componentDidRenderFirstTime",
-                "name": "componentDidRenderFirstTime",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "description",
-                            "text": "Gets fired when the component has rendered for the first time."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
     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>",
@@ -869,7 +987,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": []
                 }
             }
@@ -878,8 +996,59 @@ export class GxIdeWWImages {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "filtersHidden",
-                "methodName": "filtersHiddenHandler"
+                "propName": "categories",
+                "methodName": "categoriesChanged"
+            }, {
+                "propName": "defaultCategory",
+                "methodName": "defaultCategoryChanged"
+            }, {
+                "propName": "densities",
+                "methodName": "densitiesChanged"
+            }, {
+                "propName": "languages",
+                "methodName": "languagesChanged"
+            }, {
+                "propName": "layers",
+                "methodName": "layersChanged"
+            }, {
+                "propName": "styles",
+                "methodName": "stylesChanged"
+            }, {
+                "propName": "filterNameValue",
+                "methodName": "filterNameValueChanged"
+            }, {
+                "propName": "filterSearchContentsValue",
+                "methodName": "filterSearchContentsValueChanged"
+            }, {
+                "propName": "filterCategoryValue",
+                "methodName": "filterCategoryValueChanged"
+            }, {
+                "propName": "filterAllDescendantsValue",
+                "methodName": "filterAllDescendantsValueChanged"
+            }, {
+                "propName": "filterAfterTypeValue",
+                "methodName": "filterAfterTypeValueChanged"
+            }, {
+                "propName": "filterUserValue",
+                "methodName": "filterUserValueChanged"
+            }, {
+                "propName": "filterModifiedDateValue",
+                "methodName": "filterModifiedDateValueChanged"
+            }, {
+                "propName": "filterStyleValue",
+                "methodName": "filterStyleValueChanged"
+            }, {
+                "propName": "filterLanguageValue",
+                "methodName": "filterLanguageValueChanged"
+            }, {
+                "propName": "filterDensityValue",
+                "methodName": "filterDensityValueChanged"
+            }, {
+                "propName": "filterLayerValue",
+                "methodName": "filterLayerValueChanged"
+            }, {
+                "propName": "filterModuleValue",
+                "methodName": "filterModuleValueChanged"
             }];
     }
     static get listeners() {
@@ -892,4 +1061,27 @@ export class GxIdeWWImages {
             }];
     }
 }
+_GxIdeWWImages_componentLocale = new WeakMap(), _GxIdeWWImages_filterInitialData = new WeakMap(), _GxIdeWWImages_ACCORDION_MODEL = new WeakMap(), _GxIdeWWImages_ACCORDION_FILTER_ID = new WeakMap(), _GxIdeWWImages_imagesMap = new WeakMap(), _GxIdeWWImages_chGridEl = new WeakMap(), _GxIdeWWImages_filterModuleEl = new WeakMap(), _GxIdeWWImages_isInitialLoad = new WeakMap(), _GxIdeWWImages_deleteSelectionCallbackHandler = new WeakMap(), _GxIdeWWImages_deselectAll = new WeakMap(), _GxIdeWWImages_handleNameChange = new WeakMap(), _GxIdeWWImages_handleSearchContentsChange = new WeakMap(), _GxIdeWWImages_applyDefaultCategory = new WeakMap(), _GxIdeWWImages_handleCategoryChange = new WeakMap(), _GxIdeWWImages_handleAllDescendantsChange = new WeakMap(), _GxIdeWWImages_handleAfterTypeChange = new WeakMap(), _GxIdeWWImages_handleUserChange = new WeakMap(), _GxIdeWWImages_handleModifiedDateChange = new WeakMap(), _GxIdeWWImages_handleStyleChange = new WeakMap(), _GxIdeWWImages_handleLanguageChange = new WeakMap(), _GxIdeWWImages_handleDensityChange = new WeakMap(), _GxIdeWWImages_handleLayerChange = new WeakMap(), _GxIdeWWImages_handleModuleChange = new WeakMap(), _GxIdeWWImages_filterImagesInformationHandler = new WeakMap(), _GxIdeWWImages_getImages = new WeakMap(), _GxIdeWWImages_getToday = new WeakMap(), _GxIdeWWImages_addEventListeners = new WeakMap(), _GxIdeWWImages_sortImages = new WeakMap(), _GxIdeWWImages_handleColumnSortChanged = new WeakMap(), _GxIdeWWImages_newObjectCallbackHandler = new WeakMap(), _GxIdeWWImages_openSelectionCallBackHandler = new WeakMap(), _GxIdeWWImages_toggleModifiedControls = new WeakMap(), _GxIdeWWImages_renderHeader = new WeakMap(), _GxIdeWWImages_renderFilter = new WeakMap(), _GxIdeWWImages_renderImages = new WeakMap(), _GxIdeWWImages_renderTabularGrid = new WeakMap(), _GxIdeWWImages_resetFilterHandler = new WeakMap(), _GxIdeWWImages_saveInitialFilterData = new WeakMap(), _GxIdeWWImages_selectAll = new WeakMap(), _GxIdeWWImages_instances = new WeakSet(), _GxIdeWWImages_getImageValue = function _GxIdeWWImages_getImageValue(image, key) {
+    var _a;
+    switch (key) {
+        case "name":
+            return image.name || "";
+        case "module":
+            return image.module || "";
+        case "description":
+            return image.description || "";
+        case "modifiedDate":
+            return image.modifiedDate
+                ? formatDate(image.modifiedDate).toLowerCase()
+                : "";
+        case "lastUser":
+            return ((_a = image.lastUser) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "";
+        case "importDate":
+            return image.importDate
+                ? formatDate(image.importDate).toLowerCase()
+                : "";
+        default:
+            return "";
+    }
+};
 //# sourceMappingURL=ww-images.js.map