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*/\nbutton.button-secondary {\n  border-color: var(--color-border-neutral-default);\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-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-572fdc25.entry.js.map