@genexus/genexus-ide-ui 0.0.41 → 0.0.42

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

@@ -0,0 +1,421 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { L as Locale } from './locale.js';
+import { r as renderFormItems } from './common.js';
+import { F as FILTER_AFTER } from './constants.js';
+import { d as defineCustomElement$q } from './ch-grid2.js';
+import { d as defineCustomElement$p } from './ch-grid-column2.js';
+import { d as defineCustomElement$o } from './ch-grid-column-resize2.js';
+import { d as defineCustomElement$n } from './ch-grid-column-settings2.js';
+import { d as defineCustomElement$m } from './ch-grid-columnset2.js';
+import { d as defineCustomElement$l } from './ch-grid-settings2.js';
+import { d as defineCustomElement$k } from './ch-grid-settings-columns2.js';
+import { d as defineCustomElement$j } from './icon.js';
+import { d as defineCustomElement$i } from './ch-window2.js';
+import { d as defineCustomElement$h } from './ch-window-close2.js';
+import { d as defineCustomElement$g } from './entity-selector.js';
+import { d as defineCustomElement$f } from './button.js';
+import { d as defineCustomElement$e } from './combo-box.js';
+import { d as defineCustomElement$d } from './combo-box-item.js';
+import { d as defineCustomElement$c } from './container2.js';
+import { d as defineCustomElement$b } from './date-picker.js';
+import { d as defineCustomElement$a } from './form-checkbox.js';
+import { d as defineCustomElement$9 } from './form-radio.js';
+import { d as defineCustomElement$8 } from './form-text.js';
+import { d as defineCustomElement$7 } from './gxg-grid2.js';
+import { d as defineCustomElement$6 } from './icon2.js';
+import { d as defineCustomElement$5 } from './gxg-label2.js';
+import { d as defineCustomElement$4 } from './text.js';
+import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const wwImagesCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-object-selector--shadow){border:none;box-shadow:var(--box-shadow-01)}.filter-grid{grid-template-columns:repeat(4, 1fr)}.filter-grid>:nth-child(3),.filter-grid>:nth-child(6){display:flex;flex-direction:row;align-items:flex-end}.filter-grid>:nth-child(4){grid-area:2/1/3/4}.filter-grid>:nth-child(5){grid-area:3/1/4/2}.filter-grid>:nth-child(6){grid-area:3/4/4/5}.filter-grid>:nth-child(7){grid-area:4/1/5/4}.filter-grid>:nth-child(8){grid-area:5/1/6/2}.filter-grid>:nth-child(9){grid-area:5/2/6/3}.filter-grid>:nth-child(10){grid-area:5/3/6/4}.filter-grid>:nth-child(11){grid-area:5/4/6/5}.flex{display:flex;flex-direction:row;align-items:center}.with-gap{gap:var(--gx-ide-grid-row-gap)}.hide{display:none !important}.images-grid{grid-template-columns:repeat(3, 1fr);grid-column-gap:0}.images-grid>:nth-child(1){grid-area:1/1/1/3}.images-data-flex{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--gx-ide-grid-row-gap);text-overflow:ellipsis;overflow:hidden}.images-data-flex .image-item{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:120px}.images-data-flex .image-item .img{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gxg-border-color--regular);padding:var(--gx-ide-grid-row-gap)}.images-data-flex .image-item .img img{max-width:100%;max-height:100%}.objects-count{grid-template-columns:repeat(2, 1fr)}.objects-count *:nth-child(2){justify-content:flex-end;align-items:flex-start}";
+
+const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
+    // 9.LOCAL METHODS //
+    // Renders
+    this.renderFilter = () => {
+      var _a, _b, _c, _d, _e;
+      return (h("gxg-container", { fieldset: true, displayBorder: true, containerTitle: this._componentLocale.filter.title, part: "filters-container" }, h("div", { class: "grid filter-grid" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.name, ref: (el) => (this.filterNameEl = el), part: "filter-name" }), h("gx-ide-entity-selector", { label: this._componentLocale.filter.moduleFolder, "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), part: "filter-module-folder" }), h("div", null, h("gxg-button", { id: "button-more-less", type: "primary-text-only", onClick: this.showMoreFilter, part: "gxg-button gxg-button--more-less" }, this.filterMore
+        ? this._componentLocale.filter.btnLess
+        : this._componentLocale.filter.btnMore)), h("gxg-form-text", { class: { hide: !this.filterMore }, "label-position": "above", label: this._componentLocale.filter.search, ref: (el) => (this.filterSearchContentsEl = el), part: "filter-search" }), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.category, value: this.defaultCategory, disabled: !this.categories, ref: (el) => (this.filterCategoryEl = el), part: "filter-category" }, renderFormItems("gxg-combo-box-item", (_a = this.categories) !== null && _a !== void 0 ? _a : [])), h("div", { class: { hide: !this.filterMore } }, h("gxg-form-checkbox", { label: this._componentLocale.filter.allDescendants, class: "align-center", ref: (el) => (this.filterAllDescendantsEl = el), part: "filter-all-descendants" })), h("div", { class: {
+          "flex": true,
+          "with-gap": true,
+          "hide": !this.filterMore
+        } }, h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, class: "align-center", ref: (el) => (this.filterModifiedEl = el), part: "filter-modified" }), h("gxg-combo-box", { class: { hide: !this.filterModified }, "disable-filter": true, value: this.filterAfterType, ref: (el) => (this.filterAfterTypeEl = el), part: "filter-after-type" }, renderFormItems("gxg-combo-box-item", [
+        {
+          id: FILTER_AFTER.NONE,
+          label: this._componentLocale.filter.afterNone,
+          value: FILTER_AFTER.NONE
+        },
+        {
+          id: FILTER_AFTER.DATE_TIME,
+          label: this._componentLocale.filter[FILTER_AFTER.DATE_TIME],
+          value: FILTER_AFTER.DATE_TIME
+        },
+        {
+          id: FILTER_AFTER.IMPORT,
+          label: this._componentLocale.filter[FILTER_AFTER.IMPORT],
+          value: FILTER_AFTER.IMPORT
+        },
+        {
+          id: FILTER_AFTER.LAST_BUILD,
+          label: this._componentLocale.filter[FILTER_AFTER.LAST_BUILD],
+          value: FILTER_AFTER.LAST_BUILD
+        }
+      ])), h("gxg-form-text", { class: { hide: !this.filterModified }, "label-position": "start", label: this._componentLocale.filter.user, "max-width": "150px", ref: (el) => (this.filterUserEl = el), part: "filter-user" }), h("div", { class: {
+          flex: true,
+          hide: !this.filterModified ||
+            this.filterAfterType !== FILTER_AFTER.DATE_TIME
+        }, part: "filter-datetime" }, h("gxg-label", { "label-position": "start" }, this._componentLocale.filter.dateTime), h("gxg-date-picker", { ref: (el) => (this.filterModifiedDateEl = el) }))), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.style, disabled: !this.styles, ref: (el) => (this.filterStyleEl = el), part: "filter-style" }, renderFormItems("gxg-combo-box-item", (_b = this.styles) !== null && _b !== void 0 ? _b : [])), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.language, disabled: !this.languages, ref: (el) => (this.filterLanguageEl = el), part: "filter-language" }, renderFormItems("gxg-combo-box-item", (_c = this.languages) !== null && _c !== void 0 ? _c : [])), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.density, disabled: !this.densities, ref: (el) => (this.filterDensityEl = el), part: "filter-density" }, renderFormItems("gxg-combo-box-item", (_d = this.densities) !== null && _d !== void 0 ? _d : [])), h("gxg-combo-box", { class: { hide: !this.filterMore }, "disable-filter": true, label: this._componentLocale.filter.layer, disabled: !this.layers, ref: (el) => (this.filterLayerEl = el), part: "filter-layer" }, renderFormItems("gxg-combo-box-item", (_e = this.layers) !== null && _e !== void 0 ? _e : [])))));
+    };
+    this.renderImages = () => {
+      return (h("gxg-grid", { part: "images-table" }, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-images" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.module, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNamePosition: "text", settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastBuildDate, columnNamePosition: "text", settingable: false })), this.images.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("gxg-icon", { type: obj.icon })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.module, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${obj.modifiedDate.toISOString().slice(0, 10)}`), h("ch-grid-cell", null, " ", obj.lastUser, " "), h("ch-grid-cell", null, `${obj.importDate.toISOString().slice(0, 10)}`), h("ch-grid-cell", null, `${obj.lastBuildDate.toISOString().slice(0, 10)}`)))))));
+    };
+    this.renderImageData = () => {
+      return (h("gxg-container", { fieldset: true, displayBorder: true, containerTitle: this._componentLocale.imageDataTitle, part: "image-data-container" }, h("div", { class: "grid images-data-flex" }, this.imagesSelectedItems.map(item => (h("div", { class: "image-item" }, h("div", { class: "img" }, h("img", { src: item.url, alt: item.id })), h("gxg-text", { type: "text-regular" }, item.name)))))));
+    };
+    this.getImages = () => {
+      let filters = {
+        name: this.filterNameEl.value,
+        parent: this.filterModuleEl.value ? this.filterModuleEl.value.id : null
+      };
+      if (this.filterMore) {
+        const modified = this.filterModifiedEl.checked;
+        const modifiedAfter = this.filterAfterTypeEl.value;
+        filters = Object.assign(Object.assign({}, filters), { searchContents: this.filterSearchContentsEl.value, category: this.filterCategoryEl.value, allDescendants: this.filterAllDescendantsEl.checked, modifiedAfter: modified ? modifiedAfter : null, modifiedBy: modified ? this.filterUserEl.value : null, modifiedDate: modified && modifiedAfter === FILTER_AFTER.DATE_TIME
+            ? this.filterModifiedDateEl.value
+            : null, style: this.filterStyleEl.value, language: this.filterLanguageEl.value, density: this.filterDensityEl.value, layer: this.filterLayerEl.value });
+      }
+      this.loadCallback(filters).then((items) => {
+        this.images = items;
+        this.selectedObjectsIds = [];
+        this.deselectAll();
+      });
+    };
+    this.newObjectCallbackHandle = () => {
+      this.newObjectCallback();
+    };
+    this.openSelectionCallBackHandle = () => {
+      this.openSelectionCallback(this.selectedObjectsIds);
+    };
+    this.deleteSelectionCallbackHandle = () => {
+      this.deleteSelectionCallback(this.selectedObjectsIds);
+    };
+    this.contextMenuCallbackHandle = () => {
+      this.contextMenuCallback(this.selectedObjectsIds);
+    };
+    this.showMoreFilter = () => {
+      this.filterMore = !this.filterMore;
+    };
+    this.selectAll = () => {
+      this.chGridEl.selectAllRows();
+    };
+    this.deselectAll = () => {
+      this.chGridEl.selectAllRows(false);
+    };
+    this.listenChanges = () => {
+      this.filterNameEl.addEventListener("change", () => {
+        this.getImages();
+      });
+      this.filterSearchContentsEl.addEventListener("change", () => {
+        this.getImages();
+      });
+      this.filterAllDescendantsEl.addEventListener("change", () => {
+        this.getImages();
+      });
+      this.filterModifiedEl.addEventListener("change", (e) => {
+        this.filterModified = e.detail.value;
+        this.getImages();
+      });
+      this.filterUserEl.addEventListener("change", () => {
+        this.getImages();
+      });
+      this.filterCategoryEl.addEventListener("valueChanged", () => {
+        this.getImages();
+      });
+      this.filterModuleEl.addEventListener("valueChanged", () => {
+        this.getImages();
+      });
+      this.filterAfterTypeEl.addEventListener("valueChanged", () => {
+        this.filterAfterType = this.filterAfterTypeEl.value;
+        this.getImages();
+      });
+      // for grid selection
+      this.chGridEl.addEventListener("rowClicked", (ev) => {
+        this.loadImageItemsCallback(ev.detail.rowId).then((items) => {
+          this.imagesSelectedItems = items;
+        });
+      });
+      this.chGridEl.addEventListener("rowDoubleClicked", () => {
+        this.openSelectionCallBackHandle();
+      });
+      this.chGridEl.addEventListener("selectionChanged", (ev) => {
+        this.selectedObjectsIds = ev.detail.rowsId;
+        this.selectionObjectChangeCallback(this.selectedObjectsIds);
+      });
+      this.chGridEl.addEventListener("contextmenu", (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.contextMenuCallbackHandle();
+      });
+    };
+    this.filterAfterType = "";
+    this.filterModified = false;
+    this.filterMore = false;
+    this.images = [];
+    this.imagesSelectedItems = [];
+    this.selectedObjectsIds = [];
+    this.categories = undefined;
+    this.densities = undefined;
+    this.defaultCategory = undefined;
+    this.defaultModule = undefined;
+    this.defaultType = undefined;
+    this.filterModules = undefined;
+    this.languages = undefined;
+    this.layers = undefined;
+    this.contextMenuCallback = undefined;
+    this.deleteSelectionCallback = undefined;
+    this.loadCallback = undefined;
+    this.loadImageItemsCallback = undefined;
+    this.newObjectCallback = undefined;
+    this.openSelectionCallback = undefined;
+    this.selectModuleCallback = undefined;
+    this.selectionObjectChangeCallback = undefined;
+    this.shadow = false;
+    this.styles = undefined;
+    this.types = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+    this.componentDidLoadEvent.emit(true);
+  }
+  componentDidLoad() {
+    this.listenChanges();
+    this.getImages();
+  }
+  // 7.LISTENERS //
+  keyDownHandler(eventInfo) {
+    if (document.activeElement === this.el) {
+      switch (eventInfo.key) {
+        case "Enter":
+          this.openSelectionCallBackHandle();
+          break;
+        case "Delete":
+          this.deleteSelectionCallbackHandle();
+          break;
+      }
+    }
+  }
+  // 8.PUBLIC METHODS API //
+  /**
+   * Validate necessary data input
+   */
+  async validate() {
+    const isValid = true;
+    return isValid;
+  }
+  /**
+   * This method reload the view, refreshing the filters and the table of images.
+   */
+  async reload() {
+    this.filterUserEl.value = null;
+    this.filterAfterTypeEl.value = null;
+    this.filterAfterType = null;
+    this.filterModifiedEl.checked = false;
+    this.filterAllDescendantsEl.checked = false;
+    this.filterModuleEl.value = null;
+    this.filterCategoryEl.value = null;
+    this.filterSearchContentsEl.value = null;
+    this.filterNameEl.value = null;
+    this.filterStyleEl.value = null;
+    this.filterLanguageEl.value = null;
+    this.filterDensityEl.value = null;
+    this.filterLayerEl.value = null;
+    this.filterMore = false;
+    this.getImages();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, this.renderFilter(), h("gxg-container", null, h("div", { class: "grid images-grid" }, this.renderImages(), this.renderImageData())), h("gxg-container", null, h("div", { class: "grid objects-count" }, h("div", { class: "flex with-gap" }, h("gxg-button", { id: "button-select-all", type: "primary-text-only", onClick: this.selectAll, part: "gxg-button gxg-button--select-all" }, this._componentLocale.footer.btnSelectAll), h("gxg-button", { id: "button-new-file", type: "primary-text-only", onClick: this.newObjectCallbackHandle, part: "gxg-button gxg-button--new-file" }, this._componentLocale.footer.btnNew)), h("gxg-text", { class: "align-end", part: "objects-matching" }, `${this.images.length} ${this._componentLocale.objCount.matching}`))))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/ww-images"]; }
+  get el() { return this; }
+  static get style() { return wwImagesCss; }
+}, [1, "gx-ide-ww-images", {
+    "categories": [16],
+    "densities": [16],
+    "defaultCategory": [1, "default-category"],
+    "defaultModule": [16],
+    "defaultType": [1, "default-type"],
+    "filterModules": [16],
+    "languages": [16],
+    "layers": [16],
+    "contextMenuCallback": [16],
+    "deleteSelectionCallback": [16],
+    "loadCallback": [16],
+    "loadImageItemsCallback": [16],
+    "newObjectCallback": [16],
+    "openSelectionCallback": [16],
+    "selectModuleCallback": [16],
+    "selectionObjectChangeCallback": [16],
+    "shadow": [4],
+    "styles": [16],
+    "types": [16],
+    "filterAfterType": [32],
+    "filterModified": [32],
+    "filterMore": [32],
+    "images": [32],
+    "imagesSelectedItems": [32],
+    "selectedObjectsIds": [32],
+    "validate": [64],
+    "reload": [64]
+  }, [[1, "keydown", "keyDownHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-ww-images", "ch-grid", "ch-grid-column", "ch-grid-column-resize", "ch-grid-column-settings", "ch-grid-columnset", "ch-grid-settings", "ch-grid-settings-columns", "ch-icon", "ch-window", "ch-window-close", "gx-ide-entity-selector", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-container", "gxg-date-picker", "gxg-form-checkbox", "gxg-form-radio", "gxg-form-text", "gxg-grid", "gxg-icon", "gxg-label", "gxg-text", "gxg-title", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-ww-images":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeWWImages);
+      }
+      break;
+    case "ch-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$q();
+      }
+      break;
+    case "ch-grid-column":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$p();
+      }
+      break;
+    case "ch-grid-column-resize":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "ch-grid-column-settings":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "ch-grid-columnset":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "ch-grid-settings":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "ch-grid-settings-columns":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "gx-ide-entity-selector":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "gxg-combo-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "gxg-combo-box-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "gxg-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "gxg-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "gxg-form-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "gxg-form-radio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "gxg-form-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxIdeWwImages = GxIdeWWImages;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeWwImages, defineCustomElement };

package/dist/components/index.d.ts

@@ -18,6 +18,7 @@ export { GxIdeTeamDevUpdateToRevision as GxIdeTeamDevUpdateToRevision } from '..
 export { GxIdeTemplate as GxIdeTemplate } from '../types/components/_template/template';
 export { GxIdeTest as GxIdeTest } from '../types/components/_test/test';
 export { GxIdeTopBar as GxIdeTopBar } from '../types/components/top-bar/top-bar';
+export { GxIdeWWImages as GxIdeWwImages } from '../types/components/ww-images/ww-images';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -79,6 +79,7 @@ export { GxIdeTeamDevUpdateToRevision, defineCustomElement as defineCustomElemen
 export { GxIdeTemplate, defineCustomElement as defineCustomElementGxIdeTemplate } from './gx-ide-template.js';
 export { GxIdeTest, defineCustomElement as defineCustomElementGxIdeTest } from './gx-ide-test.js';
 export { GxIdeTopBar, defineCustomElement as defineCustomElementGxIdeTopBar } from './gx-ide-top-bar.js';
+export { GxIdeWwImages, defineCustomElement as defineCustomElementGxIdeWwImages } from './gx-ide-ww-images.js';
 export { GxgAccordion, defineCustomElement as defineCustomElementGxgAccordion } from './gxg-accordion.js';
 export { GxgAccordionItem, defineCustomElement as defineCustomElementGxgAccordionItem } from './gxg-accordion-item.js';
 export { GxgAlert, defineCustomElement as defineCustomElementGxgAlert } from './gxg-alert.js';

package/dist/esm/ch-icon.entry.js

@@ -0,0 +1,112 @@
+import { r as registerInstance, h, g as getElement } from './index-0da01575.js';
+
+const iconContent = new Map();
+const requests = new Map();
+function getSvgContent(url) {
+  // see if we already have a request for this url
+  let request = requests.get(url);
+  if (!request) {
+    // we don't already have a request
+    request = fetch(url).then(response => {
+      if (response.ok) {
+        return response.text().then(svgContent => {
+          iconContent.set(url, svgContent);
+          return svgContent;
+        });
+      }
+      iconContent.set(url, "");
+    });
+    // cache for the same requests
+    requests.set(url, request);
+  }
+  return request;
+}
+
+const iconCss = ":host(:not([auto-color])){}:host(:not([auto-color])) svg *{fill:var(--icon-color) !important}:host(:not([auto-color])) path.icons01{fill:var(--icons01-enabled)}:host(:not([auto-color])) path.icons02{fill:var(--icons02-enabled)}:host(:not([auto-color])) path.icons03{fill:var(--icons03-enabled)}:host(:not([auto-color])) path.icons04{fill:var(--icons04-enabled)}:host(:not([auto-color])) path.icons05{fill:var(--icons05-enabled)}:host(:not([auto-color])) path.icons06{fill:var(--icons06-enabled)}:host(:not([auto-color])) path.icons07{fill:var(--icons07-enabled)}:host(:not([auto-color])) path.icons08{fill:var(--icons08-enabled)}:host(:not([auto-color])) path.icons09{fill:var(--icons09-enabled)}:host{display:inline-flex;line-height:0}:host svg{width:var(--icon-size);height:var(--icon-size)}";
+
+const ChIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * If enabled, the icon will be loaded lazily when it's visible in the viewport.
+     */
+    this.lazy = false;
+    /**
+     * If enabled, the icon will display its inherent/natural color
+     */
+    this.autoColor = false;
+    /**
+     * The URL of the icon.
+     */
+    this.src = "";
+    /**
+     * The size of the icon. Possible values: regular, small.
+     */
+    this.size = "regular";
+    this.isVisible = false;
+  }
+  /** *******************************
+  METHODS
+  *********************************/
+  connectedCallback() {
+    // purposely do not return the promise here because loading
+    // the svg file should not hold up loading the app
+    // only load the svg if it's visible
+    this.waitUntilVisible(this.element, "50px", () => {
+      this.isVisible = true;
+      this.getIcon();
+    });
+  }
+  disconnectedCallback() {
+    if (this.io !== undefined) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+  }
+  waitUntilVisible(el, rootMargin, callback) {
+    if (this.lazy &&
+      typeof window !== "undefined" &&
+      window.IntersectionObserver) {
+      const io = (this.io = new window.IntersectionObserver((data) => {
+        if (data[0].isIntersecting) {
+          io.disconnect();
+          this.io = undefined;
+          callback();
+        }
+      }, { rootMargin }));
+      io.observe(el);
+    }
+    else {
+      // browser doesn't support IntersectionObserver
+      // so just fallback to always show it
+      callback();
+    }
+  }
+  async getIcon() {
+    if (this.isVisible) {
+      if (this.src) {
+        if (iconContent.has(this.src)) {
+          this.svgContent = iconContent.get(this.src);
+        }
+        else {
+          this.svgContent = await getSvgContent(this.src);
+        }
+      }
+      else {
+        this.svgContent = "";
+        return;
+      }
+    }
+  }
+  render() {
+    return h("div", { innerHTML: this.svgContent });
+  }
+  static get assetsDirs() { return ["ch-icon-assets"]; }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "src": ["getIcon"]
+  }; }
+};
+ChIcon.style = iconCss;
+
+export { ChIcon as ch_icon };

package/dist/esm/{form-validation-cdb16431.js → common-a3df0966.js}

@@ -43,22 +43,4 @@ const getSelectedGxOption = (gxOptions) => {
   return found;
 };
 
-const formSubmitValidation = (result, ref) => {
-  var _a;
-  (_a = result.fieldErrors) === null || _a === void 0 ? void 0 : _a.forEach(element => {
-    const key = element.key;
-    const message = element.message;
-    const hasError = element.hasError;
-    const reference = ref[`${key}El`];
-    if (reference && hasError && message.trim()) {
-      reference.validationStatus = "error";
-      reference.validationMessage = message;
-    }
-    else if (reference && !hasError) {
-      reference.validationStatus = "indeterminate";
-      reference.validationMessage = null;
-    }
-  });
-};
-
-export { formSubmitValidation as f, getSelectedGxOption as g, renderFormItems as r };
+export { getSelectedGxOption as g, renderFormItems as r };

package/dist/esm/constants-7882d1a8.js

@@ -0,0 +1,8 @@
+const FILTER_AFTER = {
+  NONE: "none",
+  DATE_TIME: "afterDateTime",
+  LAST_BUILD: "afterLastBuild",
+  IMPORT: "afterImport"
+};
+
+export { FILTER_AFTER as F };

package/dist/esm/form-validation-09bd4504.js

@@ -0,0 +1,19 @@
+const formSubmitValidation = (result, ref) => {
+  var _a;
+  (_a = result.fieldErrors) === null || _a === void 0 ? void 0 : _a.forEach(element => {
+    const key = element.key;
+    const message = element.message;
+    const hasError = element.hasError;
+    const reference = ref[`${key}El`];
+    if (reference && hasError && message.trim()) {
+      reference.validationStatus = "error";
+      reference.validationMessage = message;
+    }
+    else if (reference && !hasError) {
+      reference.validationStatus = "indeterminate";
+      reference.validationMessage = null;
+    }
+  });
+};
+
+export { formSubmitValidation as f };