@genexus/genexus-ide-ui 1.0.17 → 1.0.19

package/dist/genexus-ide-ui/p-62efd8f2.entry.js

@@ -0,0 +1,712 @@
+import { r as i, c as e, h as t, H as s, g as a } from "./p-aaed592c.js";
+
+import { g as n } from "./p-0b0ce806.js";
+
+import { F as l } from "./p-13feb5cf.js";
+
+import { c as r } from "./p-78b90603.js";
+
+import { h as o, f as d } from "./p-066028bc.js";
+
+import { L as h } from "./p-74d59062.js";
+
+const mapOptionsToComboBoxItemModel = i => i.map((i => {
+  var e;
+  return {
+    value: i.id,
+    caption: i.label,
+    startImgSrc: (e = i.iconName) !== null && e !== void 0 ? e : ""
+  };
+}));
+
+const c = "/*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 f = undefined && undefined.__classPrivateFieldGet || function(i, e, t, s) {
+  if (t === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? i !== e || !s : !e.has(i)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return t === "m" ? s : t === "a" ? s.call(i) : s ? s.value : e.get(i);
+};
+
+var u = undefined && undefined.__classPrivateFieldSet || function(i, e, t, 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 e === "function" ? i !== e || !a : !e.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return s === "a" ? a.call(i, t) : a ? a.value = t : e.set(i, t), t;
+};
+
+var m, g, p, b, v, w, y, k, _, x, M, W, C, z, F, I, D, N, T, j, H, E, A, $, B, L, P, R, S, V, q, G, U, X, Y;
+
+const J = [ "resets/box-sizing", "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 K = null;
+
+// icons
+const O = n({
+  category: "gemini-tools",
+  name: "reset",
+  colorType: "neutral"
+});
+
+const Q = n({
+  category: "gemini-tools",
+  name: "search",
+  colorType: "neutral"
+});
+
+const Z = n({
+  category: "window-tools",
+  name: "filter",
+  colorType: "primary"
+});
+
+const ii = [ {
+  id: "modified",
+  caption: "Modified",
+  expanded: false
+} ];
+
+const ei = class {
+  constructor(s) {
+    i(this, s);
+    this.componentDidLoadEvent = e(this, "componentDidLoadEvent", 7);
+    this.componentDidRenderFirstTime = e(this, "componentDidRenderFirstTime", 7);
+    /**
+         * The component hard-coded strings translations.
+         */    m.set(this, void 0);
+    g.set(this, void 0);
+    p.set(this, false);
+    b.set(this, new Map);
+    v.set(this, void 0);
+    w.set(this, void 0);
+    y.set(this, void 0);
+    k.set(this, void 0);
+    _.set(this, void 0);
+    x.set(this, void 0);
+    M.set(this, void 0);
+    W.set(this, void 0);
+    C.set(this, void 0);
+    z.set(this, void 0);
+    F.set(this, void 0);
+    I.set(this, void 0);
+    D.set(this, void 0);
+    N.set(this, (() => {
+      this.deleteSelectionCallback(this.selectedObjectsIds);
+    }));
+    T.set(this, (() => {
+      f(this, v, "f").selectAllRows(false);
+    }));
+    j.set(this, (i => {
+      this.afterCurrentValue = i.detail;
+      f(this, $, "f").call(this);
+    }));
+    H.set(this, (() => {
+      const i = this.filterImagesInputValue.toLocaleLowerCase();
+      this.filteredImages = this.images.filter((e => {
+        var t, s, a;
+        const n = e.name.toLocaleLowerCase().includes(i);
+        const l = e.module.toLocaleLowerCase().includes(i);
+        const r = e.description.toLocaleLowerCase().includes(i);
+        const o = (t = e.modifiedDate) === null || t === void 0 ? void 0 : t.toString().includes(i);
+        const d = (s = e.lastUser) === null || s === void 0 ? void 0 : s.toLocaleLowerCase().includes(i);
+        const h = (a = e.importDate) === null || a === void 0 ? void 0 : a.toString().includes(i);
+        return n || l || r || o || d || h;
+      }));
+    }));
+    E.set(this, (i => {
+      this.filterImagesInputValue = i.detail.toLowerCase();
+      f(this, H, "f").call(this);
+    }));
+    A.set(this, (() => {
+      this.toggleFilterButtonActive = !this.toggleFilterButtonActive;
+    }));
+    $.set(this, (() => {
+      var i;
+      f(this, b, "f").clear();
+      const e = {
+        name: f(this, z, "f").value,
+        searchContents: f(this, F, "f").value,
+        category: f(this, k, "f").value,
+        parent: f(this, C, "f").value ? f(this, C, "f").value.id : null,
+        allDescendants: !!f(this, y, "f").value,
+        modifiedAfter: f(this, w, "f").value,
+        modifiedBy: f(this, D, "f").value,
+        modifiedDate: new Date(f(this, W, "f").value),
+        style: f(this, I, "f").value,
+        language: f(this, x, "f").value,
+        density: f(this, _, "f").value,
+        layer: (i = f(this, M, "f")) === null || i === void 0 ? void 0 : i.value
+      };
+      this.loadCallback(e).then((i => {
+        this.images = i;
+        this.selectedObjectsIds = [];
+        f(this, T, "f").call(this);
+        f(this, H, "f").call(this);
+      }));
+    }));
+    B.set(this, (() => {
+      const i = new Date;
+      const e = i.toISOString().split("T")[0];
+      const t = i.toISOString().split("T")[1].slice(0, 5);
+ // Only take 'HH:MM' part
+            return `${e}T${t}`;
+    }));
+    L.set(this, (() => {
+      /* module/folder */
+      f(this, C, "f").addEventListener("valueChanged", (() => {
+        f(this, $, "f").call(this);
+      }));
+      // for grid selection
+            f(this, v, "f").addEventListener("selectionChanged", (i => {
+        const e = i.detail.rowsId[0];
+        if (f(this, b, "f").has(e)) {
+          this.imagesSelectedItems = f(this, b, "f").get(e);
+        } else {
+          this.loadImageItemsCallback(e).then((i => {
+            f(this, b, "f").set(e, i);
+            this.imagesSelectedItems = i;
+          }));
+        }
+      }));
+      f(this, v, "f").addEventListener("rowDoubleClicked", (() => {
+        f(this, R, "f").call(this);
+      }));
+      f(this, v, "f").addEventListener("selectionChanged", (i => {
+        this.selectedObjectsIds = i.detail.rowsId;
+        this.selectionObjectChangedCallback(this.selectedObjectsIds);
+      }));
+      f(this, v, "f").addEventListener("rowContextMenu", (i => {
+        i.preventDefault();
+        i.stopPropagation();
+        this.contextMenuCallback({
+          selection: i.detail.selectedRowsId,
+          clientX: i.detail.clientX,
+          clientY: i.detail.clientY
+        });
+      }));
+    }));
+    P.set(this, (() => {
+      this.newObjectCallback();
+    }));
+    R.set(this, (() => {
+      this.openSelectionCallback(this.selectedObjectsIds);
+    }));
+    // #removeDetectClickOutsideFilter = () => {
+    //   document.removeEventListener("click", this.#detectClickOutsideFilter);
+    // };
+        S.set(this, (() => [ t("div", {
+      // name
+      class: "field field-block name"
+    }, t("label", {
+      class: "label",
+      htmlFor: "filter-name"
+    }, f(this, m, "f").filter.name), t("ch-edit", {
+      id: "filter-name",
+      class: "input name",
+      ref: i => u(this, z, i, "f"),
+      debounce: r.inputDebounce,
+      onInput: f(this, $, "f"),
+      part: "filter-name"
+    })), t("div", {
+      class: "field field-block module-folder"
+    }, t("label", {
+      class: "label",
+      htmlFor: "module-folder"
+    }, f(this, m, "f").filter.moduleFolder), t("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: i => u(this, C, i, "f")
+    })), t("button", {
+      // toggle / untoggle filter button
+      class: "button-secondary button-icon-and-text",
+      onClick: f(this, A, "f")
+    }, t("ch-image", {
+      class: "icon-md",
+      src: Z
+    }), this.filterSidebarExpanded ? f(this, m, "f").filter.less : f(this, m, "f").filter.more) ]));
+    V.set(this, (() => {
+      var i, e, s, a, n;
+      return t("div", {
+        class: "sidebar-container scrollable"
+      }, t("ch-sidebar", {
+        class: "sidebar sidebar-collapsed-hidden sidebar-with-motion sidebar-filter",
+        expanded: this.filterSidebarExpanded
+      }, t("div", {
+        class: "main__filter field-group spacing-body-inline spacing-body-block scrollable"
+      }, t("ch-checkbox", {
+        class: "checkbox all-descendants",
+        caption: f(this, m, "f").filter.allDescendants,
+        checkedValue: "filterAllDescendants",
+        ref: i => u(this, y, i, "f"),
+        onInput: f(this, $, "f"),
+        part: "filter-all-descendants"
+      }), t("ch-accordion-render", {
+        // modified
+        class: "accordion-outlined modified-accordion",
+        model: ii
+      }, t("div", {
+        slot: "modified",
+        class: "spacing-body"
+      }, t("div", {
+        class: "field-group field-group-modified"
+      }, t("div", {
+        // after
+        class: "field field-block after-date-time"
+      }, t("label", {
+        class: "label",
+        htmlFor: "filter-after-type"
+      }, f(this, m, "f").filter.afterLabel), t("ch-combo-box-render", {
+        id: "filter-after-type",
+        class: "combo-box",
+        value: (i = this.filterAfterOptions[0]) === null || i === void 0 ? void 0 : i.value,
+        ref: i => u(this, w, i, "f"),
+        model: this.filterAfterOptions,
+        part: "filter-after-type",
+        onInput: f(this, j, "f")
+      })), t("div", {
+        // date/time
+        class: "field field-block date-time"
+      }, t("label", {
+        class: {
+          label: true,
+          "label--disabled": this.afterCurrentValue !== l.DATE_TIME
+        },
+        htmlFor: "modified-date"
+      }, f(this, m, "f").filter.dateTime), t("input", {
+        type: "datetime-local",
+        class: "input ",
+        id: "modified-date",
+        name: "modifiedDate",
+        part: "modified-date",
+        max: K,
+        ref: i => u(this, W, i, "f"),
+        disabled: this.afterCurrentValue !== l.DATE_TIME,
+        onInput: f(this, $, "f")
+      })), t("div", {
+        // user
+        class: "field field-block user"
+      }, t("label", {
+        class: "label",
+        htmlFor: "filter-user"
+      }, f(this, m, "f").filter.user), t("ch-edit", {
+        id: "filter-user",
+        value: "hey",
+        class: "input",
+        ref: i => u(this, D, i, "f"),
+        debounce: r.inputDebounce,
+        onInput: f(this, $, "f"),
+        part: "filter-user"
+      }))))), t("div", {
+        // category
+        class: "field field-block category"
+      }, t("label", {
+        class: "label",
+        htmlFor: "filter-category"
+      }, f(this, m, "f").filter.category), t("ch-combo-box-render", {
+        id: "filter-category",
+        class: "combo-box",
+        value: this.defaultCategory,
+        disabled: !this.categories,
+        ref: i => u(this, k, i, "f"),
+        model: this.categoriesComboBoxModel,
+        part: "filter-category",
+        onInput: f(this, $, "f")
+      })), t("div", {
+        // style
+        class: "field field-block style"
+      }, t("label", {
+        class: "label",
+        htmlFor: "filter-style"
+      }, f(this, m, "f").filter.style), t("ch-combo-box-render", {
+        id: "filter-style",
+        class: "combo-box",
+        value: (e = this.stylesComboBoxModel[0]) === null || e === void 0 ? void 0 : e.value,
+        disabled: !this.styles,
+        ref: i => u(this, I, i, "f"),
+        model: this.stylesComboBoxModel,
+        part: "filter-style",
+        onInput: f(this, $, "f")
+      })), t("div", {
+        // language
+        class: "field field-block language"
+      }, t("label", {
+        class: "label",
+        htmlFor: "filter-language"
+      }, f(this, m, "f").filter.language), t("ch-combo-box-render", {
+        id: "filter-language",
+        class: "combo-box",
+        value: (s = this.languagesComboBoxModel[0]) === null || s === void 0 ? void 0 : s.value,
+        disabled: !this.languages,
+        ref: i => u(this, x, i, "f"),
+        model: this.languagesComboBoxModel,
+        part: "filter-language",
+        onInput: f(this, $, "f")
+      })), t("div", {
+        // density
+        class: "field field-block"
+      }, t("label", {
+        class: "label",
+        htmlFor: "filter-density"
+      }, f(this, m, "f").filter.density), t("ch-combo-box-render", {
+        id: "filter-density",
+        class: "combo-box",
+        value: (a = this.densitiesComboBoxModel[0]) === null || a === void 0 ? void 0 : a.value,
+        disabled: !this.densities,
+        ref: i => u(this, _, i, "f"),
+        model: this.densitiesComboBoxModel,
+        part: "filter-density",
+        onInput: f(this, $, "f")
+      })), t("div", {
+        // layer
+        class: "field field-block"
+      }, t("label", {
+        class: "label",
+        htmlFor: "filter-layer"
+      }, f(this, m, "f").filter.layer), t("ch-combo-box-render", {
+        id: "filter-layer",
+        class: "combo-box",
+        value: (n = this.layersComboBoxModel[0]) === null || n === void 0 ? void 0 : n.value,
+        disabled: !this.layers,
+        ref: i => u(this, M, i, "f"),
+        model: this.layersComboBoxModel,
+        part: "filter-layer",
+        onInput: f(this, $, "f")
+      })))), f(this, q, "f").call(this));
+    }));
+    q.set(this, (() => 
+    /* tiles */ t("div", {
+      class: "main__images-container spacing-body-inline"
+    }, this.imagesSelectedItems.map((i => t("figure", {
+      class: "figure"
+    }, t("picture", {
+      class: "figure__picture"
+    }, t("img", {
+      class: "figure__img",
+      src: i.url,
+      alt: i.name
+    })), t("figcaption", {
+      class: "figure__figcaption"
+    }, i.name)))))));
+    G.set(this, (() => t("div", {
+      class: {
+        "field-group": true,
+        main__grid: true,
+        "main__grid--with-filter": this.secondaryFilter
+      }
+    }, this.secondaryFilter ? t("header", {
+      class: "images-information__header spacing-body-inline-start",
+      slot: "header"
+    }, t("div", {
+      // search contents
+      class: "field field-inline"
+    }, t("label", {
+      class: "label",
+      htmlFor: "search-input"
+    }, f(this, m, "f").filter.search), t("ch-edit", {
+      id: "search-input",
+      class: "input name",
+      placeholder: f(this, m, "f").filter.searchByContentPlaceholder,
+      ref: i => u(this, F, i, "f"),
+      onInput: f(this, E, "f"),
+      startImgSrc: Q,
+      part: "search-input"
+    }))) : null, t("ch-tabular-grid", {
+      ref: i => u(this, v, i, "f"),
+      part: "ch-grid-images",
+      rowSelectionMode: "multiple",
+      class: "tabular-grid tabular-grid-ww-images"
+    }, t("ch-tabular-grid-columnset", {
+      class: "tabular-grid-column-set"
+    }, t("ch-tabular-grid-column", {
+      columnName: "",
+      columnNameHidden: false,
+      settingable: false,
+      size: r.tabularGrid.colSize.maxContent,
+      class: "tabular-grid-column"
+    }), t("ch-tabular-grid-column", {
+      columnName: f(this, m, "f").tableHead.name,
+      columnNameHidden: false,
+      settingable: false,
+      class: "tabular-grid-column",
+      size: r.tabularGrid.colSize.common
+    }), t("ch-tabular-grid-column", {
+      columnName: f(this, m, "f").tableHead.module,
+      columnNameHidden: false,
+      settingable: false,
+      size: r.tabularGrid.colSize.common,
+      class: "tabular-grid-column"
+    }), t("ch-tabular-grid-column", {
+      columnName: f(this, m, "f").tableHead.description,
+      columnNameHidden: false,
+      settingable: false,
+      size: r.tabularGrid.colSize.commonDouble,
+      class: "tabular-grid-column"
+    }), t("ch-tabular-grid-column", {
+      columnName: f(this, m, "f").tableHead.modifiedDate,
+      columnNameHidden: false,
+      settingable: false,
+      size: r.tabularGrid.colSize.maxContent,
+      class: "tabular-grid-column"
+    }), t("ch-tabular-grid-column", {
+      columnName: f(this, m, "f").tableHead.lastUser,
+      columnNameHidden: false,
+      settingable: false,
+      size: r.tabularGrid.colSize.maxContent,
+      class: "tabular-grid-column"
+    }), t("ch-tabular-grid-column", {
+      columnName: f(this, m, "f").tableHead.importDate,
+      columnNameHidden: false,
+      settingable: false,
+      size: r.tabularGrid.colSize.maxContent,
+      class: "tabular-grid-column"
+    })), this.filteredImages.length ? t("ch-tabular-grid-rowset", {
+      class: "tabular-grid-rowset"
+    }, this.filteredImages.map((i => t("ch-tabular-grid-row", {
+      rowid: i.id,
+      class: "tabular-grid-row"
+    }, t("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, t("ch-image", {
+      src: i.icon
+    })), t("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, o(i.name.toLowerCase(), this.filterImagesInputValue)), t("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, o(i.module.toLowerCase(), this.filterImagesInputValue)), t("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, o(i.description.toLowerCase(), this.filterImagesInputValue)), t("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, o(`${d(i.modifiedDate)}`, this.filterImagesInputValue)), t("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, o(i.lastUser.toLowerCase(), this.filterImagesInputValue)), t("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, o(`${d(i.importDate)}`, this.filterImagesInputValue)))))) : null))));
+    U.set(this, (() => {
+      if (f(this, g, "f")) {
+        f(this, z, "f").value = f(this, g, "f").name;
+        f(this, C, "f").value = f(this, g, "f").module;
+        f(this, F, "f").value = f(this, g, "f").searchContents;
+        f(this, k, "f").value = f(this, g, "f").category;
+        f(this, y, "f").value = f(this, g, "f").allDescendants;
+        f(this, w, "f").value = f(this, g, "f").modifiedAfter;
+        f(this, W, "f").value = f(this, g, "f").modifiedDateTime;
+        f(this, D, "f").value = f(this, g, "f").modifiedUser;
+        f(this, I, "f").value = f(this, g, "f").style;
+        f(this, x, "f").value = f(this, g, "f").language;
+        f(this, _, "f").value = f(this, g, "f").density;
+        f(this, M, "f").value = f(this, g, "f").layer;
+        f(this, $, "f").call(this);
+        this.afterCurrentValue = f(this, k, "f").value;
+ // this value has to be evaluated on a re-render
+            }
+    }));
+    X.set(this, (() => {
+      var i, e, t;
+      u(this, g, {
+        name: f(this, z, "f").value,
+        module: f(this, C, "f").value,
+        searchContents: f(this, F, "f").value,
+        category: f(this, k, "f").value,
+        allDescendants: f(this, y, "f").value,
+        modifiedAfter: (i = f(this, w, "f")) === null || i === void 0 ? void 0 : i.value,
+        modifiedDateTime: (e = f(this, W, "f")) === null || e === void 0 ? void 0 : e.value,
+        modifiedUser: (t = f(this, D, "f")) === null || t === void 0 ? void 0 : t.value,
+        style: f(this, I, "f").value,
+        language: f(this, x, "f").value,
+        density: f(this, _, "f").value,
+        layer: f(this, M, "f").value
+      }, "f");
+    }));
+    Y.set(this, (() => {
+      f(this, v, "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.filteredImages = [];
+    this.images = [];
+    this.imagesSelectedItems = [];
+    this.selectedObjectsIds = [];
+    this.toggleFilterButtonActive = false;
+    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.secondaryFilter = false;
+    this.shadow = false;
+    this.styles = undefined;
+    this.types = undefined;
+  }
+  toggleFilterButtonActiveChanged(i) {
+    this.filterSidebarExpanded = i;
+  }
+  categoriesChanged(i) {
+    this.categoriesComboBoxModel = mapOptionsToComboBoxItemModel(i);
+  }
+  densitiesChanged(i) {
+    this.densitiesComboBoxModel = mapOptionsToComboBoxItemModel(i);
+  }
+  languagesChanged(i) {
+    this.languagesComboBoxModel = mapOptionsToComboBoxItemModel(i);
+  }
+  layersChanged(i) {
+    this.layersComboBoxModel = mapOptionsToComboBoxItemModel(i);
+  }
+  stylesChanged(i) {
+    this.stylesComboBoxModel = mapOptionsToComboBoxItemModel(i);
+  }
+  async connectedCallback() {
+    K = f(this, B, "f").call(this);
+  }
+  componentDidLoad() {
+    f(this, L, "f").call(this);
+    f(this, $, "f").call(this);
+    f(this, X, "f").call(this);
+    f(this, z, "f").focus();
+  }
+  componentDidRender() {
+    if (!f(this, p, "f")) {
+      this.componentDidRenderFirstTime.emit(f(this, m, "f").componentName);
+      u(this, p, true, "f");
+    }
+  }
+  async componentWillLoad() {
+    u(this, m, await h.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: f(this, m, "f").filter.afterNone,
+      value: l.NONE
+    }, {
+      caption: f(this, m, "f").filter[l.DATE_TIME],
+      value: l.DATE_TIME
+    }, {
+      caption: f(this, m, "f").filter[l.IMPORT],
+      value: l.IMPORT
+    }, {
+      caption: f(this, m, "f").filter[l.LAST_BUILD],
+      value: l.LAST_BUILD
+    } ];
+    this.afterCurrentValue = this.filterAfterOptions[0].value;
+  }
+  keyDownHandler(i) {
+    if (document.activeElement === this.el) {
+      switch (i.key) {
+       case "Enter":
+        f(this, R, "f").call(this);
+        break;
+
+       case "Delete":
+        f(this, N, "f").call(this);
+        break;
+      }
+    }
+  }
+  /**
+     * Reloads the view, refreshing the filters and the images table.
+     */  async reload() {
+    f(this, N, "f").call(this);
+    f(this, $, "f").call(this);
+  }
+  render() {
+    return t(s, {
+      class: "widget"
+    }, t("ch-theme", {
+      model: J
+    }), t("section", {
+      class: "section"
+    }, t("header", {
+      class: "header control-header-with-border spacing-body-inline spacing-body-block-start field-group"
+    }, f(this, S, "f").call(this)), t("div", {
+      class: "main"
+    }, f(this, G, "f").call(this), t("div", {
+      class: "main__aside field-group"
+    }, t("div", {
+      class: "spacing-body-inline"
+    }, t("button", {
+      // reset filter button
+      class: "button-secondary button-icon-and-text button-reset",
+      onClick: f(this, U, "f")
+    }, t("ch-image", {
+      class: "icon-sm",
+      src: O
+    }), "Reset")), f(this, V, "f").call(this))), t("footer", {
+      class: "control-footer-with-border control-footer-space-between spacing-body"
+    }, t("p", {
+      // matching objects
+      class: "text-body",
+      part: "objects-matching"
+    }, `${this.filteredImages.length} ${f(this, m, "f").objCount.matching}`), t("div", {
+      class: "buttons-spacer"
+    }, t("button", {
+      // select all button
+      id: "button-select-all",
+      class: "button-secondary",
+      onClick: f(this, Y, "f"),
+      part: "button button--select-all"
+    }, f(this, m, "f").footer.btnSelectAll), t("button", {
+      // new image button
+      id: "button-new-file",
+      class: "button-primary button-icon-and-text",
+      onClick: f(this, P, "f"),
+      part: "button button--new-file"
+    }, f(this, m, "f").footer.btnNew)))));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/ww-images" ];
+  }
+  get el() {
+    return a(this);
+  }
+  static get watchers() {
+    return {
+      toggleFilterButtonActive: [ "toggleFilterButtonActiveChanged" ],
+      categories: [ "categoriesChanged" ],
+      densities: [ "densitiesChanged" ],
+      languages: [ "languagesChanged" ],
+      layers: [ "layersChanged" ],
+      styles: [ "stylesChanged" ]
+    };
+  }
+};
+
+m = new WeakMap, g = new WeakMap, p = new WeakMap, b = new WeakMap, v = new WeakMap, 
+w = new WeakMap, y = new WeakMap, k = new WeakMap, _ = new WeakMap, x = new WeakMap, 
+M = new WeakMap, W = new WeakMap, C = new WeakMap, z = new WeakMap, F = new WeakMap, 
+I = new WeakMap, D = new WeakMap, N = new WeakMap, T = new WeakMap, j = new WeakMap, 
+H = new WeakMap, E = new WeakMap, A = new WeakMap, $ = new WeakMap, B = new WeakMap, 
+L = new WeakMap, P = new WeakMap, R = new WeakMap, S = new WeakMap, V = new WeakMap, 
+q = new WeakMap, G = new WeakMap, U = new WeakMap, X = new WeakMap, Y = new WeakMap;
+
+ei.style = c;
+
+export { ei as gx_ide_ww_images };
+//# sourceMappingURL=p-62efd8f2.entry.js.map