@genexus/genexus-ide-ui 2.0.0 → 2.1.1

package/dist/genexus-ide-ui/p-520c3763.entry.js

@@ -0,0 +1,936 @@
+import { r as e, h as t, H as i, a as s } from "./p-9b9ccd0c.js";
+
+import { g as a } from "./p-d42e842b.js";
+
+import "./p-6534555e.js";
+
+import "lit";
+
+import "lit/directives/when.js";
+
+import "lit/directives/if-defined.js";
+
+import { F as n } from "./p-13feb5cf.js";
+
+import { c as l } from "./p-c5196b3b.js";
+
+import { f as r } from "./p-4d330836.js";
+
+import { L as o } from "./p-311eedf3.js";
+
+const mapOptionsToComboBoxItemModel = e => {
+  if (!e) {
+    return [];
+  }
+  return e.map((e => {
+    var t;
+    return {
+      value: e.id,
+      caption: e.label,
+      startImgSrc: (t = e.iconName) !== null && t !== void 0 ? t : ""
+    };
+  }));
+};
+
+const h = '/*@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 d = undefined && undefined.__classPrivateFieldGet || function(e, t, i, s) {
+  if (i === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof t === "function" ? e !== t || !s : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? s : i === "a" ? s.call(e) : s ? s.value : t.get(e);
+};
+
+var c = undefined && undefined.__classPrivateFieldSet || function(e, t, i, s, a) {
+  if (s === "m") throw new TypeError("Private method is not writable");
+  if (s === "a" && !a) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof t === "function" ? e !== t || !a : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return s === "a" ? a.call(e, i) : a ? a.value = i : t.set(e, i), i;
+};
+
+var f, u, m, g, b, p, y, w, v, k, C, x, M, _, W, V, z, I, D, T, j, S, F, N, A, L, E, U, P, $, H, q, B, G, R, X, Y, J, K, O, Q;
+
+const Z = [ "resets/box-sizing", "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 ee = "all-descendants";
+
+const te = "modified";
+
+let ie = null;
+
+// icons
+const se = a({
+  category: "gemini-tools",
+  name: "reset",
+  colorType: "interactive"
+});
+
+const ae = a({
+  category: "gemini-tools",
+  name: "search",
+  colorType: "neutral"
+});
+
+const ne = a({
+  category: "gemini-tools",
+  name: "notice",
+  colorType: "on-elevation"
+});
+
+const le = class {
+  constructor(i) {
+    e(this, i);
+    f.add(this);
+    /**
+         * The component hard-coded strings translations.
+         */    u.set(this, void 0);
+    m.set(this, void 0);
+    g.set(this, []);
+    b.set(this, "advanced-filter");
+    p.set(this, new Map);
+    y.set(this, void 0);
+    // Only keep refs that are actually needed for operations (event listeners)
+        w.set(this, void 0);
+    /**
+         * Flag to prevent triggering #getImages on initial load
+         */    v.set(this, true);
+    k.set(this, (() => {
+      this.deleteSelectionCallback(this.selectedObjectsIds);
+    }));
+    C.set(this, (() => {
+      d(this, y, "f").selectAllRows(false);
+    }));
+    /**
+         * Individual handler functions for each filter control
+         */    x.set(this, (e => {
+      this.filterNameValue = e.detail || e.target.value;
+    }));
+    M.set(this, (e => {
+      this.filterSearchContentsValue = e.detail || e.target.value;
+    }));
+    _.set(this, (() => {
+      if (this.defaultCategory && this.categoriesComboBoxModel.length > 0) {
+        const e = this.categoriesComboBoxModel.some((e => e.value === this.defaultCategory));
+        if (e) {
+          this.filterCategoryValue = this.defaultCategory;
+        }
+      }
+    }));
+    W.set(this, (e => {
+      this.filterCategoryValue = e.detail;
+    }));
+    V.set(this, (e => {
+      this.filterAllDescendantsValue = e.detail === ee;
+    }));
+    z.set(this, (e => {
+      this.filterAfterTypeValue = e.detail;
+      this.afterCurrentValue = e.detail;
+    }));
+    I.set(this, (e => {
+      this.filterUserValue = e.detail || e.target.value;
+    }));
+    D.set(this, (e => {
+      this.filterModifiedDateValue = e.target.value;
+    }));
+    T.set(this, (e => {
+      this.filterStyleValue = e.detail;
+    }));
+    j.set(this, (e => {
+      this.filterLanguageValue = e.detail;
+    }));
+    S.set(this, (e => {
+      this.filterDensityValue = e.detail;
+    }));
+    F.set(this, (e => {
+      this.filterLayerValue = e.detail;
+    }));
+    N.set(this, (() => {
+      // Module change is handled via event listener, but we update state
+      if (d(this, w, "f")) {
+        this.filterModuleValue = d(this, w, "f").value;
+      }
+    }));
+    A.set(this, (() => {
+      // Copy images from server to tabularGridData (will be sorted before rendering)
+      this.tabularGridData = [ ...this.images ];
+    }));
+    L.set(this, (() => {
+      d(this, p, "f").clear();
+      const e = {
+        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
+      };
+      this.loadCallback(e).then((e => {
+        this.images = e;
+        this.selectedObjectsIds = [];
+        d(this, C, "f").call(this);
+        d(this, A, "f").call(this);
+      }));
+    }));
+    E.set(this, (() => {
+      const e = new Date;
+      const t = e.toISOString().split("T")[0];
+      const i = e.toISOString().split("T")[1].slice(0, 5);
+ // Only take 'HH:MM' part
+            return `${t}T${i}`;
+    }));
+    U.set(this, (() => {
+      /* module/folder */
+      d(this, w, "f").addEventListener("valueChanged", (() => {
+        d(this, N, "f").call(this);
+      }));
+      // for grid selection
+            d(this, y, "f").addEventListener("selectionChanged", (e => {
+        this.selectedObjectsIds = e.detail.rowsId;
+        this.selectionObjectChangedCallback(this.selectedObjectsIds);
+        if (this.selectedObjectsIds.length === 0) {
+          this.imagesSelectedItems = [];
+          return;
+        }
+        // Collect cached items immediately
+                const t = [];
+        const i = [];
+        this.selectedObjectsIds.forEach((e => {
+          if (d(this, p, "f").has(e)) {
+            const i = d(this, p, "f").get(e);
+            if (i) {
+              t.push(...i);
+            }
+          } else {
+            i.push(e);
+          }
+        }));
+        // If all items were cached, update immediately
+                if (i.length === 0) {
+          this.imagesSelectedItems = t;
+          return;
+        }
+        // Store current selection to verify later (prevents race conditions)
+                const s = [ ...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 a = i.map((e => this.loadImageItemsCallback(e).then((t => {
+          // Cache the items for future use
+          d(this, p, "f").set(e, t);
+          return t;
+        }))));
+        Promise.all(a).then((e => {
+          // Verify that selection hasn't changed while loading
+          const i = [ ...this.selectedObjectsIds ].sort().join(",");
+          if (s !== i) {
+            // Selection changed, ignore this result
+            return;
+          }
+          // Combine cached items with newly loaded items
+                    const a = [ ...t ];
+          e.forEach((e => {
+            a.push(...e);
+          }));
+          this.imagesSelectedItems = a;
+        }));
+      }));
+      d(this, y, "f").addEventListener("rowDoubleClicked", (() => {
+        d(this, B, "f").call(this);
+      }));
+      d(this, y, "f").addEventListener("rowContextMenu", (e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.contextMenuCallback({
+          selection: e.detail.selectedRowsId,
+          clientX: e.detail.clientX,
+          clientY: e.detail.clientY
+        });
+      }));
+    }));
+    /**
+         * Sorts images based on the current order criteria
+         */    $.set(this, ((e, t) => {
+      if (this.order.orderCriteria) {
+        const i = d(this, f, "m", P).call(this, e, this.order.orderCriteria).toUpperCase();
+        const s = d(this, f, "m", P).call(this, t, this.order.orderCriteria).toUpperCase();
+        if (i < s) {
+          return this.order.ascending ? -1 : 1;
+        }
+        if (i > s) {
+          return this.order.ascending ? 1 : -1;
+        }
+      }
+      return 0;
+    }));
+    /**
+         * Handles column sort changes
+         */    H.set(this, (e => {
+      const {columnId: t, sortDirection: i} = e.detail;
+      this.order = {
+        orderCriteria: t,
+        ascending: i === "asc"
+      };
+    }));
+    q.set(this, (() => {
+      this.newObjectCallback();
+    }));
+    B.set(this, (() => {
+      this.openSelectionCallback(this.selectedObjectsIds);
+    }));
+    G.set(this, (e => {
+      this.enabledModifiedControls = e.detail === te;
+    }));
+    R.set(this, (() => [ t("div", {
+      // name
+      class: "field field-block name"
+    }, t("label", {
+      class: "label",
+      htmlFor: "filter-name"
+    }, d(this, u, "f").filter.name), t("ch-edit", {
+      id: "filter-name",
+      class: "input",
+      autoFocus: true,
+      value: this.filterNameValue,
+      debounce: l.inputDebounce,
+      onInput: d(this, x, "f")
+    })), t("div", {
+      class: "field field-block module-folder"
+    }, t("label", {
+      class: "label",
+      htmlFor: "module-folder"
+    }, d(this, u, "f").filter.moduleFolder), t("gx-ide-entity-selector", {
+      // module/folder
+      id: "module/folder",
+      labelPosition: "none",
+      value: this.filterModuleValue,
+      defaultValue: this.defaultModule,
+      selectEntityCallback: this.selectModuleCallback,
+      ref: e => c(this, w, e, "f")
+    })), t("ch-accordion-render", {
+      // modified
+      class: "accordion-outlined advanced-filter-accordion",
+      model: d(this, g, "f")
+    }, t("div", {
+      slot: d(this, b, "f"),
+      class: "spacing-body"
+    }, t("div", {
+      class: "main__filter field-group scrollable"
+    }, t("div", {
+      // category
+      class: "field field-block category"
+    }, t("label", {
+      class: "label",
+      htmlFor: "filter-category"
+    }, d(this, u, "f").filter.category), t("ch-combo-box-render", {
+      id: "filter-category",
+      class: "combo-box",
+      value: this.filterCategoryValue,
+      disabled: !this.categories,
+      model: this.categoriesComboBoxModel,
+      onInput: d(this, W, "f")
+    })), t("div", {
+      // category
+      class: "field-group options"
+    }, t("label", {
+      class: "label",
+      htmlFor: "filter-category"
+    }, d(this, u, "f").filter.options), t("div", {
+      // options
+      class: "field field-inline"
+    }, t("ch-checkbox", {
+      class: "checkbox all-descendants",
+      caption: d(this, u, "f").filter.allDescendants,
+      checkedValue: ee,
+      value: this.filterAllDescendantsValue ? ee : undefined,
+      onInput: d(this, V, "f")
+    }), t("ch-checkbox", {
+      class: "checkbox modified",
+      caption: d(this, u, "f").filter.modified,
+      checkedValue: te,
+      onInput: d(this, G, "f")
+    }))), t("div", {
+      // after
+      class: "field field-block after-date-time"
+    }, t("label", {
+      class: {
+        label: true,
+        "label--disabled": !this.enabledModifiedControls
+      },
+      htmlFor: "filter-after-type"
+    }, d(this, u, "f").filter.afterLabel), t("ch-combo-box-render", {
+      id: "filter-after-type",
+      class: "combo-box",
+      value: this.filterAfterTypeValue,
+      disabled: !this.enabledModifiedControls,
+      model: this.filterAfterOptions,
+      onInput: d(this, z, "f")
+    })), t("div", {
+      // user
+      class: "field field-block user"
+    }, t("label", {
+      class: {
+        label: true,
+        "label--disabled": !this.enabledModifiedControls
+      },
+      htmlFor: "filter-user"
+    }, d(this, u, "f").filter.user), t("ch-edit", {
+      id: "filter-user",
+      value: this.filterUserValue,
+      class: "input",
+      disabled: !this.enabledModifiedControls,
+      debounce: l.inputDebounce,
+      onInput: d(this, I, "f")
+    })), t("div", {
+      // date/time
+      class: "field field-block date-time"
+    }, t("label", {
+      class: {
+        label: true,
+        "label--disabled": this.afterCurrentValue !== n.DATE_TIME
+      },
+      htmlFor: "modified-date"
+    }, d(this, u, "f").filter.dateTime), t("input", {
+      type: "datetime-local",
+      class: "input ",
+      id: "modified-date",
+      name: "modifiedDate",
+      value: this.filterModifiedDateValue,
+      max: ie,
+      disabled: this.afterCurrentValue !== n.DATE_TIME,
+      onInput: d(this, D, "f")
+    })), t("div", {
+      // style
+      class: "field field-block style"
+    }, t("label", {
+      class: "label",
+      htmlFor: "filter-style"
+    }, d(this, u, "f").filter.style), t("ch-combo-box-render", {
+      id: "filter-style",
+      class: "combo-box",
+      value: this.filterStyleValue,
+      disabled: !this.styles,
+      model: this.stylesComboBoxModel,
+      onInput: d(this, T, "f")
+    })), t("div", {
+      // language
+      class: "field field-block language"
+    }, t("label", {
+      class: "label",
+      htmlFor: "filter-language"
+    }, d(this, u, "f").filter.language), t("ch-combo-box-render", {
+      id: "filter-language",
+      class: "combo-box",
+      value: this.filterLanguageValue,
+      disabled: !this.languages,
+      model: this.languagesComboBoxModel,
+      onInput: d(this, j, "f")
+    })), t("div", {
+      // density
+      class: "field field-block"
+    }, t("label", {
+      class: "label",
+      htmlFor: "filter-density"
+    }, d(this, u, "f").filter.density), t("ch-combo-box-render", {
+      id: "filter-density",
+      class: "combo-box",
+      value: this.filterDensityValue,
+      disabled: !this.densities,
+      model: this.densitiesComboBoxModel,
+      onInput: d(this, S, "f")
+    })), t("div", {
+      // layer
+      class: "field field-block"
+    }, t("label", {
+      class: "label",
+      htmlFor: "filter-layer"
+    }, d(this, u, "f").filter.layer), t("ch-combo-box-render", {
+      id: "filter-layer",
+      class: "combo-box",
+      value: this.filterLayerValue,
+      disabled: !this.layers,
+      model: this.layersComboBoxModel,
+      onInput: d(this, F, "f")
+    })), t("div", {
+      // search contents
+      class: "field field-block search-by-contents"
+    }, t("label", {
+      class: "label",
+      htmlFor: "search-input"
+    }, d(this, u, "f").filter.search), t("ch-edit", {
+      id: "search-input",
+      debounce: l.inputDebounce,
+      class: "input",
+      value: this.filterSearchContentsValue,
+      placeholder: d(this, u, "f").filter.searchContentsPlaceholder,
+      onInput: d(this, M, "f"),
+      startImgSrc: ae,
+      type: "search"
+    })), t("button", {
+      // reset filter button
+      class: "button-secondary button-icon-and-text button-reset",
+      onClick: d(this, K, "f")
+    }, t("ch-image", {
+      class: "icon-sm",
+      src: se,
+      type: "mask"
+    }), d(this, u, "f").filter.resetFilters)))) ]));
+    X.set(this, (() => t("div", {
+      class: "sidebar-container scrollable"
+    }, d(this, Y, "f").call(this))));
+    Y.set(this, (() => 
+    /* tiles */ t("div", {
+      class: "main__images-container spacing-body-inline"
+    }, this.imagesSelectedItems.map((e => t("figure", {
+      class: "figure"
+    }, t("picture", {
+      class: "figure__picture"
+    }, t("img", {
+      class: "figure__img",
+      src: e.url,
+      alt: e.name
+    })), t("figcaption", {
+      class: "figure__figcaption"
+    }, e.name)))))));
+    J.set(this, (() => {
+      const e = "minmax(max-content, auto)";
+      return t("div", {
+        class: {
+          "field-group": true,
+          main__grid: true
+        }
+      }, t("ch-tabular-grid", {
+        ref: e => c(this, y, e, "f"),
+        rowSelectionMode: "multiple",
+        class: "tabular-grid tabular-grid-ww-images",
+        columnResizeMode: "splitter"
+      }, t("ch-tabular-grid-columnset", {
+        class: "tabular-grid-column-set"
+      }, t("ch-tabular-grid-column", {
+        columnId: "icon",
+        columnName: "",
+        settingable: false,
+        size: l.tabularGrid.colSize.maxContent,
+        class: "tabular-grid-column",
+        resizable: true,
+        sortable: false
+      }), t("ch-tabular-grid-column", {
+        columnId: "name",
+        columnName: d(this, u, "f").tableHead.name,
+        settingable: false,
+        class: "tabular-grid-column",
+        "column-name-position": "text",
+        size: e,
+        resizable: true,
+        sortable: true,
+        onColumnSortChanged: d(this, H, "f")
+      }), t("ch-tabular-grid-column", {
+        columnId: "module",
+        columnName: d(this, u, "f").tableHead.module,
+        settingable: false,
+        size: e,
+        class: "tabular-grid-column",
+        resizable: true,
+        sortable: true,
+        onColumnSortChanged: d(this, H, "f")
+      }), t("ch-tabular-grid-column", {
+        columnId: "description",
+        columnName: d(this, u, "f").tableHead.description,
+        settingable: false,
+        size: "minmax(300px, 1fr)",
+        class: "tabular-grid-column",
+        resizable: false,
+        sortable: false
+      }), t("ch-tabular-grid-column", {
+        columnId: "modifiedDate",
+        columnName: d(this, u, "f").tableHead.modifiedDate,
+        settingable: false,
+        size: e,
+        class: "tabular-grid-column",
+        resizable: true,
+        sortable: true,
+        onColumnSortChanged: d(this, H, "f")
+      }), t("ch-tabular-grid-column", {
+        columnId: "lastUser",
+        columnName: d(this, u, "f").tableHead.lastUser,
+        settingable: false,
+        size: e,
+        class: "tabular-grid-column",
+        resizable: true,
+        sortable: true,
+        onColumnSortChanged: d(this, H, "f")
+      }), t("ch-tabular-grid-column", {
+        columnId: "importDate",
+        columnName: d(this, u, "f").tableHead.importDate,
+        settingable: false,
+        size: e,
+        class: "tabular-grid-column",
+        resizable: true,
+        sortable: true,
+        onColumnSortChanged: d(this, H, "f")
+      })), this.tabularGridData.length ? t("ch-tabular-grid-rowset", {
+        class: "tabular-grid-rowset"
+      }, [ ...this.tabularGridData ].sort(d(this, $, "f")).map((e => t("ch-tabular-grid-row", {
+        rowid: e.id,
+        class: "tabular-grid-row"
+      }, t("ch-tabular-grid-cell", {
+        class: "tabular-grid-cell"
+      }, t("ch-image", {
+        src: e.icon
+      })), t("ch-tabular-grid-cell", {
+        class: "tabular-grid-cell"
+      }, e.name), t("ch-tabular-grid-cell", {
+        class: "tabular-grid-cell"
+      }, e.module), t("ch-tabular-grid-cell", {
+        class: "tabular-grid-cell tabular-grid-cell-description"
+      }, e.description), t("ch-tabular-grid-cell", {
+        class: "tabular-grid-cell"
+      }, r(e.modifiedDate)), t("ch-tabular-grid-cell", {
+        class: "tabular-grid-cell"
+      }, e.lastUser), t("ch-tabular-grid-cell", {
+        class: "tabular-grid-cell"
+      }, r(e.importDate)))))) : t("ch-tabular-grid-rowset", {
+        class: "tabular-grid-rowset"
+      }, t("ch-tabular-grid-rowset-empty", null, t("gx-ide-empty-state", {
+        isAnimated: false,
+        stateIconSrc: ne,
+        stateTitle: d(this, u, "f").emptyState.title,
+        key: "no-images-empty-state"
+      })))));
+    }));
+    K.set(this, (() => {
+      if (d(this, m, "f")) {
+        this.filterNameValue = d(this, m, "f").name;
+        this.filterModuleValue = d(this, m, "f").module;
+        this.filterSearchContentsValue = d(this, m, "f").searchContents;
+        this.filterCategoryValue = d(this, m, "f").category;
+        this.filterAllDescendantsValue = d(this, m, "f").allDescendants === ee;
+        this.filterAfterTypeValue = d(this, m, "f").modifiedAfter;
+        this.filterModifiedDateValue = d(this, m, "f").modifiedDateTime;
+        this.filterUserValue = d(this, m, "f").modifiedUser;
+        this.filterStyleValue = d(this, m, "f").style;
+        this.filterLanguageValue = d(this, m, "f").language;
+        this.filterDensityValue = d(this, m, "f").density;
+        this.filterLayerValue = d(this, m, "f").layer;
+        this.afterCurrentValue = this.filterAfterTypeValue;
+      }
+    }));
+    O.set(this, (() => {
+      c(this, m, {
+        name: this.filterNameValue,
+        module: this.filterModuleValue,
+        searchContents: this.filterSearchContentsValue,
+        category: this.filterCategoryValue,
+        allDescendants: this.filterAllDescendantsValue ? ee : "",
+        modifiedAfter: this.filterAfterTypeValue,
+        modifiedDateTime: this.filterModifiedDateValue,
+        modifiedUser: this.filterUserValue,
+        style: this.filterStyleValue,
+        language: this.filterLanguageValue,
+        density: this.filterDensityValue,
+        layer: this.filterLayerValue
+      }, "f");
+    }));
+    Q.set(this, (() => {
+      d(this, y, "f").selectAllRows();
+    }));
+    this.categoriesComboBoxModel = [];
+    this.densitiesComboBoxModel = [];
+    this.languagesComboBoxModel = [];
+    this.layersComboBoxModel = [];
+    this.stylesComboBoxModel = [];
+    this.afterCurrentValue = undefined;
+    this.filterAfterOptions = undefined;
+    this.tabularGridData = [];
+    this.images = [];
+    this.imagesSelectedItems = [];
+    this.selectedObjectsIds = [];
+    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.contextMenuCallback = undefined;
+    this.defaultCategory = undefined;
+    this.defaultModule = undefined;
+    this.deleteSelectionCallback = undefined;
+    this.densities = undefined;
+    this.languages = undefined;
+    this.layers = undefined;
+    this.loadCallback = undefined;
+    this.loadImageItemsCallback = undefined;
+    this.newObjectCallback = undefined;
+    this.openSelectionCallback = undefined;
+    this.selectModuleCallback = undefined;
+    this.selectionObjectChangedCallback = undefined;
+    this.styles = undefined;
+  }
+  categoriesChanged(e) {
+    this.categoriesComboBoxModel = mapOptionsToComboBoxItemModel(e);
+    d(this, _, "f").call(this);
+  }
+  defaultCategoryChanged() {
+    d(this, _, "f").call(this);
+  }
+  densitiesChanged(e) {
+    this.densitiesComboBoxModel = mapOptionsToComboBoxItemModel(e);
+  }
+  languagesChanged(e) {
+    this.languagesComboBoxModel = mapOptionsToComboBoxItemModel(e);
+  }
+  layersChanged(e) {
+    this.layersComboBoxModel = mapOptionsToComboBoxItemModel(e);
+  }
+  stylesChanged(e) {
+    this.stylesComboBoxModel = mapOptionsToComboBoxItemModel(e);
+  }
+  async connectedCallback() {
+    ie = d(this, E, "f").call(this);
+  }
+  componentDidLoad() {
+    d(this, U, "f").call(this);
+    d(this, L, "f").call(this);
+    d(this, O, "f").call(this);
+    c(this, v, false, "f");
+  }
+  async componentWillLoad() {
+    c(this, u, await o.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: d(this, u, "f").filter.afterNone,
+      value: n.NONE
+    }, {
+      caption: d(this, u, "f").filter[n.DATE_TIME],
+      value: n.DATE_TIME
+    }, {
+      caption: d(this, u, "f").filter[n.IMPORT],
+      value: n.IMPORT
+    }, {
+      caption: d(this, u, "f").filter[n.LAST_BUILD],
+      value: n.LAST_BUILD
+    } ];
+    this.afterCurrentValue = this.filterAfterOptions[0].value;
+    this.filterAfterTypeValue = this.filterAfterOptions[0].value;
+    // Initialize filter state values
+        d(this, _, "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;
+    }
+    c(this, g, [ {
+      id: d(this, b, "f"),
+      caption: d(this, u, "f").filter.accordionCaption,
+      expanded: false
+    } ], "f");
+  }
+  keyDownHandler(e) {
+    if (document.activeElement === this.el) {
+      switch (e.key) {
+       case "Enter":
+        d(this, B, "f").call(this);
+        break;
+
+       case "Delete":
+        d(this, k, "f").call(this);
+        break;
+      }
+    }
+  }
+  /**
+     * Reloads the view, refreshing the filters and the images table.
+     */  async reload() {
+    d(this, L, "f").call(this);
+  }
+  /**
+     * Watch filter state variables and trigger #getImages when they change
+     */  filterNameValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterSearchContentsValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterCategoryValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterAllDescendantsValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterAfterTypeValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterUserValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterModifiedDateValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterStyleValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterLanguageValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterDensityValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterLayerValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  filterModuleValueChanged() {
+    if (!d(this, v, "f")) {
+      d(this, L, "f").call(this);
+    }
+  }
+  render() {
+    return t(i, {
+      class: "widget"
+    }, t("ch-theme", {
+      model: Z
+    }), t("section", {
+      class: "section"
+    }, t("header", {
+      class: "header control-header-with-border spacing-body-inline spacing-body-block-start field-group"
+    }, d(this, R, "f").call(this)), t("div", {
+      class: "main"
+    }, d(this, J, "f").call(this), t("div", {
+      class: "main__aside field-group"
+    }, d(this, X, "f").call(this))), t("footer", {
+      class: "dialog-footer-with-border dialog-footer-space-between spacing-body"
+    }, t("p", {
+      // matching objects
+      class: "text-body"
+    }, `${this.tabularGridData.length} ${d(this, u, "f").objCount.matching}`), t("div", {
+      class: "buttons-spacer"
+    }, t("button", {
+      // select all button
+      id: "button-select-all",
+      class: "button-secondary",
+      onClick: d(this, Q, "f")
+    }, d(this, u, "f").footer.btnSelectAll), t("button", {
+      // new image button
+      id: "button-new-file",
+      class: "button-primary button-icon-and-text",
+      onClick: d(this, q, "f")
+    }, d(this, u, "f").footer.btnNew)))));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/ww-images" ];
+  }
+  get el() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      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" ]
+    };
+  }
+};
+
+u = new WeakMap, m = new WeakMap, g = new WeakMap, b = new WeakMap, p = new WeakMap, 
+y = new WeakMap, w = new WeakMap, v = new WeakMap, k = new WeakMap, C = new WeakMap, 
+x = new WeakMap, M = new WeakMap, _ = new WeakMap, W = new WeakMap, V = new WeakMap, 
+z = new WeakMap, I = new WeakMap, D = new WeakMap, T = new WeakMap, j = new WeakMap, 
+S = new WeakMap, F = new WeakMap, N = new WeakMap, A = new WeakMap, L = new WeakMap, 
+E = new WeakMap, U = new WeakMap, $ = new WeakMap, H = new WeakMap, q = new WeakMap, 
+B = new WeakMap, G = new WeakMap, R = new WeakMap, X = new WeakMap, Y = new WeakMap, 
+J = new WeakMap, K = new WeakMap, O = new WeakMap, Q = new WeakMap, f = new WeakSet, 
+P = function _GxIdeWWImages_getImageValue(e, t) {
+  var i;
+  switch (t) {
+   case "name":
+    return e.name || "";
+
+   case "module":
+    return e.module || "";
+
+   case "description":
+    return e.description || "";
+
+   case "modifiedDate":
+    return e.modifiedDate ? r(e.modifiedDate).toLowerCase() : "";
+
+   case "lastUser":
+    return ((i = e.lastUser) === null || i === void 0 ? void 0 : i.toLowerCase()) || "";
+
+   case "importDate":
+    return e.importDate ? r(e.importDate).toLowerCase() : "";
+
+   default:
+    return "";
+  }
+};
+
+le.style = h;
+
+export { le as gx_ide_ww_images };
+//# sourceMappingURL=p-520c3763.entry.js.map