@genexus/genexus-ide-ui 1.0.17 → 1.0.19

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

@@ -1,24 +1,79 @@
 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 { g as getIconPath } from './assets-manager.js';
 import { F as FILTER_AFTER } from './constants.js';
-import { a as closeOnOutsideClickHandler, h as hiChar, f as formatDate } from './helpers.js';
-import { d as defineCustomElement$4 } from './container.js';
-import { d as defineCustomElement$3 } from './entity-selector.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { c as config } from './config.js';
+import { h as hiChar, f as formatDate } from './helpers.js';
+import { L as Locale } from './locale.js';
+import { d as defineCustomElement$2 } from './entity-selector.js';
 
-const wwImagesCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:block}.filter--padding{padding:var(--gx-ide-container__padding)}.filter--gap{gap:var(--gx-ide-grid-row-gap)}.filter{display:flex;flex-direction:column}.filter__first-row{display:flex;gap:var(--gx-ide-grid-column-gap)}.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(--gx-ide-grid-column-gap)}.filter__first-row>*{flex:1}.filter .checkboxes-label-wrapper{display:flex;flex-direction:column;gap:0}.filter .checkboxes-wrapper{display:flex;gap:var(--gx-ide-grid-column-gap);border:1px solid var(--gray-02);border-radius:var(--border-radius-sm);height:var(--gxg-form-text-height);box-sizing:border-box;align-items:center;padding-inline-start:var(--mer-spacing--2xs)}.filter .user{max-width: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-top:var(--gx-ide-container__padding);overflow:hidden;display:grid;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}.master-wrapper{height:100%;display:grid;grid-template-rows:auto 1fr}.grid-images-container{border-top:1px solid var(--gx-ide-container-border-color);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(--gx-ide-grid-column-gap)}.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;width:50%;height:110px;}.images-container .image-item__container{padding:var(--gx-ide-container__padding)}.images-container .image-item__container img{width:100%;height:100%;object-fit:scale-down}.images-container .image-item__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;width:100%;display:block;font-size:10px;padding:4px 8px;box-sizing:border-box;background-color:var(--gray-00)}.images-container .image-item:nth-child(odd) .image-item__name{border-inline-end:1px solid var(--gray-02)}.objects-count{grid-template-columns:repeat(2, 1fr)}.objects-count *:nth-child(2){justify-content:flex-end;align-items:flex-start}.hiChar{color:var(--mer-color__primary-blue--200);filter:brightness(1.3)}.tabular-grid-ww-images ch-tabular-grid-cell:is(:nth-child(4)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+const mapOptionsToComboBoxItemModel = (options) => {
+    return options.map(option => {
+        var _a;
+        return {
+            value: option.id,
+            caption: option.label,
+            startImgSrc: (_a = option.iconName) !== null && _a !== void 0 ? _a : ""
+        };
+    });
+};
 
+const wwImagesCss = "/*Gx Ide*/\n/*@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@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\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-columns: 1fr 1fr 90px;\n  align-items: end;\n}\n\n.header__filter {\n  display: none !important;\n}\n\n.filters-outer-wrapper {\n  grid-area: filter;\n}\n\n.main {\n  --sidebar-width: 400px;\n  display: grid;\n  grid-template-columns: 1fr var(--sidebar-width);\n  overflow: auto;\n  padding-block-start: var(--mer-spacing--md);\n  transition: grid-template-columns var(--mer-timing--fast);\n}\n\n.main__grid {\n  overflow: auto;\n}\n\n.main__grid--with-filter {\n  grid-template-rows: max-content 1fr;\n}\n\n.tabular-grid-ww-images {\n  overflow: auto;\n  border-inline-end: var(--section-common-border);\n}\n\n.button-reset {\n  inline-size: 100%;\n  box-sizing: border-box;\n}\n\n.main__aside {\n  overflow: auto;\n  display: grid;\n  grid-template-rows: max-content 1fr;\n}\n\n.main__filter {\n  block-size: 100%;\n  inline-size: var(--sidebar-width);\n  box-sizing: border-box;\n  grid-auto-rows: max-content;\n  overflow: auto;\n}\n\n.sidebar-container {\n  position: relative;\n  overflow: auto;\n}\n\n.sidebar-filter {\n  block-size: 100%;\n  inline-size: 100%;\n  transform-origin: left;\n  position: absolute;\n  z-index: 2;\n  right: 0;\n  top: 0;\n}\n\n.main__images-container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--mer-spacing--xs);\n  position: relative;\n  z-index: 1;\n}\n.main__images-container .figure {\n  margin: 0;\n  background-color: var(--mer-surface__elevation--02);\n  display: grid;\n  gap: var(--mer-spacing--2xs);\n  padding: var(--mer-spacing--xs);\n  border-radius: var(--mer-border__radius--sm);\n  opacity: 0;\n  animation: fadeIn 300ms forwards;\n}\n.main__images-container .figure__picture {\n  object-fit: contain;\n}\n.main__images-container .figure__img {\n  block-size: auto;\n  inline-size: 100%;\n}\n.main__images-container .figure__figcaption {\n  text-align: center;\n  font-size: var(--mer-font__size--4xs);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  inline-size: 100%;\n}\n\n.hiChar {\n  color: var(--mer-color__primary--200);\n  filter: brightness(1.3);\n}\n\n.tabular-grid-ww-images ch-tabular-grid-cell:is(:nth-child(4)) {\n  padding-block: var(--grid-cell__padding-block);\n  padding-inline: var(--grid-cell__padding-inline);\n  align-items: start;\n  justify-content: start;\n  display: inline-block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n@keyframes fadeIn {\n  to {\n    opacity: 1;\n  }\n}\n@container (max-width: 992px) {\n  .main {\n    --sidebar-width: 300px;\n  }\n\n  .main__images-container {\n    grid-template-columns: repeat(3, 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__componentLocale, _GxIdeWWImages_filterInitialData, _GxIdeWWImages_renderedFirstTime, _GxIdeWWImages_imagesMap, _GxIdeWWImages_chGridEl, _GxIdeWWImages_filterAfterTypeEl, _GxIdeWWImages_filterAllDescendantsEl, _GxIdeWWImages_filterCategoryEl, _GxIdeWWImages_filterDensityEl, _GxIdeWWImages_filterLanguageEl, _GxIdeWWImages_filterLayerEl, _GxIdeWWImages_filterModifiedDateEl, _GxIdeWWImages_filterModuleEl, _GxIdeWWImages_filterNameEl, _GxIdeWWImages_filterSearchContentsEl, _GxIdeWWImages_filterStyleEl, _GxIdeWWImages_filterUserEl, _GxIdeWWImages_deleteSelectionCallbackHandler, _GxIdeWWImages_deselectAll, _GxIdeWWImages_filterAfterTypeChangeHandler, _GxIdeWWImages_filterImagesInformationHandler, _GxIdeWWImages_filterInputHandler, _GxIdeWWImages_toggleFilterButtonClickedHandler, _GxIdeWWImages_getImages, _GxIdeWWImages_getToday, _GxIdeWWImages_listenChanges, _GxIdeWWImages_newObjectCallbackHandler, _GxIdeWWImages_openSelectionCallBackHandler, _GxIdeWWImages_renderHeader, _GxIdeWWImages_renderFilter, _GxIdeWWImages_renderImages, _GxIdeWWImages_renderImagesData, _GxIdeWWImages_resetFilterHandler, _GxIdeWWImages_saveInitialFilterData, _GxIdeWWImages_selectAll;
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    // "utils/form",
-    // "utils/layout",
-    // "utils/typography",
-    // "components/button",
-    // "components/checkbox",
-    // "components/edit",
-    "components/tabular-grid"
+    "components/accordion",
+    "components/button",
+    "components/checkbox",
+    "components/combo-box",
+    "components/edit",
+    "components/tabular-grid",
+    "components/sidebar",
+    "utils/form",
+    "utils/layout",
+    "utils/typography",
+    "utils/spacing",
+    "chameleon/scrollbar"
+];
+let TODAY = null;
+// icons
+const RESET_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "reset",
+    colorType: "neutral"
+});
+const SEARCH_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "search",
+    colorType: "neutral"
+});
+const FILTER_ICON = getIconPath({
+    category: "window-tools",
+    name: "filter",
+    colorType: "primary"
+});
+const MODIFIED_ACCORDION_MODEL = [
+    {
+        id: "modified",
+        caption: "Modified",
+        expanded: false
+    }
 ];
 const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class GxIdeWWImages extends HTMLElement {
     constructor() {
@@ -27,214 +82,121 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class GxIdeWWImages exten
         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;
-            }
-        };
         /**
-         * @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", { disabled: !this.filterModified, ref: (el) => (this.filterModifiedDateEl = el) }))), h("gxg-combo-box", { class: "after-date-time", disabled: !this.filterModified, label: this._componentLocale.filter.afterLabel, "disable-filter": true, value: this.filterAfterType, ref: (el) => (this.filterAfterTypeEl = el), part: "filter-after-type" }, renderFormItems("gxg-combo-box-item", [
-                {
-                    id: FILTER_AFTER.NONE,
-                    label: this._componentLocale.filter.afterNone,
-                    value: FILTER_AFTER.NONE
-                },
-                {
-                    id: FILTER_AFTER.DATE_TIME,
-                    label: this._componentLocale.filter[FILTER_AFTER.DATE_TIME],
-                    value: FILTER_AFTER.DATE_TIME
-                },
-                {
-                    id: FILTER_AFTER.IMPORT,
-                    label: this._componentLocale.filter[FILTER_AFTER.IMPORT],
-                    value: FILTER_AFTER.IMPORT
-                },
-                {
-                    id: FILTER_AFTER.LAST_BUILD,
-                    label: this._componentLocale.filter[FILTER_AFTER.LAST_BUILD],
-                    value: FILTER_AFTER.LAST_BUILD
-                }
-            ])), h("gxg-form-text", { disabled: !this.filterModified, labelPosition: "above", label: this._componentLocale.filter.user, ref: (el) => (this.filterUserEl = el), value: "hey", centerLabel: false, class: "user", part: "filter-user" }), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.style, disabled: !this.styles, ref: (el) => (this.filterStyleEl = el), class: "style", part: "filter-style" }, renderFormItems("gxg-combo-box-item", (_b = this.styles) !== null && _b !== void 0 ? _b : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.language, disabled: !this.languages, ref: (el) => (this.filterLanguageEl = el), class: "language", part: "filter-language" }, renderFormItems("gxg-combo-box-item", (_c = this.languages) !== null && _c !== void 0 ? _c : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.density, disabled: !this.densities, ref: (el) => (this.filterDensityEl = el), class: "density", part: "filter-density" }, renderFormItems("gxg-combo-box-item", (_d = this.densities) !== null && _d !== void 0 ? _d : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.layer, disabled: !this.layers, ref: (el) => (this.filterLayerEl = el), class: "layer", part: "filter-layer" }, renderFormItems("gxg-combo-box-item", (_e = this.layers) !== null && _e !== void 0 ? _e : []))))));
-        };
-        this.renderImagesData = () => {
-            return (
-            /* images information*/
-            h("gx-ide-container", { contentBorderEnd: true, noContentPadding: true, titleType: "secondary", containerTitle: !this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, class: { "images-information": true, "overflow-auto": true }, part: "grid-container" }, this.secondaryFilter ? (h("header", { class: "images-information__header", slot: "header" }, h("gx-ide-title", { type: "secondary", class: "images-information__header-title" }, this._componentLocale.imagesDataTitle), h("gxg-form-text", { icon: "gemini-tools/search", "icon-position": "start", placeholder: "Search by any field", onInput: this.filterInputHandler }))) : null, h("ch-tabular-grid", { ref: (el) => (this.chGridEl = el), part: "ch-grid-images", rowSelectionMode: "single", class: "tabular-grid tabular-grid-ww-images" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { columnName: "", columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.name, columnNameHidden: false, settingable: false, class: "tabular-grid-column", size: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.module, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.common, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.description, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.commonDouble, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" })), this.filteredImages.map((obj) => (h("ch-tabular-grid-row", { rowid: obj.id, class: "tabular-grid-row" }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("ch-image", { src: obj.icon })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.name, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.module, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.description, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.modifiedDate)}`, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.lastUser, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.importDate)}`, this.filterImagesInputValue))))))));
-        };
-        this.renderImages = () => {
-            return (
-            /* tiles */
-            h("gx-ide-container", { containerTitle: this._componentLocale.imagesTitle, noContentPadding: true, titleType: "secondary", class: "overflow-auto", titleHeightAsInput: this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, part: "image-data-container" }, h("div", { class: "images-container" }, this.imagesSelectedItems.map(item => (h("div", { class: "image-item" }, h("div", { class: "image-item__container" }, h("div", { class: "img" }, h("img", { src: item.url, alt: item.id }))), h("span", { class: "image-item__name" }, item.name)))))));
-        };
-        // 9.LOCAL METHODS -> Other //
-        this.getImages = () => {
-            let filters = {
-                name: this.filterNameEl.value,
-                parent: this.filterModuleEl.value ? this.filterModuleEl.value.id : null
+        _GxIdeWWImages__componentLocale.set(this, void 0);
+        _GxIdeWWImages_filterInitialData.set(this, void 0);
+        _GxIdeWWImages_renderedFirstTime.set(this, false);
+        _GxIdeWWImages_imagesMap.set(this, new Map());
+        _GxIdeWWImages_chGridEl.set(this, void 0);
+        _GxIdeWWImages_filterAfterTypeEl.set(this, void 0);
+        _GxIdeWWImages_filterAllDescendantsEl.set(this, void 0);
+        _GxIdeWWImages_filterCategoryEl.set(this, void 0);
+        _GxIdeWWImages_filterDensityEl.set(this, void 0);
+        _GxIdeWWImages_filterLanguageEl.set(this, void 0);
+        _GxIdeWWImages_filterLayerEl.set(this, void 0);
+        _GxIdeWWImages_filterModifiedDateEl.set(this, void 0);
+        _GxIdeWWImages_filterModuleEl.set(this, void 0);
+        _GxIdeWWImages_filterNameEl.set(this, void 0);
+        _GxIdeWWImages_filterSearchContentsEl.set(this, void 0);
+        _GxIdeWWImages_filterStyleEl.set(this, void 0);
+        _GxIdeWWImages_filterUserEl.set(this, void 0);
+        _GxIdeWWImages_deleteSelectionCallbackHandler.set(this, () => {
+            this.deleteSelectionCallback(this.selectedObjectsIds);
+        });
+        _GxIdeWWImages_deselectAll.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").selectAllRows(false);
+        });
+        _GxIdeWWImages_filterAfterTypeChangeHandler.set(this, (event) => {
+            this.afterCurrentValue = event.detail;
+            __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        });
+        _GxIdeWWImages_filterImagesInformationHandler.set(this, () => {
+            const filterValue = this.filterImagesInputValue.toLocaleLowerCase();
+            this.filteredImages = this.images.filter(image => {
+                var _a, _b, _c;
+                const nameMatch = image.name.toLocaleLowerCase().includes(filterValue);
+                const moduleMatch = image.module
+                    .toLocaleLowerCase()
+                    .includes(filterValue);
+                const descriptionMatch = image.description
+                    .toLocaleLowerCase()
+                    .includes(filterValue);
+                const modifiedDateMatch = (_a = image.modifiedDate) === null || _a === void 0 ? void 0 : _a.toString().includes(filterValue);
+                const lastUser = (_b = image.lastUser) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase().includes(filterValue);
+                const importDateMatch = (_c = image.importDate) === null || _c === void 0 ? void 0 : _c.toString().includes(filterValue);
+                return (nameMatch ||
+                    moduleMatch ||
+                    descriptionMatch ||
+                    modifiedDateMatch ||
+                    lastUser ||
+                    importDateMatch);
+            });
+        });
+        _GxIdeWWImages_filterInputHandler.set(this, (event) => {
+            this.filterImagesInputValue = event.detail.toLowerCase();
+            __classPrivateFieldGet(this, _GxIdeWWImages_filterImagesInformationHandler, "f").call(this);
+        });
+        _GxIdeWWImages_toggleFilterButtonClickedHandler.set(this, () => {
+            this.toggleFilterButtonActive = !this.toggleFilterButtonActive;
+        });
+        _GxIdeWWImages_getImages.set(this, () => {
+            var _a;
+            __classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").clear();
+            const filters = {
+                name: __classPrivateFieldGet(this, _GxIdeWWImages_filterNameEl, "f").value,
+                searchContents: __classPrivateFieldGet(this, _GxIdeWWImages_filterSearchContentsEl, "f").value,
+                category: __classPrivateFieldGet(this, _GxIdeWWImages_filterCategoryEl, "f").value,
+                parent: __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").value ? __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").value.id : null,
+                allDescendants: !!__classPrivateFieldGet(this, _GxIdeWWImages_filterAllDescendantsEl, "f").value,
+                modifiedAfter: __classPrivateFieldGet(this, _GxIdeWWImages_filterAfterTypeEl, "f").value,
+                modifiedBy: __classPrivateFieldGet(this, _GxIdeWWImages_filterUserEl, "f").value,
+                modifiedDate: new Date(__classPrivateFieldGet(this, _GxIdeWWImages_filterModifiedDateEl, "f").value),
+                style: __classPrivateFieldGet(this, _GxIdeWWImages_filterStyleEl, "f").value,
+                language: __classPrivateFieldGet(this, _GxIdeWWImages_filterLanguageEl, "f").value,
+                density: __classPrivateFieldGet(this, _GxIdeWWImages_filterDensityEl, "f").value,
+                layer: (_a = __classPrivateFieldGet(this, _GxIdeWWImages_filterLayerEl, "f")) === null || _a === void 0 ? void 0 : _a.value
             };
-            const modified = this.filterModifiedEl.checked;
-            const modifiedAfter = this.filterAfterTypeEl.value;
-            filters = Object.assign(Object.assign({}, filters), { searchContents: this.filterSearchContentsEl.value, category: this.filterCategoryEl.value, allDescendants: this.filterAllDescendantsEl.checked, modifiedAfter: modified ? modifiedAfter : null, modifiedBy: modified ? this.filterUserEl.value : null, modifiedDate: modified && modifiedAfter === FILTER_AFTER.DATE_TIME
-                    ? this.filterModifiedDateEl.value
-                    : null, style: this.filterStyleEl.value, language: this.filterLanguageEl.value, density: this.filterDensityEl.value, layer: this.filterLayerEl.value });
             this.loadCallback(filters).then((items) => {
                 this.images = items;
                 this.selectedObjectsIds = [];
-                this.deselectAll();
-                this.filterImagesInformationHandler();
-            });
-        };
-        this.newObjectCallbackHandler = () => {
-            this.newObjectCallback();
-        };
-        this.openSelectionCallBackHandler = () => {
-            this.openSelectionCallback(this.selectedObjectsIds);
-        };
-        this.deleteSelectionCallbackHandler = () => {
-            this.deleteSelectionCallback(this.selectedObjectsIds);
-        };
-        this.resetFilterHandler = () => {
-            if (this.filterInitialData) {
-                this.filterNameEl.value = this.filterInitialData.name;
-                this.filterModuleEl.value = this.filterInitialData.module;
-                this.filterSearchContentsEl.value = this.filterInitialData.searchContents;
-                this.filterCategoryEl.value = this.filterInitialData.category;
-                this.filterAllDescendantsEl.checked =
-                    this.filterInitialData.allDescendants;
-                this.filterModifiedEl.checked = this.filterInitialData.modified;
-                this.filterModifiedDateEl.value = this.filterInitialData.dateTime;
-                this.filterAfterTypeEl.value = this.filterInitialData.after;
-                this.filterUserEl.value = this.filterInitialData.user;
-                this.filterStyleEl.value = this.filterInitialData.style;
-                this.filterLanguageEl.value = this.filterInitialData.language;
-                this.filterDensityEl.value = this.filterInitialData.density;
-                this.filterLayerEl.value = this.filterInitialData.layer;
-            }
-        };
-        this.toggleFiltersHandler = () => {
-            this.filtersHidden = !this.filtersHidden;
-        };
-        this.selectAll = () => {
-            this.chGridEl.selectAllRows();
-        };
-        this.deselectAll = () => {
-            this.chGridEl.selectAllRows(false);
-        };
-        this.listenChanges = () => {
-            /* name */
-            this.filterNameEl.addEventListener("change", () => {
-                this.getImages();
+                __classPrivateFieldGet(this, _GxIdeWWImages_deselectAll, "f").call(this);
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterImagesInformationHandler, "f").call(this);
             });
+        });
+        _GxIdeWWImages_getToday.set(this, () => {
+            const now = new Date();
+            const date = now.toISOString().split("T")[0];
+            const time = now.toISOString().split("T")[1].slice(0, 5); // Only take 'HH:MM' part
+            return `${date}T${time}`;
+        });
+        _GxIdeWWImages_listenChanges.set(this, () => {
             /* module/folder */
-            this.filterModuleEl.addEventListener("valueChanged", () => {
-                this.getImages();
-            });
-            /* search contents*/
-            this.filterSearchContentsEl.addEventListener("change", () => {
-                this.getImages();
-            });
-            /* category */
-            this.filterCategoryEl.addEventListener("valueChanged", () => {
-                this.getImages();
-            });
-            /* (options) -> all descendants */
-            this.filterAllDescendantsEl.addEventListener("change", () => {
-                this.getImages();
-            });
-            /* (options) -> modified */
-            this.filterModifiedEl.addEventListener("change", (e) => {
-                this.filterModified = e.detail.value;
-                this.getImages();
-            });
-            /* date/time */
-            this.filterModifiedDateEl.addEventListener("valueChanged", () => {
-                this.getImages();
-            });
-            /* after */
-            this.filterAfterTypeEl.addEventListener("valueChanged", () => {
-                this.filterAfterType = this.filterAfterTypeEl.value;
-                this.getImages();
-            });
-            /* user */
-            this.filterUserEl.addEventListener("change", () => {
-                this.getImages();
-            });
-            /* style */
-            this.filterStyleEl.addEventListener("valueChanged", () => {
-                this.getImages();
-            });
-            /* language */
-            this.filterLanguageEl.addEventListener("valueChanged", () => {
-                this.getImages();
-            });
-            /* density */
-            this.filterDensityEl.addEventListener("valueChanged", () => {
-                this.getImages();
-            });
-            /* layer */
-            this.filterLayerEl.addEventListener("valueChanged", () => {
-                this.getImages();
+            __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").addEventListener("valueChanged", () => {
+                __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
             });
             // for grid selection
-            this.chGridEl.addEventListener("selectionChanged", (ev) => {
-                this.loadImageItemsCallback(ev.detail.rowsId[0]).then((items) => {
-                    this.imagesSelectedItems = items;
-                });
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("selectionChanged", (ev) => {
+                const selectedId = ev.detail.rowsId[0];
+                if (__classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").has(selectedId)) {
+                    this.imagesSelectedItems = __classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").get(selectedId);
+                }
+                else {
+                    this.loadImageItemsCallback(selectedId).then((items) => {
+                        __classPrivateFieldGet(this, _GxIdeWWImages_imagesMap, "f").set(selectedId, items);
+                        this.imagesSelectedItems = items;
+                    });
+                }
             });
-            this.chGridEl.addEventListener("rowDoubleClicked", () => {
-                this.openSelectionCallBackHandler();
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowDoubleClicked", () => {
+                __classPrivateFieldGet(this, _GxIdeWWImages_openSelectionCallBackHandler, "f").call(this);
             });
-            this.chGridEl.addEventListener("selectionChanged", (ev) => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("selectionChanged", (ev) => {
                 this.selectedObjectsIds = ev.detail.rowsId;
                 this.selectionObjectChangedCallback(this.selectedObjectsIds);
             });
-            this.chGridEl.addEventListener("rowContextMenu", (ev) => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").addEventListener("rowContextMenu", (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.contextMenuCallback({
@@ -243,184 +205,335 @@ 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 = "";
+        });
+        _GxIdeWWImages_newObjectCallbackHandler.set(this, () => {
+            this.newObjectCallback();
+        });
+        _GxIdeWWImages_openSelectionCallBackHandler.set(this, () => {
+            this.openSelectionCallback(this.selectedObjectsIds);
+        });
+        // #removeDetectClickOutsideFilter = () => {
+        //   document.removeEventListener("click", this.#detectClickOutsideFilter);
+        // };
+        _GxIdeWWImages_renderHeader.set(this, () => {
+            return [
+                h("div", {
+                    // name
+                    class: "field field-block name"
+                }, h("label", { class: "label", htmlFor: "filter-name" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.name), h("ch-edit", { id: "filter-name", class: "input name", ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterNameEl, el, "f")), debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f"), part: "filter-name" })),
+                h("div", { class: "field field-block module-folder" }, h("label", { class: "label", htmlFor: "module-folder" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.moduleFolder), h("gx-ide-entity-selector", {
+                    // module/folder
+                    class: "module-folder", part: "filter-module-folder", id: "module/folder", labelPosition: "none", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterModuleEl, el, "f"))
+                })),
+                h("button", {
+                    // toggle / untoggle filter button
+                    class: "button-secondary button-icon-and-text", onClick: __classPrivateFieldGet(this, _GxIdeWWImages_toggleFilterButtonClickedHandler, "f")
+                }, h("ch-image", { class: "icon-md", src: FILTER_ICON }), this.filterSidebarExpanded
+                    ? __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.less
+                    : __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.more)
+                // <button
+                //   class="button-tertiary button-icon-only"
+                //   aria-label={
+                //     this.toggleFilterButtonActive
+                //       ? this.#_componentLocale.filter.btnUntoggleFilter
+                //       : this.#_componentLocale.filter.btnToggleFilter
+                //   }
+                //   onClick={this.#toggleFilterButtonClickedHandler}
+                // >
+                //   <ch-image class="icon-md" src={FILTER_ICON}></ch-image>
+                // </button>
+            ];
+        });
+        _GxIdeWWImages_renderFilter.set(this, () => {
+            var _a, _b, _c, _d, _e;
+            return (h("div", { class: "sidebar-container scrollable" }, h("ch-sidebar", { class: "sidebar sidebar-collapsed-hidden sidebar-with-motion sidebar-filter", expanded: this.filterSidebarExpanded }, h("div", { class: "main__filter field-group spacing-body-inline spacing-body-block scrollable" }, h("ch-checkbox", { class: "checkbox all-descendants", caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.allDescendants, checkedValue: "filterAllDescendants", ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterAllDescendantsEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f"), part: "filter-all-descendants" }), h("ch-accordion-render", {
+                // modified
+                class: "accordion-outlined modified-accordion", model: MODIFIED_ACCORDION_MODEL
+            }, h("div", { slot: "modified", class: "spacing-body" }, h("div", { class: "field-group field-group-modified" }, h("div", {
+                // after
+                class: "field field-block after-date-time"
+            }, h("label", { class: "label", htmlFor: "filter-after-type" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.afterLabel), h("ch-combo-box-render", { id: "filter-after-type", class: "combo-box", value: (_a = this.filterAfterOptions[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterAfterTypeEl, el, "f")), model: this.filterAfterOptions, part: "filter-after-type", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_filterAfterTypeChangeHandler, "f") })), h("div", {
+                // date/time
+                class: "field field-block date-time"
+            }, h("label", { class: {
+                    "label": true,
+                    "label--disabled": this.afterCurrentValue !== FILTER_AFTER.DATE_TIME
+                }, htmlFor: "modified-date" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.dateTime), h("input", { type: "datetime-local", class: "input ", id: "modified-date", name: "modifiedDate", part: "modified-date", max: TODAY, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterModifiedDateEl, el, "f")), disabled: this.afterCurrentValue !== FILTER_AFTER.DATE_TIME, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
+                // user
+                class: "field field-block user"
+            }, h("label", { class: "label", htmlFor: "filter-user" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.user), h("ch-edit", { id: "filter-user", value: "hey", class: "input", ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterUserEl, el, "f")), debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f"), part: "filter-user" }))))), h("div", {
+                // category
+                class: "field field-block category"
+            }, h("label", { class: "label", htmlFor: "filter-category" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.category), h("ch-combo-box-render", { id: "filter-category", class: "combo-box", value: this.defaultCategory, disabled: !this.categories, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterCategoryEl, el, "f")), model: this.categoriesComboBoxModel, part: "filter-category", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
+                // style
+                class: "field field-block style"
+            }, h("label", { class: "label", htmlFor: "filter-style" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.style), h("ch-combo-box-render", { id: "filter-style", class: "combo-box", value: (_b = this.stylesComboBoxModel[0]) === null || _b === void 0 ? void 0 : _b.value, disabled: !this.styles, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterStyleEl, el, "f")), model: this.stylesComboBoxModel, part: "filter-style", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
+                // language
+                class: "field field-block language"
+            }, h("label", { class: "label", htmlFor: "filter-language" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.language), h("ch-combo-box-render", { id: "filter-language", class: "combo-box", value: (_c = this.languagesComboBoxModel[0]) === null || _c === void 0 ? void 0 : _c.value, disabled: !this.languages, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterLanguageEl, el, "f")), model: this.languagesComboBoxModel, part: "filter-language", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
+                // density
+                class: "field field-block"
+            }, h("label", { class: "label", htmlFor: "filter-density" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.density), h("ch-combo-box-render", { id: "filter-density", class: "combo-box", value: (_d = this.densitiesComboBoxModel[0]) === null || _d === void 0 ? void 0 : _d.value, disabled: !this.densities, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterDensityEl, el, "f")), model: this.densitiesComboBoxModel, part: "filter-density", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })), h("div", {
+                // layer
+                class: "field field-block"
+            }, h("label", { class: "label", htmlFor: "filter-layer" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.layer), h("ch-combo-box-render", { id: "filter-layer", class: "combo-box", value: (_e = this.layersComboBoxModel[0]) === null || _e === void 0 ? void 0 : _e.value, disabled: !this.layers, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterLayerEl, el, "f")), model: this.layersComboBoxModel, part: "filter-layer", onInput: __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f") })))), __classPrivateFieldGet(this, _GxIdeWWImages_renderImages, "f").call(this)));
+        });
+        _GxIdeWWImages_renderImages.set(this, () => {
+            return (
+            /* tiles */
+            h("div", { class: "main__images-container spacing-body-inline" }, this.imagesSelectedItems.map(item => (h("figure", { class: "figure" }, h("picture", { class: "figure__picture" }, h("img", { class: "figure__img", src: item.url, alt: item.name })), h("figcaption", { class: "figure__figcaption" }, item.name))))));
+        });
+        _GxIdeWWImages_renderImagesData.set(this, () => {
+            return (h("div", { class: {
+                    "field-group": true,
+                    "main__grid": true,
+                    "main__grid--with-filter": this.secondaryFilter
+                } }, this.secondaryFilter ? (h("header", { class: "images-information__header spacing-body-inline-start", slot: "header" }, h("div", {
+                // search contents
+                class: "field field-inline"
+            }, h("label", { class: "label", htmlFor: "search-input" }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.search), h("ch-edit", { id: "search-input", class: "input name", placeholder: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.searchByContentPlaceholder, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_filterSearchContentsEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeWWImages_filterInputHandler, "f"), startImgSrc: SEARCH_ICON, part: "search-input" })))) : null, h("ch-tabular-grid", { ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWImages_chGridEl, el, "f")), part: "ch-grid-images", rowSelectionMode: "multiple", class: "tabular-grid tabular-grid-ww-images" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { columnName: "", columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.name, columnNameHidden: false, settingable: false, class: "tabular-grid-column", size: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.module, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.common, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.description, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.commonDouble, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.modifiedDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.lastUser, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), h("ch-tabular-grid-column", { columnName: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").tableHead.importDate, columnNameHidden: false, settingable: false, size: config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" })), this.filteredImages.length ? (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, this.filteredImages.map((obj) => (h("ch-tabular-grid-row", { rowid: obj.id, class: "tabular-grid-row" }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("ch-image", { src: obj.icon })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.name.toLowerCase(), this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.module.toLowerCase(), this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.description.toLowerCase(), this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.modifiedDate)}`, this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(obj.lastUser.toLowerCase(), this.filterImagesInputValue)), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, hiChar(`${formatDate(obj.importDate)}`, this.filterImagesInputValue))))))) : null
+            // TODO (Add empty state)
+            )));
+        });
+        _GxIdeWWImages_resetFilterHandler.set(this, () => {
+            if (__classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f")) {
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterNameEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").name;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").module;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterSearchContentsEl, "f").value =
+                    __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").searchContents;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterCategoryEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").category;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterAllDescendantsEl, "f").value =
+                    __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").allDescendants;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterAfterTypeEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").modifiedAfter;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterModifiedDateEl, "f").value =
+                    __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").modifiedDateTime;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterUserEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").modifiedUser;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterStyleEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").style;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterLanguageEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").language;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterDensityEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").density;
+                __classPrivateFieldGet(this, _GxIdeWWImages_filterLayerEl, "f").value = __classPrivateFieldGet(this, _GxIdeWWImages_filterInitialData, "f").layer;
+                __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+                this.afterCurrentValue = __classPrivateFieldGet(this, _GxIdeWWImages_filterCategoryEl, "f").value; // this value has to be evaluated on a re-render
+            }
+        });
+        _GxIdeWWImages_saveInitialFilterData.set(this, () => {
+            var _a, _b, _c;
+            __classPrivateFieldSet(this, _GxIdeWWImages_filterInitialData, {
+                name: __classPrivateFieldGet(this, _GxIdeWWImages_filterNameEl, "f").value,
+                module: __classPrivateFieldGet(this, _GxIdeWWImages_filterModuleEl, "f").value,
+                searchContents: __classPrivateFieldGet(this, _GxIdeWWImages_filterSearchContentsEl, "f").value,
+                category: __classPrivateFieldGet(this, _GxIdeWWImages_filterCategoryEl, "f").value,
+                allDescendants: __classPrivateFieldGet(this, _GxIdeWWImages_filterAllDescendantsEl, "f").value,
+                modifiedAfter: (_a = __classPrivateFieldGet(this, _GxIdeWWImages_filterAfterTypeEl, "f")) === null || _a === void 0 ? void 0 : _a.value,
+                modifiedDateTime: (_b = __classPrivateFieldGet(this, _GxIdeWWImages_filterModifiedDateEl, "f")) === null || _b === void 0 ? void 0 : _b.value,
+                modifiedUser: (_c = __classPrivateFieldGet(this, _GxIdeWWImages_filterUserEl, "f")) === null || _c === void 0 ? void 0 : _c.value,
+                style: __classPrivateFieldGet(this, _GxIdeWWImages_filterStyleEl, "f").value,
+                language: __classPrivateFieldGet(this, _GxIdeWWImages_filterLanguageEl, "f").value,
+                density: __classPrivateFieldGet(this, _GxIdeWWImages_filterDensityEl, "f").value,
+                layer: __classPrivateFieldGet(this, _GxIdeWWImages_filterLayerEl, "f").value
+            }, "f");
+        });
+        _GxIdeWWImages_selectAll.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeWWImages_chGridEl, "f").selectAllRows();
+        });
+        this.categoriesComboBoxModel = [];
+        this.densitiesComboBoxModel = [];
+        this.languagesComboBoxModel = [];
+        this.layersComboBoxModel = [];
+        this.stylesComboBoxModel = [];
+        this.filterSidebarExpanded = false;
+        this.afterCurrentValue = undefined;
+        this.filterAfterOptions = undefined;
+        this.filterImagesInputValue = "";
         this.filterModified = false;
-        this.images = [];
         this.filteredImages = [];
+        this.images = [];
         this.imagesSelectedItems = [];
         this.selectedObjectsIds = [];
-        this.filterImagesInputValue = "";
-        this.displayTitle = false;
-        this.secondaryFilter = false;
+        this.toggleFilterButtonActive = false;
         this.categories = undefined;
-        this.densities = undefined;
+        this.contextMenuCallback = undefined;
         this.defaultCategory = undefined;
         this.defaultModule = undefined;
-        this.defaultType = undefined;
-        this.filterModules = undefined;
+        this.deleteSelectionCallback = undefined;
+        this.densities = undefined;
         this.languages = undefined;
         this.layers = undefined;
-        this.contextMenuCallback = undefined;
-        this.deleteSelectionCallback = undefined;
         this.loadCallback = undefined;
         this.loadImageItemsCallback = undefined;
         this.newObjectCallback = undefined;
         this.openSelectionCallback = undefined;
         this.selectModuleCallback = undefined;
         this.selectionObjectChangedCallback = undefined;
+        this.secondaryFilter = false;
         this.shadow = false;
         this.styles = undefined;
         this.types = undefined;
     }
-    filtersHiddenHandler(hidden) {
-        if (hidden) {
-            this.removeDetectClickOutsideFilter();
-        }
-        else {
-            this.attachDetectClickOutsideFilter();
-        }
+    toggleFilterButtonActiveChanged(active) {
+        this.filterSidebarExpanded = active;
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.componentDidLoadEvent.emit(true);
+    categoriesChanged(newCategories) {
+        this.categoriesComboBoxModel = mapOptionsToComboBoxItemModel(newCategories);
+    }
+    densitiesChanged(newDensities) {
+        this.densitiesComboBoxModel = mapOptionsToComboBoxItemModel(newDensities);
+    }
+    languagesChanged(newLanguages) {
+        this.languagesComboBoxModel = mapOptionsToComboBoxItemModel(newLanguages);
+    }
+    layersChanged(newLayers) {
+        this.layersComboBoxModel = mapOptionsToComboBoxItemModel(newLayers);
+    }
+    stylesChanged(newStyles) {
+        this.stylesComboBoxModel = mapOptionsToComboBoxItemModel(newStyles);
+    }
+    async connectedCallback() {
+        TODAY = __classPrivateFieldGet(this, _GxIdeWWImages_getToday, "f").call(this);
     }
     componentDidLoad() {
-        this.listenChanges();
-        this.getImages();
-        this.saveInitialFilterData();
-        this.filterNameEl.focus();
+        __classPrivateFieldGet(this, _GxIdeWWImages_listenChanges, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeWWImages_saveInitialFilterData, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeWWImages_filterNameEl, "f").focus();
     }
     componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+        if (!__classPrivateFieldGet(this, _GxIdeWWImages_renderedFirstTime, "f")) {
+            this.componentDidRenderFirstTime.emit(__classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").componentName);
+            __classPrivateFieldSet(this, _GxIdeWWImages_renderedFirstTime, true, "f");
         }
     }
-    // 7.LISTENERS //
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeWWImages__componentLocale, await Locale.getComponentStrings(this.el), "f");
+        this.componentDidLoadEvent.emit(true);
+        // initialize combo-box models
+        this.categoriesChanged(this.categories);
+        this.densitiesChanged(this.densities);
+        this.languagesChanged(this.languages);
+        this.layersChanged(this.layers);
+        this.stylesChanged(this.styles);
+        // initialize "After" combo-box options
+        this.filterAfterOptions = [
+            {
+                caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter.afterNone,
+                value: FILTER_AFTER.NONE
+            },
+            {
+                caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter[FILTER_AFTER.DATE_TIME],
+                value: FILTER_AFTER.DATE_TIME
+            },
+            {
+                caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter[FILTER_AFTER.IMPORT],
+                value: FILTER_AFTER.IMPORT
+            },
+            {
+                caption: __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").filter[FILTER_AFTER.LAST_BUILD],
+                value: FILTER_AFTER.LAST_BUILD
+            }
+        ];
+        this.afterCurrentValue = this.filterAfterOptions[0].value;
+    }
     keyDownHandler(eventInfo) {
         if (document.activeElement === this.el) {
             switch (eventInfo.key) {
                 case "Enter":
-                    this.openSelectionCallBackHandler();
+                    __classPrivateFieldGet(this, _GxIdeWWImages_openSelectionCallBackHandler, "f").call(this);
                     break;
                 case "Delete":
-                    this.deleteSelectionCallbackHandler();
+                    __classPrivateFieldGet(this, _GxIdeWWImages_deleteSelectionCallbackHandler, "f").call(this);
                     break;
             }
         }
     }
-    // 8.PUBLIC METHODS API //
     /**
-     * Validate necessary data input
-     */
-    async validate() {
-        const isValid = true;
-        return isValid;
-    }
-    /**
-     * This method reload the view, refreshing the filters and the table of images.
+     * Reloads the view, refreshing the filters and the images table.
      */
     async reload() {
-        this.deleteSelectionCallbackHandler();
-        this.getImages();
+        __classPrivateFieldGet(this, _GxIdeWWImages_deleteSelectionCallbackHandler, "f").call(this);
+        __classPrivateFieldGet(this, _GxIdeWWImages_getImages, "f").call(this);
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        return (h(Host, { class: "gx-ide-component" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "master-wrapper" }, this.renderFilter(), h("div", { class: "grid-images-container" }, this.renderImagesData(), this.renderImages())), h("gxg-button", { id: "button-select-all", type: "outlined", onClick: this.selectAll, part: "gxg-button gxg-button--select-all", slot: "footer-end" }, this._componentLocale.footer.btnSelectAll), h("gxg-button", { id: "button-new-file", type: "primary-text-icon", icon: "objects/image", onClick: this.newObjectCallbackHandler, part: "gxg-button gxg-button--new-file", slot: "footer-end" }, this._componentLocale.footer.btnNew), h("gxg-text", { class: "align-end", part: "objects-matching", slot: "footer-start" }, `${this.filteredImages.length} ${this._componentLocale.objCount.matching}`)))));
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("header", { class: "header control-header-with-border spacing-body-inline spacing-body-block-start field-group" }, __classPrivateFieldGet(this, _GxIdeWWImages_renderHeader, "f").call(this)), h("div", { class: "main" }, __classPrivateFieldGet(this, _GxIdeWWImages_renderImagesData, "f").call(this), h("div", { class: "main__aside field-group" }, h("div", { class: "spacing-body-inline" }, h("button", {
+            // reset filter button
+            class: "button-secondary button-icon-and-text button-reset", onClick: __classPrivateFieldGet(this, _GxIdeWWImages_resetFilterHandler, "f")
+        }, h("ch-image", { class: "icon-sm", src: RESET_ICON }), "Reset")), __classPrivateFieldGet(this, _GxIdeWWImages_renderFilter, "f").call(this))), h("footer", { class: "control-footer-with-border control-footer-space-between spacing-body" }, h("p", {
+            // matching objects
+            class: "text-body", part: "objects-matching"
+        }, `${this.filteredImages.length} ${__classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").objCount.matching}`), h("div", { class: "buttons-spacer" }, h("button", {
+            // select all button
+            id: "button-select-all", class: "button-secondary", onClick: __classPrivateFieldGet(this, _GxIdeWWImages_selectAll, "f"), part: "button button--select-all"
+        }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").footer.btnSelectAll), h("button", {
+            // new image button
+            id: "button-new-file", class: "button-primary button-icon-and-text", onClick: __classPrivateFieldGet(this, _GxIdeWWImages_newObjectCallbackHandler, "f"), part: "button button--new-file"
+        }, __classPrivateFieldGet(this, _GxIdeWWImages__componentLocale, "f").footer.btnNew))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/ww-images"]; }
     get el() { return this; }
     static get watchers() { return {
-        "filtersHidden": ["filtersHiddenHandler"]
+        "toggleFilterButtonActive": ["toggleFilterButtonActiveChanged"],
+        "categories": ["categoriesChanged"],
+        "densities": ["densitiesChanged"],
+        "languages": ["languagesChanged"],
+        "layers": ["layersChanged"],
+        "styles": ["stylesChanged"]
     }; }
     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],
+        "secondaryFilter": [4, "secondary-filter"],
         "shadow": [4],
         "styles": [16],
         "types": [16],
-        "filtersHidden": [32],
-        "filterAfterType": [32],
+        "categoriesComboBoxModel": [32],
+        "densitiesComboBoxModel": [32],
+        "languagesComboBoxModel": [32],
+        "layersComboBoxModel": [32],
+        "stylesComboBoxModel": [32],
+        "filterSidebarExpanded": [32],
+        "afterCurrentValue": [32],
+        "filterAfterOptions": [32],
+        "filterImagesInputValue": [32],
         "filterModified": [32],
-        "images": [32],
         "filteredImages": [32],
+        "images": [32],
         "imagesSelectedItems": [32],
         "selectedObjectsIds": [32],
-        "filterImagesInputValue": [32],
-        "validate": [64],
+        "toggleFilterButtonActive": [32],
         "reload": [64]
     }, [[1, "keydown", "keyDownHandler"]], {
-        "filtersHidden": ["filtersHiddenHandler"]
+        "toggleFilterButtonActive": ["toggleFilterButtonActiveChanged"],
+        "categories": ["categoriesChanged"],
+        "densities": ["densitiesChanged"],
+        "languages": ["languagesChanged"],
+        "layers": ["layersChanged"],
+        "styles": ["stylesChanged"]
     }]);
+_GxIdeWWImages__componentLocale = new WeakMap(), _GxIdeWWImages_filterInitialData = new WeakMap(), _GxIdeWWImages_renderedFirstTime = new WeakMap(), _GxIdeWWImages_imagesMap = new WeakMap(), _GxIdeWWImages_chGridEl = new WeakMap(), _GxIdeWWImages_filterAfterTypeEl = new WeakMap(), _GxIdeWWImages_filterAllDescendantsEl = new WeakMap(), _GxIdeWWImages_filterCategoryEl = new WeakMap(), _GxIdeWWImages_filterDensityEl = new WeakMap(), _GxIdeWWImages_filterLanguageEl = new WeakMap(), _GxIdeWWImages_filterLayerEl = new WeakMap(), _GxIdeWWImages_filterModifiedDateEl = new WeakMap(), _GxIdeWWImages_filterModuleEl = new WeakMap(), _GxIdeWWImages_filterNameEl = new WeakMap(), _GxIdeWWImages_filterSearchContentsEl = new WeakMap(), _GxIdeWWImages_filterStyleEl = new WeakMap(), _GxIdeWWImages_filterUserEl = new WeakMap(), _GxIdeWWImages_deleteSelectionCallbackHandler = new WeakMap(), _GxIdeWWImages_deselectAll = new WeakMap(), _GxIdeWWImages_filterAfterTypeChangeHandler = new WeakMap(), _GxIdeWWImages_filterImagesInformationHandler = new WeakMap(), _GxIdeWWImages_filterInputHandler = new WeakMap(), _GxIdeWWImages_toggleFilterButtonClickedHandler = new WeakMap(), _GxIdeWWImages_getImages = new WeakMap(), _GxIdeWWImages_getToday = new WeakMap(), _GxIdeWWImages_listenChanges = new WeakMap(), _GxIdeWWImages_newObjectCallbackHandler = new WeakMap(), _GxIdeWWImages_openSelectionCallBackHandler = new WeakMap(), _GxIdeWWImages_renderHeader = new WeakMap(), _GxIdeWWImages_renderFilter = new WeakMap(), _GxIdeWWImages_renderImages = new WeakMap(), _GxIdeWWImages_renderImagesData = new WeakMap(), _GxIdeWWImages_resetFilterHandler = new WeakMap(), _GxIdeWWImages_saveInitialFilterData = new WeakMap(), _GxIdeWWImages_selectAll = new WeakMap();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-ww-images", "gx-ide-container", "gx-ide-entity-selector", "gx-ide-title"];
+    const components = ["gx-ide-ww-images", "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":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
         case "gx-ide-entity-selector":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "gx-ide-title":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }