@genexus/genexus-ide-ui 2.0.0 → 2.1.1

package/dist/components/gx-ide-ww-images.js

@@ -1,239 +1,261 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { L as Locale } from './locale.js';
-import { c as config } from './config.js';
-import { r as renderFormItems } from './common.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './mer-animated-dots.js';
+import 'lit';
+import 'lit/directives/when.js';
+import 'lit/directives/if-defined.js';
 import { F as FILTER_AFTER } from './constants.js';
-import { c as closeOnOutsideClickHandler, h as hiChar, f as formatDate } from './helpers.js';
-import { d as defineCustomElement$3 } from './container.js';
+import { c as config } from './config.js';
+import { f as formatDate } from './helpers.js';
+import { L as Locale } from './locale.js';
+import { d as defineCustomElement$3 } from './gx-ide-empty-state2.js';
 import { d as defineCustomElement$2 } from './entity-selector.js';
 
-const wwImagesCss = ":host{display:grid;block-size:100%}.opacity-0{opacity:0}.gxi-hidden{display:none !important}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-style-regular);font-size:var(--font-size-body-m);font-family:var(--font-family-body);height:100%;display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.buttons-container{display:flex;gap:var(--spacing-gap-m)}.giu-static-pill-icon-and-text,.giu-static-pill{background-color:var(--elevation-background-color, var(--color-accent-surface-elevation-1));padding-inline:var(--spacing-padding-m);color:var(--color-text-neutral-default);font-size:var(--font-size-body-s);line-height:var(--line-height-relaxed);font-weight:var(--font-style-regular);border-radius:4px;min-block-size:25px;display:inline-grid;align-items:center;pointer-events:none}.giu-static-pill-icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--spacing-gap-m)}.tab-full-width-buttons::part(tab-list block-start),.tab-full-width-buttons::part(tab-list block-end){grid-auto-columns:1fr}.tab-full-width-buttons::part(tab block-start){justify-content:center}.tree-view::part(item__header){--icon__system_warning_warning--disabled:var(\n    --icon__system_warning_warning--enabled\n  )}.tabular-grid{--focus-outline-width:1px}:host{display:block}.module-folder::part(wrapper){padding-block:var(--spacing-padding-xxs);margin-block-start:var(--gxg-label-separation-vertical)}.filter--padding{padding:var(--gx-ide-container__padding)}.filter--gap{gap:var(--spacing-gap-xl)}.filter{display:flex;flex-direction:column}.filter__first-row{display:flex;gap:var(--spacing-gap-l)}.filter__first-row .name,.filter__first-row .module-folder{flex:1}.filter__first-row .filter-btn{flex:none}.filter__first-row .second-column{display:flex;flex-direction:row;align-items:end;gap:var(--spacing-gap-l)}.filter__first-row>*{flex:1}.filter .checkboxes-label-wrapper{display:flex;flex-direction:column;gap:0}.filter .checkboxes-wrapper{display:flex;gap:var(--spacing-gap-l);border-radius:var(--border-radius-sm);height:var(--gxg-form-text-height);box-sizing:border-box;align-items:center;padding-inline-start:var(--spacing-padding-xs)}.filter .user{max-inline-size:100% !important}.filters-outer-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows 200ms}.filters-outer-wrapper--hidden{grid-template-rows:0fr}.filters-inner-wrapper{padding-block-start:var(--gx-ide-container__padding);display:grid;overflow:hidden;grid-template-columns:repeat(12, 1fr);grid-template-rows:repeat(3, 1fr)}.filters-inner-wrapper .search-contents{grid-area:1/1/2/5}.filters-inner-wrapper .category{grid-area:1/5/2/9}.filters-inner-wrapper .options{grid-area:1/9/2/13}.filters-inner-wrapper .date-time{grid-area:2/1/3/5}.filters-inner-wrapper .after-date-time{grid-area:2/5/3/9}.filters-inner-wrapper .user{grid-area:2/9/3/13}.filters-inner-wrapper .style{grid-area:3/1/4/4}.filters-inner-wrapper .language{grid-area:3/4/4/7}.filters-inner-wrapper .density{grid-area:3/7/4/10}.filters-inner-wrapper .layer{grid-area:3/10/4/13}gxg-date-picker{position:absolute;inline-size:calc(33% - 16px)}gxg-date-picker::part(input){block-size:24px}.master-wrapper{block-size:100%;position:relative;display:grid;grid-template-rows:auto 1fr}.grid-images-container{display:grid;grid-template-columns:1fr 220px;grid-column-gap:0;grid-row-gap:0;overflow:auto}.images-information__header{display:flex;align-items:center;gap:var(--spacing-gap-l)}.images-information__header-title{flex:none}.images-grid{grid-template-columns:repeat(2, 1fr);grid-column-gap:0}.images-grid>:nth-child(1){grid-area:1/1/1/3}.images-container .image-item{display:inline-block;inline-size:50%;block-size:128px}.images-container .image-item__container{padding:var(--gx-ide-container__padding)}.images-container .image-item__container img{inline-size:100%;block-size:100%;object-fit:scale-down}.images-container .image-item__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;inline-size:100%;display:block;font-size:var(--font-size-body-xs);padding-block:var(--spacing-padding-xs);padding-inline:var(--spacing-padding-m);box-sizing:border-box;background-color:var(--color-accent-surface-surface)}.images-container .image-item:nth-child(odd) .image-item__name{border-inline-end:1px solid var(--color-border-surface-on-elevation-1)}.objects-count{grid-template-columns:repeat(2, 1fr)}.objects-count *:nth-child(2){justify-content:flex-end;align-items:flex-start}.hiChar{color:var(--color-text-primary-default);filter:brightness(1.3)}.tabular-grid-ww-images ch-tabular-grid-cell:is(:nth-child(4)){align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
+const mapOptionsToComboBoxItemModel = (options) => {
+    if (!options) {
+        return [];
+    }
+    return options.map(option => {
+        var _a;
+        return {
+            value: option.id,
+            caption: option.label,
+            startImgSrc: (_a = option.iconName) !== null && _a !== void 0 ? _a : ""
+        };
+    });
+};
+
+const wwImagesCss = "/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n:host {\n  container-type: inline-size;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  grid-template-rows: max-content 1fr max-content;\n}\n\n.section {\n  display: contents;\n}\n\n.header {\n  grid-template-areas: \"name module-folder\" \"advanced-filter-accordion advanced-filter-accordion\";\n  grid-template-columns: 1fr 1fr;\n  grid-auto-rows: max-content max-content;\n}\n\n.name {\n  grid-area: name;\n}\n\n.module-folder {\n  grid-area: module-folder;\n}\n\n.advanced-filter-accordion {\n  grid-area: advanced-filter-accordion;\n}\n\n.main {\n  --sidebar-width: 376px;\n  display: grid;\n  grid-template-columns: 1fr var(--sidebar-width);\n  overflow: auto;\n  padding-block-start: var(--size-16);\n}\n\n.main__grid {\n  overflow: auto;\n  position: relative;\n}\n\n.tabular-grid-ww-images {\n  overflow: auto;\n  border-inline-end: var(--section-common-border);\n}\n\nch-tabular-grid-rowset-empty {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 100%;\n  z-index: 1;\n}\n\n.main__aside {\n  overflow: auto;\n  display: grid;\n  grid-template-rows: max-content 1fr;\n}\n\n.main__filter {\n  display: grid;\n  grid-auto-rows: max-content;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-areas: \"category options after\" \"style language user\" \"density layer date-time\" \"search-by-contents search-by-contents button-reset\";\n  overflow: auto;\n}\n\n.category {\n  grid-area: category;\n}\n\n.options {\n  grid-area: options;\n}\n\n.after-date-time {\n  grid-area: after;\n}\n\n.user {\n  grid-area: user;\n}\n\n.date-time {\n  grid-area: date-time;\n}\n\n.style {\n  grid-area: style;\n}\n\n.language {\n  grid-area: language;\n}\n\n.density {\n  grid-area: density;\n}\n\n.layer {\n  grid-area: layer;\n}\n\n.search-by-contents {\n  grid-area: search-by-contents;\n}\n\n.button-reset {\n  grid-area: button-reset;\n  align-self: end;\n  justify-self: end;\n}\n\n.main__images-container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--size-8);\n  position: relative;\n  z-index: 1;\n}\n.main__images-container .figure {\n  margin: 0;\n  background-color: var(--color-accent-surface-elevation-2);\n  display: grid;\n  grid-template-rows: minmax(0, 1fr) max-content;\n  gap: var(--size-4);\n  padding: var(--size-8);\n  border-radius: var(--size-4);\n  opacity: 0;\n  animation: fadeIn 300ms forwards;\n  aspect-ratio: 1/1;\n}\n.main__images-container .figure__picture {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-block-size: 0;\n}\n.main__images-container .figure__img {\n  display: block;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  inline-size: auto;\n  block-size: auto;\n  object-fit: contain;\n}\n.main__images-container .figure__figcaption {\n  text-align: center;\n  font-size: var(--font-size-body-xs);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  inline-size: 100%;\n}\n\n.tabular-grid-ww-images ch-tabular-grid-cell:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)) {\n  align-items: start;\n  justify-content: start;\n  display: inline-block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-inline-size: 0;\n}\n@keyframes fadeIn {\n  to {\n    opacity: 1;\n  }\n}\n@container (max-width: 992px) {\n  .main {\n    --sidebar-width: 288px;\n  }\n\n  .main__images-container {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n@container (max-width: 768px) {\n  .main {\n    --sidebar-width: 200px;\n  }\n\n  .main__images-container {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n@container (max-width: 640px) {\n  .main {\n    --sidebar-width: 112px;\n  }\n\n  .main__images-container {\n    grid-template-columns: 1fr;\n  }\n}";
 
+var __classPrivateFieldGet = (undefined && undefined.__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 = (undefined && undefined.__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;
 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"
+});
 const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class GxIdeWWImages extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        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: "window-tools/filter-conditions" , 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;
+                });
+            });
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowDoubleClicked", () => {
+                __classPrivateFieldGet(this, _GxIdeWWImages_openSelectionCallBackHandler, "f").call(this);
             });
-            this.chGridEl.addEventListener("rowContextMenu", (ev) => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowContextMenu", (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.contextMenuCallback({
@@ -242,173 +264,498 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class GxIdeWWImages exten
                     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();
+        __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");
     }
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+    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 assetsDirs() { return ["gx-ide-assets/ww-images"]; }
     get el() { return this; }
     static get watchers() { return {
-        "filtersHidden": ["filtersHiddenHandler"]
+        "categories": ["categoriesChanged"],
+        "defaultCategory": ["defaultCategoryChanged"],
+        "densities": ["densitiesChanged"],
+        "languages": ["languagesChanged"],
+        "layers": ["layersChanged"],
+        "styles": ["stylesChanged"],
+        "filterNameValue": ["filterNameValueChanged"],
+        "filterSearchContentsValue": ["filterSearchContentsValueChanged"],
+        "filterCategoryValue": ["filterCategoryValueChanged"],
+        "filterAllDescendantsValue": ["filterAllDescendantsValueChanged"],
+        "filterAfterTypeValue": ["filterAfterTypeValueChanged"],
+        "filterUserValue": ["filterUserValueChanged"],
+        "filterModifiedDateValue": ["filterModifiedDateValueChanged"],
+        "filterStyleValue": ["filterStyleValueChanged"],
+        "filterLanguageValue": ["filterLanguageValueChanged"],
+        "filterDensityValue": ["filterDensityValueChanged"],
+        "filterLayerValue": ["filterLayerValueChanged"],
+        "filterModuleValue": ["filterModuleValueChanged"]
     }; }
     static get style() { return wwImagesCss; }
 }, [1, "gx-ide-ww-images", {
-        "displayTitle": [4, "display-title"],
-        "secondaryFilter": [4, "secondary-filter"],
         "categories": [16],
-        "densities": [16],
+        "contextMenuCallback": [16],
         "defaultCategory": [1, "default-category"],
         "defaultModule": [16],
-        "defaultType": [1, "default-type"],
-        "filterModules": [16],
+        "deleteSelectionCallback": [16],
+        "densities": [16],
         "languages": [16],
         "layers": [16],
-        "contextMenuCallback": [16],
-        "deleteSelectionCallback": [16],
         "loadCallback": [16],
         "loadImageItemsCallback": [16],
         "newObjectCallback": [16],
         "openSelectionCallback": [16],
         "selectModuleCallback": [16],
         "selectionObjectChangedCallback": [16],
-        "shadow": [4],
         "styles": [16],
-        "types": [16],
-        "filtersHidden": [32],
-        "filterAfterType": [32],
-        "filterModified": [32],
+        "categoriesComboBoxModel": [32],
+        "densitiesComboBoxModel": [32],
+        "languagesComboBoxModel": [32],
+        "layersComboBoxModel": [32],
+        "stylesComboBoxModel": [32],
+        "afterCurrentValue": [32],
+        "filterAfterOptions": [32],
+        "tabularGridData": [32],
         "images": [32],
-        "filteredImages": [32],
         "imagesSelectedItems": [32],
         "selectedObjectsIds": [32],
-        "filterImagesInputValue": [32],
-        "validate": [64],
+        "enabledModifiedControls": [32],
+        "order": [32],
+        "filterNameValue": [32],
+        "filterSearchContentsValue": [32],
+        "filterCategoryValue": [32],
+        "filterAllDescendantsValue": [32],
+        "filterAfterTypeValue": [32],
+        "filterUserValue": [32],
+        "filterModifiedDateValue": [32],
+        "filterStyleValue": [32],
+        "filterLanguageValue": [32],
+        "filterDensityValue": [32],
+        "filterLayerValue": [32],
+        "filterModuleValue": [32],
         "reload": [64]
     }, [[1, "keydown", "keyDownHandler"]], {
-        "filtersHidden": ["filtersHiddenHandler"]
+        "categories": ["categoriesChanged"],
+        "defaultCategory": ["defaultCategoryChanged"],
+        "densities": ["densitiesChanged"],
+        "languages": ["languagesChanged"],
+        "layers": ["layersChanged"],
+        "styles": ["stylesChanged"],
+        "filterNameValue": ["filterNameValueChanged"],
+        "filterSearchContentsValue": ["filterSearchContentsValueChanged"],
+        "filterCategoryValue": ["filterCategoryValueChanged"],
+        "filterAllDescendantsValue": ["filterAllDescendantsValueChanged"],
+        "filterAfterTypeValue": ["filterAfterTypeValueChanged"],
+        "filterUserValue": ["filterUserValueChanged"],
+        "filterModifiedDateValue": ["filterModifiedDateValueChanged"],
+        "filterStyleValue": ["filterStyleValueChanged"],
+        "filterLanguageValue": ["filterLanguageValueChanged"],
+        "filterDensityValue": ["filterDensityValueChanged"],
+        "filterLayerValue": ["filterLayerValueChanged"],
+        "filterModuleValue": ["filterModuleValueChanged"]
     }]);
+_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 "";
+    }
+};
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-ww-images", "gx-ide-container", "gx-ide-entity-selector"];
+    const components = ["gx-ide-ww-images", "gx-ide-empty-state", "gx-ide-entity-selector"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-ww-images":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxIdeWWImages);
             }
             break;
-        case "gx-ide-container":
+        case "gx-ide-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }