@genexus/genexus-ide-ui 0.0.52 → 0.0.54

package/dist/collection/components/application-declaration/bpm-app-declaration.js

@@ -0,0 +1,310 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+import { renderSuggestLists } from "../../common/render-suggest";
+import { renderComboItems } from "../../common/render-combo-items";
+import { convertSuggestedApplicationsToSuggestItems } from "./helpers";
+import { gridCommon } from "../../common/grid";
+export class GxIdeBpmAppDeclaration {
+  constructor() {
+    // 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 is() { return "gx-ide-bpm-app-declaration"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["bpm-app-declaration.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["bpm-app-declaration.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/bpm-app-declaration"]; }
+  static get properties() {
+    return {
+      "application": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ApplicationDeclarationData",
+          "resolved": "{ application?: ApplicationData; mappings: DataMappingData[]; }",
+          "references": {
+            "ApplicationDeclarationData": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current application value"
+        }
+      },
+      "suggestApplicationsCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SuggestApplicationsCallback",
+          "resolved": "(prefix: string) => Promise<string[]>",
+          "references": {
+            "SuggestApplicationsCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked to get options for application input suggest"
+        }
+      },
+      "selectApplicationCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SelectApplicationCallback",
+          "resolved": "() => Promise<ApplicationDeclarationData>",
+          "references": {
+            "SelectApplicationCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked to get access to selection application dialog"
+        }
+      },
+      "selectMappingCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SelectMappingCallback",
+          "resolved": "(parameter: string) => Promise<string>",
+          "references": {
+            "SelectMappingCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user press mapping auto-def button"
+        }
+      },
+      "confirmCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ConfirmCallback",
+          "resolved": "(data: ApplicationDeclarationData) => Promise<void>",
+          "references": {
+            "ConfirmCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user confirms application declaration"
+        }
+      },
+      "cancelCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CancelCallback",
+          "resolved": "() => Promise<void>",
+          "references": {
+            "CancelCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user cancels application declaration"
+        }
+      },
+      "getDataMappingCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GetDataMappingCallback",
+          "resolved": "(applicationName: string) => Promise<ApplicationDeclarationData>",
+          "references": {
+            "GetDataMappingCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user select one of the options provided by the suggest"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "suggestedApplications": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentDidRenderEvent",
+        "name": "componentDidRenderEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "description",
+              "text": "Gets fired when the component has rendered for the first time."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "application",
+        "methodName": "watchApplicationHandler"
+      }];
+  }
+}

package/dist/collection/components/application-declaration/gx-ide-assets/bpm-app-declaration/langs/bpm-app-declaration.lang.en.json

@@ -0,0 +1,16 @@
+{
+  "header": {
+    "applicationLabel": "Application"
+  },
+  "dataMappings": {
+    "title": "Data Mappings",
+    "firstColName": "Primary Key Attribute",
+    "firstColNameParameter": "Parameter",
+    "secondColName": "Relevant Data",
+    "emptyOption": "(None)"
+  },
+  "buttons": {
+    "confirmButton": "Confirm",
+    "cancelButton": "Cancel"
+  }
+}

package/dist/collection/components/application-declaration/gx-ide-assets/bpm-app-declaration/langs/bpm-app-declaration.lang.ja.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "「こんにちは、私の名前は {0} です。オレゴンに住んでいます。」"
+}

package/dist/collection/components/application-declaration/gx-ide-assets/bpm-app-declaration/langs/bpm-app-declaration.lang.zh.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "你好，我的名字是 {0}，我住在俄勒冈州。"
+}

package/dist/collection/components/application-declaration/helpers.js

@@ -0,0 +1,26 @@
+/* References Types*/
+/**
+ * @description This function converts string[] to SuggestItemData[]
+ */
+export 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;
+};

package/dist/collection/components/new-object/gx-ide-assets/new-object/langs/new-object.lang.en.json

@@ -4,8 +4,9 @@
   "moduleOnly": "Module",
   "folderOnly": "Folder",
   "moduleFolder": "Module/Folder",
-  "categorySelection": "Select a category",
-  "typeSelection": "Select a type",
+  "categorySelectionTitle": "Select a category",
+  "typeSelectionTitle": "Select a type",
+  "typeSelectionTitleSuffix": "Types",
   "footer": {
     "btnCreate": "Create",
     "btnCancel": "Cancel"

package/dist/collection/components/new-object/new-object.js

@@ -32,6 +32,8 @@ export class GxIdeNewObject {
      * This method initializes tha name value. It depends on 'this.selectedType'
      */
     this.init = () => {
+      this.selectedCategory = this.typeCategories[0];
+      this.selectedType = this.typeCategories[0].types[0];
       if (this.selectedType && this.selectedType.name.length > 0) {
         this.name = this.selectedType.name;
         this.description = this.selectedType.name;
@@ -79,7 +81,9 @@ export class GxIdeNewObject {
       const data = {
         typeId: (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.id,
         name: this.nameEl.value,
-        description: this.descriptionEl.value,
+        description: !this.descriptionModifiedByUser
+          ? undefined
+          : this.descriptionEl.value,
         moduleId: this.parentEl.value.id
       };
       const result = await this.createCallback(data);
@@ -91,17 +95,20 @@ export class GxIdeNewObject {
     this.categoryOnSelectionChangedHandler = (selectionEvent) => {
       const selection = selectionEvent.detail.items;
       if (selection.length > 0) {
-        this.selectedCategory = this.typeCategories[selection[0].index];
-        if (this.selectedCategory.types[0]) {
-          this.selectedType = this.selectedCategory.types[0];
+        const selectedCategory = this.typeCategories[selection[0].index];
+        if (selectedCategory) {
+          this.selectedCategory = selectedCategory;
+          if (selectedCategory.types.length > 0) {
+            this.selectedType = selectedCategory.types[0];
+          }
         }
       }
     };
     this.typeOnSelectionChangedHandler = (selectionEvent) => {
       const selection = selectionEvent.detail.items;
       if (selection.length > 0) {
-        const selectedType = selection[0];
-        this.selectedType = this.selectedCategory.types[selectedType.index];
+        const selected = selection[0];
+        this.selectedType = this.selectedCategory.types[selected.index];
       }
     };
     this.selectedCategory = undefined;
@@ -118,19 +125,11 @@ export class GxIdeNewObject {
     this.createCallback = undefined;
     this.cancelCallback = undefined;
   }
-  // 4.PUBLIC PROPERTY API //
-  watchPropHandler(newSelectedType) {
-    this.name = newSelectedType.name;
-    this.description = newSelectedType.name;
+  watchSelectedTypeHandler() {
     this.descriptionModifiedByUser = false;
-    if (this.nameEl) {
-      this.nameEl.focus();
-    }
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
-    this.selectedCategory = this.typeCategories[0];
-    this.selectedType = this.typeCategories[0].types[0];
     this.init();
     this._componentLocale = await Locale.getComponentStrings(this.el);
   }
@@ -146,9 +145,9 @@ export class GxIdeNewObject {
     return (h(Host, { class: {
         "gxi-new-kb": true,
         "gxi-new-object--shadow": this.shadow
-      } }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("main", { class: "main" }, h("gxg-container", { displayBorderBottom: true }, h("div", { class: "grid first-row" }, this.typeCategories.length > 1 ? (h("gxg-list-box", { "single-selection": true, "the-title": this._componentLocale.categorySelection, onSelectionChanged: this.categoryOnSelectionChangedHandler }, this.typeCategories.map(category => (h("gxg-list-box-item", { key: category.id, value: category.id, icon: category.icon, part: `${category}-${category.id}` }, category.name))))) : null, h("gxg-list-box", { "single-selection": true, "the-title": this._componentLocale.typeSelection, onSelectionChanged: this.typeOnSelectionChangedHandler }, this.selectedCategory.types
-      ? this.selectedCategory.types.map(type => (h("gxg-list-box-item", { key: `${this.selectedCategory.id}-${type.id}`, icon: type.icon, selected: this.selectedType.id === type.id, part: `${type}-${type.id}` }, type.name)))
-      : null), h("gxg-title", { type: "title-05" }, (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.description))), h("gxg-container", null, h("div", { class: "grid" }, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.name, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, onValueChanged: this.onNameValueChangedHandler, debounce: true, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.description), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.description, ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel))))));
+      } }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("main", { class: "main" }, h("gxg-container", { displayBorderBottom: true }, h("div", { class: "grid first-row" }, this.typeCategories.length > 0 ? (h("gxg-list-box", { "single-selection": true, "the-title": this._componentLocale.categorySelectionTitle, onSelectionChanged: this.categoryOnSelectionChangedHandler }, this.typeCategories.map(category => (h("gxg-list-box-item", { key: category.id, value: category.id, icon: category.icon, part: `category-${category.id}` }, category.name))))) : null, this.selectedCategory.types.length > 0 ? (h("gxg-list-box", { "single-selection": true, theTitle: this.selectedCategory.name
+        ? `${this.selectedCategory.name} ${this._componentLocale.typeSelectionTitleSuffix}`
+        : this._componentLocale.typeSelectionTitle, key: this.selectedCategory.id, onSelectionChanged: this.typeOnSelectionChangedHandler }, this.selectedCategory.types.map(type => (h("gxg-list-box-item", { key: `${this.selectedCategory.id}-${type.id}`, icon: type.icon, part: `type-${this.selectedCategory.id}-${type.id}` }, type.name))))) : (h("p", null, "No Categories to display")), h("gxg-title", { type: "title-05" }, (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.description))), h("gxg-container", null, h("div", { class: "grid" }, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.selectedType.name, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, onValueChanged: this.onNameValueChangedHandler, debounce: true, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.description), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.selectedType.name, ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel))))));
   }
   static get is() { return "gx-ide-new-object"; }
   static get encapsulation() { return "shadow"; }
@@ -400,7 +399,7 @@ export class GxIdeNewObject {
   static get watchers() {
     return [{
         "propName": "selectedType",
-        "methodName": "watchPropHandler"
+        "methodName": "watchSelectedTypeHandler"
       }];
   }
 }

package/dist/components/gx-ide-bpm-app-declaration.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GxIdeBpmAppDeclaration extends Components.GxIdeBpmAppDeclaration, HTMLElement {}
+export const GxIdeBpmAppDeclaration: {
+  prototype: GxIdeBpmAppDeclaration;
+  new (): GxIdeBpmAppDeclaration;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;