@genexus/genexus-ide-ui 0.0.52 → 0.0.53

package/dist/components/gx-ide-bpm-app-declaration.js

@@ -0,0 +1,334 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { L as Locale } from './locale.js';
+import { r as renderSuggestLists } from './render-suggest.js';
+import { r as renderComboItems } from './render-combo-items.js';
+import { g as gridCommon } from './grid.js';
+import { d as defineCustomElement$p } from './ch-grid2.js';
+import { d as defineCustomElement$o } from './ch-grid-column2.js';
+import { d as defineCustomElement$n } from './ch-grid-column-resize2.js';
+import { d as defineCustomElement$m } from './ch-grid-column-settings2.js';
+import { d as defineCustomElement$l } from './ch-grid-columnset2.js';
+import { d as defineCustomElement$k } from './ch-grid-settings2.js';
+import { d as defineCustomElement$j } from './ch-grid-settings-columns2.js';
+import { d as defineCustomElement$i } from './icon.js';
+import { d as defineCustomElement$h } from './ch-suggest2.js';
+import { d as defineCustomElement$g } from './ch-suggest-list2.js';
+import { d as defineCustomElement$f } from './ch-suggest-list-item2.js';
+import { d as defineCustomElement$e } from './ch-window2.js';
+import { d as defineCustomElement$d } from './ch-window-close2.js';
+import { d as defineCustomElement$c } from './button.js';
+import { d as defineCustomElement$b } from './combo-box.js';
+import { d as defineCustomElement$a } from './combo-box-item.js';
+import { d as defineCustomElement$9 } from './container2.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 './suggest.js';
+import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+/* References Types*/
+/**
+ * @description This function converts string[] to SuggestItemData[]
+ */
+const convertSuggestedApplicationsToSuggestItems = (suggestedApplications) => {
+  const suggestData = {
+    suggestItems: null,
+    suggestLists: []
+  };
+  if (suggestedApplications.length) {
+    const suggestList = {
+      label: "Applications",
+      items: []
+    };
+    suggestedApplications.forEach((suggestedApplication) => {
+      const suggestItem = {
+        value: suggestedApplication,
+        description: null,
+        icon: null
+      };
+      suggestList.items.push(suggestItem);
+    });
+    suggestData.suggestLists.push(suggestList);
+  }
+  return suggestData;
+};
+
+const bpmAppDeclarationCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}: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}:host .header{display:flex;gap:var(--gx-ide-grid-row-gap)}:host .header .application-suggest{flex:1}:host .row-button{display:flex;align-items:center}";
+
+const GxIdeBpmAppDeclaration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.listenApplicationSelected = async () => {
+      this.applicationSuggestEl.addEventListener("itemSelected", (e) => {
+        this.getDataMappingCallbackHandler(e.detail.value);
+      });
+    };
+    this.applicationSuggestValueChangedHandler = async (e) => {
+      const value = e.detail;
+      this.suggestApplicationsCallback(value)
+        .then(result => {
+        this.suggestedApplications =
+          convertSuggestedApplicationsToSuggestItems(result);
+      })
+        .catch(() => {
+        // to do
+      });
+    };
+    this.getDataMappingCallbackHandler = async (applicationName) => {
+      this.application = await this.getDataMappingCallback(applicationName);
+    };
+    this.selectApplicationCallbackHandler = async () => {
+      const callbackResult = await this.selectApplicationCallback();
+      if (callbackResult) {
+        this.application = callbackResult;
+      }
+    };
+    this.confirmCallbackHandler = async () => {
+      await this.confirmCallback(this.application);
+    };
+    this.cancelCallbackHandler = async () => {
+      await this.cancelCallback();
+    };
+    this.selectMappingCallbackHandler = (parameter) => async () => {
+      if (this.selectMappingCallback) {
+        const newRelevantData = await this.selectMappingCallback(parameter);
+        if (newRelevantData) {
+          // update actual application with new relevant data option
+          // first find mapping index
+          const dataIndex = this.applicationState.mappings.findIndex(mapping => {
+            return mapping.parameter === parameter;
+          });
+          if (dataIndex !== -1) {
+            // new relevant data could be new, or already existent.
+            const found = this.applicationState.mappings[dataIndex].relevantDataOptions.find(option => {
+              return option === newRelevantData;
+            });
+            if (!found) {
+              // new. add.
+              this.applicationState.mappings[dataIndex].relevantDataOptions.push(newRelevantData);
+            }
+            // always set this data as selected
+            this.applicationState.mappings[dataIndex].relevantData =
+              newRelevantData;
+            // update
+            this.application = Object.assign({}, this.applicationState);
+          }
+        }
+      }
+    };
+    this.dataOptionsToComboItems = (relevantDataOptions) => {
+      const gxOptions = [
+        { id: this._componentLocale.dataMappings.emptyOption }
+      ];
+      relevantDataOptions.forEach(relevantOption => {
+        const gxOption = { id: relevantOption };
+        gxOptions.push(gxOption);
+      });
+      return gxOptions;
+    };
+    this.clearApplicationHandler = () => {
+      this.application = {
+        application: undefined,
+        mappings: []
+      };
+    };
+    this.renderDataMappingsGrid = () => {
+      var _a;
+      return (h("gxg-grid", { "ellipsis-cell-wrapper": true }, h("ch-grid", { part: "ch-grid-data-mappings" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: ((_a = this.application.application) === null || _a === void 0 ? void 0 : _a.typeIcon) === "objects/transaction"
+          ? this._componentLocale.dataMappings.firstColName
+          : this._componentLocale.dataMappings.firstColNameParameter, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.dataMappings.secondColName, settingable: false, sortable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { settingable: false, sortable: false, size: gridCommon.colSize.auto })), this.application.mappings.map((obj, index) => {
+        var _a;
+        return (h("ch-grid-row", { rowId: index + obj.parameter }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, `${obj.access}: ${obj.parameter}`)), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-combo-box", { disableFilter: true, value: obj.relevantData }, renderComboItems((_a = this.dataOptionsToComboItems(obj.relevantDataOptions)) !== null && _a !== void 0 ? _a : [])))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, h("gxg-button", { "data-index": index, type: "secondary-icon-only", icon: "gemini-tools/add-circle", onClick: this.selectMappingCallbackHandler(obj.parameter) })))));
+      }))));
+    };
+    this.suggestedApplications = undefined;
+    this.application = undefined;
+    this.suggestApplicationsCallback = undefined;
+    this.selectApplicationCallback = undefined;
+    this.selectMappingCallback = undefined;
+    this.confirmCallback = undefined;
+    this.cancelCallback = undefined;
+    this.getDataMappingCallback = undefined;
+  }
+  watchApplicationHandler(newApplication) {
+    this.applicationState = newApplication;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+    this.applicationState = this.application;
+  }
+  async componentDidLoad() {
+    /*  this.applicationSuggestValueChangedHandler(this.applicationText); */
+    this.listenApplicationSelected();
+  }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    var _a;
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", null, h("header", { class: "header" }, h("gxg-label", { class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.applicationLabel), h("gxg-suggest", { class: "application-suggest" }, h("ch-suggest", { value: ((_a = this.application.application) === null || _a === void 0 ? void 0 : _a.name) || null, onValueChanged: this.applicationSuggestValueChangedHandler, ref: el => (this.applicationSuggestEl = el), part: "application-suggest" }, renderSuggestLists(this.suggestedApplications))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.selectApplicationCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" }), h("gxg-button", { type: "outlined", part: "clear-application-button", onClick: this.clearApplicationHandler }, "Clear")), h("div", { class: "grid data-mappings" }, h("gxg-container", { containerTitle: this._componentLocale.dataMappings.title, noHeadingBorder: true }, this.renderDataMappingsGrid())), h("gxg-button", { type: "primary-text-only", slot: "footer", icon: "general/datastore", onClick: this.confirmCallbackHandler }, this._componentLocale.buttons.confirmButton), h("gxg-button", { type: "secondary-text-only", slot: "footer", onClick: this.cancelCallbackHandler }, this._componentLocale.buttons.cancelButton)))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/bpm-app-declaration"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "application": ["watchApplicationHandler"]
+  }; }
+  static get style() { return bpmAppDeclarationCss; }
+}, [1, "gx-ide-bpm-app-declaration", {
+    "application": [1040],
+    "suggestApplicationsCallback": [16],
+    "selectApplicationCallback": [16],
+    "selectMappingCallback": [16],
+    "confirmCallback": [16],
+    "cancelCallback": [16],
+    "getDataMappingCallback": [16],
+    "suggestedApplications": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-bpm-app-declaration", "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-suggest", "ch-suggest-list", "ch-suggest-list-item", "ch-window", "ch-window-close", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-container", "gxg-form-text", "gxg-grid", "gxg-icon", "gxg-label", "gxg-suggest", "gxg-title", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-bpm-app-declaration":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeBpmAppDeclaration$1);
+      }
+      break;
+    case "ch-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$p();
+      }
+      break;
+    case "ch-grid-column":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "ch-grid-column-resize":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "ch-grid-column-settings":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "ch-grid-columnset":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "ch-grid-settings":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "ch-grid-settings-columns":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "ch-suggest":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "ch-suggest-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "ch-suggest-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "gxg-combo-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "gxg-combo-box-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "gxg-container":
+      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-suggest":
+      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 GxIdeBpmAppDeclaration = GxIdeBpmAppDeclaration$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeBpmAppDeclaration, defineCustomElement };

package/dist/components/gx-ide-references.js

@@ -1,6 +1,7 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
 import { u as updateTreeModel, r as renderTreeItems } from './update-tree-model.js';
+import { r as renderSuggestLists } from './render-suggest.js';
 import { d as defineCustomElement$i } from './icon.js';
 import { d as defineCustomElement$h } from './ch-suggest2.js';
 import { d as defineCustomElement$g } from './ch-suggest-list2.js';
@@ -19,27 +20,6 @@ import { d as defineCustomElement$4 } from './tooltip.js';
 import { d as defineCustomElement$3 } from './gxg-tree2.js';
 import { d as defineCustomElement$2 } from './gxg-tree-item2.js';
 
-/* eslint-disable @typescript-eslint/no-use-before-define */
-const renderSuggestLists = (suggestData) => {
-  if (suggestData === null || suggestData === void 0 ? void 0 : suggestData.suggestLists.length) {
-    return suggestData.suggestLists.map((list) => {
-      return (h("ch-suggest-list", { label: list.label }, list.items.map((item) => {
-        return renderSuggestListsItem(item);
-      })));
-    });
-  }
-  return [];
-};
-const renderSuggestListsItem = (suggestItem) => {
-  return (h("ch-suggest-list-item", { value: suggestItem.value }, [
-    suggestItem.description || suggestItem.value,
-    suggestItem.icon && renderIcon(suggestItem.icon)
-  ]));
-};
-const renderIcon = (iconName) => {
-  return h("gxg-icon", { color: "auto", type: iconName, slot: "icon" });
-};
-
 /**
  * @description This function converts SelectorCategoryData[] SuggestData
  */

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 /* GenexusIdeUi custom elements */
+export { GxIdeBpmAppDeclaration as GxIdeBpmAppDeclaration } from '../types/components/application-declaration/bpm-app-declaration';
 export { GxIdeContainer as GxIdeContainer } from '../types/components/container/container';
 export { GxIdeCreateKbFromServer as GxIdeCreateKbFromServer } from '../types/components/create-kb-from-server/create-kb-from-server';
 export { GxIdeDirectorySelector as GxIdeDirectorySelector } from '../types/components/directory-selector/directory-selector';

package/dist/components/index.js

@@ -61,6 +61,7 @@ export { ChWindow, defineCustomElement as defineCustomElementChWindow } from './
 export { ChWindowClose, defineCustomElement as defineCustomElementChWindowClose } from './ch-window-close.js';
 export { GxGridChameleon, defineCustomElement as defineCustomElementGxGridChameleon } from './gx-grid-chameleon.js';
 export { GxGridChameleonColumnFilter, defineCustomElement as defineCustomElementGxGridChameleonColumnFilter } from './gx-grid-chameleon-column-filter.js';
+export { GxIdeBpmAppDeclaration, defineCustomElement as defineCustomElementGxIdeBpmAppDeclaration } from './gx-ide-bpm-app-declaration.js';
 export { GxIdeContainer, defineCustomElement as defineCustomElementGxIdeContainer } from './gx-ide-container.js';
 export { GxIdeCreateKbFromServer, defineCustomElement as defineCustomElementGxIdeCreateKbFromServer } from './gx-ide-create-kb-from-server.js';
 export { GxIdeDirectorySelector, defineCustomElement as defineCustomElementGxIdeDirectorySelector } from './gx-ide-directory-selector.js';

package/dist/components/render-combo-items.js

@@ -6,7 +6,7 @@ const renderComboItems = (gxOptions) => {
   gxOptions.forEach((gxOption) => {
     const iconName = gxOption.iconName || gxOption.icon;
     const value = gxOption.value || gxOption.id;
-    comboItemsArray.push(h("gxg-combo-box-item", { value: value, icon: iconName }, gxOption.label || gxOption.name));
+    comboItemsArray.push(h("gxg-combo-box-item", { value: value, icon: iconName }, gxOption.label || gxOption.name || gxOption.value || gxOption.id));
   });
   return comboItemsArray;
 };

package/dist/components/render-suggest.js

@@ -0,0 +1,24 @@
+import { h } from '@stencil/core/internal/client';
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const renderSuggestLists = (suggestData) => {
+  if (suggestData === null || suggestData === void 0 ? void 0 : suggestData.suggestLists.length) {
+    return suggestData.suggestLists.map((list) => {
+      return (h("ch-suggest-list", { label: list.label }, list.items.map((item) => {
+        return renderSuggestListsItem(item);
+      })));
+    });
+  }
+  return [];
+};
+const renderSuggestListsItem = (suggestItem) => {
+  return (h("ch-suggest-list-item", { value: suggestItem.value }, [
+    suggestItem.description || suggestItem.value,
+    suggestItem.icon && renderIcon(suggestItem.icon)
+  ]));
+};
+const renderIcon = (iconName) => {
+  return h("gxg-icon", { color: "auto", type: iconName, slot: "icon" });
+};
+
+export { renderSuggestLists as r };