@genexus/genexus-ide-ui 1.1.3 → 1.1.5

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

@@ -1,144 +1,202 @@
-/* STENCIL IMPORTS */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeBpmAppDeclaration_componentLocale, _GxIdeBpmAppDeclaration_animateEmptyState, _GxIdeBpmAppDeclaration_shortcutsSrc, _GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP, _GxIdeBpmAppDeclaration_setAccessCaptions, _GxIdeBpmAppDeclaration_applicationInputChangedHandler, _GxIdeBpmAppDeclaration_cancelCallbackHandler, _GxIdeBpmAppDeclaration_clearApplicationHandler, _GxIdeBpmAppDeclaration_confirmCallbackHandler, _GxIdeBpmAppDeclaration_mapRelevantDataOptionsToComboBoxModel, _GxIdeBpmAppDeclaration_mapSuggestedApplicationsToComboBoxModel, _GxIdeBpmAppDeclaration_relevantDataInputHandler, _GxIdeBpmAppDeclaration_selectApplicationCallbackHandler, _GxIdeBpmAppDeclaration_selectMappingCallbackHandler, _GxIdeBpmAppDeclaration_setApplicationData, _GxIdeBpmAppDeclaration_suggestInputHandler, _GxIdeBpmAppDeclaration_updateApplicationData, _GxIdeBpmAppDeclaration_renderDataMappingsGrid;
 import { Host, h, getAssetPath } from "@stencil/core";
-/* CUSTOM IMPORTS */
+import { getIconPath } from "@genexus/mercury";
 import { Locale } from "../../../common/locale";
 import { config } from "../../../common/config";
-import { renderSuggestLists } from "../../../common/render-suggest";
-import { renderComboItems } from "../../../common/render-combo-items";
-import { convertSuggestedApplicationsToSuggestItems } from "./helpers";
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    // "utils/form",
-    // "utils/layout",
-    // "utils/typography",
-    // "components/button",
-    // "components/checkbox",
-    // "components/edit",
-    "components/tabular-grid"
+    "components/button",
+    "components/combo-box",
+    "components/icon",
+    "components/tabular-grid",
+    "utils/elevation",
+    "utils/form",
+    "utils/layout",
+    "utils/spacing"
 ];
+const ADD_ICON = getIconPath({
+    category: "system",
+    name: "add",
+    colorType: "neutral"
+});
+const FILTER_ICON = getIconPath({
+    category: "window-tools",
+    name: "filter",
+    colorType: "on-elevation"
+});
+const MORE_ICON = getIconPath({
+    category: "system",
+    name: "more-horizontal",
+    colorType: "primary"
+});
+const SUGGEST_OPTIONS = {
+    alreadyProcessed: true,
+    autoExpand: false,
+    hideMatchesAndShowNonMatches: false,
+    highlightMatchedItems: false,
+    matchCase: false,
+    regularExpression: false,
+    strict: false,
+    renderActiveItemIconOnExpand: true
+};
 export class GxIdeBpmAppDeclaration {
     constructor() {
-        this.renderedFirstTime = false;
-        this.shortcutsSrc = getAssetPath(`./gx-ide-assets/bpm-app-declaration/shortcuts.json`);
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
-        this.listenApplicationSelected = async () => {
-            this.applicationSuggestEl.addEventListener("itemSelected", (e) => {
-                this.getDataMappingCallbackHandler(e.detail.value);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeBpmAppDeclaration_componentLocale.set(this, void 0);
+        _GxIdeBpmAppDeclaration_animateEmptyState.set(this, true);
+        _GxIdeBpmAppDeclaration_shortcutsSrc.set(this, getAssetPath(`./gx-ide-assets/bpm-app-declaration/shortcuts.json`));
+        _GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP.set(this, {
+            // To be defined on componentWillLoad
+            in: undefined,
+            out: undefined,
+            inout: undefined
+        });
+        _GxIdeBpmAppDeclaration_setAccessCaptions.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP, "f").in = __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").dataMappings.access.in;
+            __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP, "f").out =
+                __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").dataMappings.access.out;
+            __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP, "f").inout =
+                __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").dataMappings.access.inout;
+        });
+        _GxIdeBpmAppDeclaration_applicationInputChangedHandler.set(this, async (event) => {
+            const selectedApplicationName = event.detail;
+            this.application.mappings = await this.getDataMappingCallback(selectedApplicationName);
+        });
+        _GxIdeBpmAppDeclaration_cancelCallbackHandler.set(this, () => {
+            this.cancelCallback();
+        });
+        _GxIdeBpmAppDeclaration_clearApplicationHandler.set(this, () => {
+            this.application = {
+                application: {
+                    name: "",
+                    typeIcon: ""
+                },
+                mappings: []
+            };
+        });
+        _GxIdeBpmAppDeclaration_confirmCallbackHandler.set(this, () => {
+            this.confirmCallback(this.application);
+        });
+        _GxIdeBpmAppDeclaration_mapRelevantDataOptionsToComboBoxModel.set(this, (relevantDataOptions) => {
+            return relevantDataOptions.map(optionName => {
+                return {
+                    caption: optionName,
+                    value: optionName
+                };
             });
-        };
-        this.applicationSuggestValueChangedHandler = async (e) => {
-            const value = e.detail;
-            this.suggestApplicationsCallback(value)
-                .then(result => {
-                this.suggestedApplications =
-                    convertSuggestedApplicationsToSuggestItems(result);
-            })
-                .catch(() => {
-                // to do
+        });
+        _GxIdeBpmAppDeclaration_mapSuggestedApplicationsToComboBoxModel.set(this, (suggestedApplicationsNames) => {
+            return suggestedApplicationsNames.map(applicationName => {
+                return {
+                    caption: applicationName,
+                    value: applicationName
+                };
             });
-        };
-        this.getDataMappingCallbackHandler = async (applicationName) => {
-            this.application = await this.getDataMappingCallback(applicationName);
-        };
-        this.selectApplicationCallbackHandler = async () => {
-            const callbackResult = await this.selectApplicationCallback();
-            if (callbackResult) {
-                this.application = callbackResult;
+        });
+        _GxIdeBpmAppDeclaration_relevantDataInputHandler.set(this, (mappingIndex) => async (event) => {
+            const inputValue = event.detail;
+            this.application.mappings[mappingIndex].relevantData = inputValue;
+        });
+        _GxIdeBpmAppDeclaration_selectApplicationCallbackHandler.set(this, async () => {
+            const applicationDeclarationData = await this.selectApplicationCallback();
+            if (applicationDeclarationData) {
+                __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_setApplicationData, "f").call(this, applicationDeclarationData.application);
+                this.application.mappings = applicationDeclarationData.mappings;
             }
-        };
-        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);
-                    }
+        });
+        _GxIdeBpmAppDeclaration_selectMappingCallbackHandler.set(this, (parameter, mappingIndex) => async () => {
+            const returnedRelevantData = await this.selectMappingCallback(parameter);
+            if (returnedRelevantData) {
+                const currentRelevantDataOptions = this.application.mappings[mappingIndex].relevantDataOptions;
+                const indexOfReturnedRelevantData = currentRelevantDataOptions.indexOf(returnedRelevantData);
+                if (indexOfReturnedRelevantData === -1) {
+                    // returnedRelevantData is a new option. Add to combo-box.
+                    currentRelevantDataOptions.push(returnedRelevantData);
                 }
+                // Set as selected
+                this.application.mappings[mappingIndex].relevantData =
+                    returnedRelevantData;
+                __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_updateApplicationData, "f").call(this);
             }
-        };
-        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("ch-tabular-grid", { class: "tabular-grid tabular-grid-application-declaration", part: "ch-grid-data-mappings" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { class: "tabular-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: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { class: "tabular-grid-column", columnName: this._componentLocale.dataMappings.secondColName, settingable: false, sortable: false, size: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { class: "tabular-grid-column", settingable: false, sortable: false, size: config.tabularGrid.colSize.auto })), this.application.mappings.map((obj, index) => {
-                var _a;
-                return (h("ch-tabular-grid-row", { class: "tabular-grid-row", rowId: index + obj.parameter }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, `${obj.access}: ${obj.parameter}`), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("gxg-combo-box", { disableFilter: true, value: obj.relevantData }, renderComboItems((_a = this.dataOptionsToComboItems(obj.relevantDataOptions)) !== null && _a !== void 0 ? _a : []))), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("gxg-button", { "data-index": index, type: "secondary-icon-only", icon: "gemini-tools/add", onClick: this.selectMappingCallbackHandler(obj.parameter), class: "select-mapping-callback-button" }))));
-            })));
-        };
-        this.suggestedApplications = undefined;
-        this.displayTitle = false;
+        });
+        _GxIdeBpmAppDeclaration_setApplicationData.set(this, (applicationData) => {
+            if (applicationData) {
+                const applicationName = applicationData.name;
+                this.application.application.name = applicationName;
+                this.applicationComboBoxModel = [
+                    {
+                        caption: applicationName,
+                        value: applicationName,
+                        startImgSrc: applicationData.typeIcon
+                    }
+                ];
+            }
+        });
+        _GxIdeBpmAppDeclaration_suggestInputHandler.set(this, async (event) => {
+            const inputValue = event.detail;
+            this.application.application.name = inputValue;
+            const suggestedApplicationNames = await this.suggestApplicationsCallback(inputValue);
+            this.applicationComboBoxModel =
+                __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_mapSuggestedApplicationsToComboBoxModel, "f").call(this, suggestedApplicationNames);
+        });
+        _GxIdeBpmAppDeclaration_updateApplicationData.set(this, () => {
+            this.application = { ...this.application };
+        });
+        // Renders
+        _GxIdeBpmAppDeclaration_renderDataMappingsGrid.set(this, () => {
+            const applicationDataToDisplay = this.application.mappings.length;
+            if (applicationDataToDisplay) {
+                // Set as animated for the next time.
+                __classPrivateFieldSet(this, _GxIdeBpmAppDeclaration_animateEmptyState, true, "f");
+            }
+            return (h("div", { class: "field-group data-mapping-grid-container" }, h("div", { class: "field field-block" }, h("label", { class: "spacing-body-inline-start label" }, __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").dataMappings.title), h("ch-tabular-grid", { class: {
+                    "tabular-grid": true,
+                    "tabular-grid-application-declaration": true,
+                    "scrollable": true,
+                    "empty-result": !applicationDataToDisplay
+                }, part: "ch-grid-data-mappings" }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { class: "tabular-grid-column", columnName: this.application.application?.typeIcon ===
+                    "objects/transaction"
+                    ? __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").dataMappings.firstColName
+                    : __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").dataMappings.firstColNameParameter, settingable: false, size: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { class: "tabular-grid-column", columnName: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").dataMappings.secondColName, settingable: false, sortable: false, size: config.tabularGrid.colSize.common }), h("ch-tabular-grid-column", { class: "tabular-grid-column", settingable: false, sortable: false, size: config.tabularGrid.colSize.auto })), this.application.mappings.length ? (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, this.application.mappings.map((obj, index) => (h("ch-tabular-grid-row", { class: "tabular-grid-row", rowId: `${index}-${obj.parameter}`, key: `${index}-${obj.parameter}-grid-row` }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("span", { class: "pill-tag elevation-3" }, __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP, "f")[obj.access]), obj.parameter), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("ch-combo-box-render", { class: "combo-box", model: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_mapRelevantDataOptionsToComboBoxModel, "f").call(this, obj.relevantDataOptions), value: obj.relevantData, key: `${index}-${obj.parameter}-combo-box`, onInput: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_relevantDataInputHandler, "f").call(this, index) })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("button", { "data-index": index, onClick: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_selectMappingCallbackHandler, "f").call(this, obj.parameter, index), class: "button-tertiary button-icon-only", "aria-label": __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").buttons.selectMapping, title: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").buttons.selectMapping }, h("ch-image", { class: "icon-md", src: ADD_ICON })))))))) : (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, h("ch-tabular-grid-rowset-empty", null, h("gx-ide-empty-state", { isAnimated: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_animateEmptyState, "f"), stateIconSrc: FILTER_ICON, stateTitle: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").emptyState.title, stateDescription: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").emptyState.description }))))))));
+        });
+        this.applicationComboBoxModel = [];
         this.application = undefined;
-        this.suggestApplicationsCallback = undefined;
-        this.selectApplicationCallback = undefined;
-        this.selectMappingCallback = undefined;
-        this.confirmCallback = undefined;
         this.cancelCallback = undefined;
+        this.confirmCallback = undefined;
         this.getDataMappingCallback = undefined;
+        this.selectApplicationCallback = undefined;
+        this.selectMappingCallback = undefined;
+        this.suggestApplicationsCallback = 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();
-        this.applicationSuggestEl.focus();
-    }
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+        __classPrivateFieldSet(this, _GxIdeBpmAppDeclaration_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_setApplicationData, "f").call(this, this.application.application);
+        if (this.application.mappings.length === 0) {
+            __classPrivateFieldSet(this, _GxIdeBpmAppDeclaration_animateEmptyState, false, "f");
         }
+        __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_setAccessCaptions, "f").call(this);
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        var _a;
-        return (h(Host, { class: "gx-ide-component" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noAboveFooterPadding: true, noHeadingBorder: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("header", { slot: "header", class: "header" }, h("div", { class: "header__first-row" }, 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: "header__second-row" }, h("gx-ide-title", { type: "secondary" }, this._componentLocale.dataMappings.title))), this.renderDataMappingsGrid(), h("gxg-button", { type: "secondary-text-only", slot: "footer-end", onClick: this.cancelCallbackHandler, part: "cancel-button" }, this._componentLocale.buttons.cancelButton), h("gxg-button", { type: "primary-text-only", slot: "footer-end", icon: "general/datastore", onClick: this.confirmCallbackHandler, part: "confirm-button" }, this._componentLocale.buttons.confirmButton))), h("gxg-shortcuts", { src: this.shortcutsSrc })));
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("header", { slot: "header", class: "header spacing-body" }, h("ch-combo-box-render", { class: "combo-box", value: this.application.application.name, model: this.applicationComboBoxModel, suggestDebounce: config.inputDebounce, suggest: true, suggestOptions: SUGGEST_OPTIONS, onInput: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_suggestInputHandler, "f"), onChange: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_applicationInputChangedHandler, "f") }), h("div", { class: "buttons-spacer" }, h("button", { onClick: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_selectApplicationCallbackHandler, "f"), class: "button-tertiary button-icon-only", "aria-label": __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").buttons.selectApplication, title: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").buttons.selectApplication }, h("ch-image", { class: "icon-md", src: MORE_ICON })), h("button", { onClick: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_clearApplicationHandler, "f"), class: "button-secondary" }, "Clear"))), __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_renderDataMappingsGrid, "f").call(this), h("footer", { class: "control-footer spacing-body-block-end spacing-body-inline" }, h("div", { class: "buttons-spacer" }, h("button", { class: "button-secondary", onClick: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_cancelCallbackHandler, "f") }, __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").buttons.cancelButton), h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_confirmCallbackHandler, "f") }, __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_componentLocale, "f").buttons.confirmButton)))), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeBpmAppDeclaration_shortcutsSrc, "f") })));
     }
     static get is() { return "gx-ide-bpm-app-declaration"; }
     static get encapsulation() { return "shadow"; }
@@ -155,24 +213,6 @@ export class GxIdeBpmAppDeclaration {
     static get assetsDirs() { return ["gx-ide-assets/bpm-app-declaration"]; }
     static get properties() {
         return {
-            "displayTitle": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "false",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true it displays the component title on the header"
-                },
-                "attribute": "display-title",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "application": {
                 "type": "unknown",
                 "mutable": true,
@@ -191,20 +231,20 @@ export class GxIdeBpmAppDeclaration {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Current application value"
+                    "text": "Current value of the application declaration. Keep in mind that this property will be used by\nthe host to initialize the component, meaning it will assign the current declaration value."
                 }
             },
-            "suggestApplicationsCallback": {
+            "cancelCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SuggestApplicationsCallback",
-                    "resolved": "(prefix: string) => Promise<string[]>",
+                    "original": "CancelCallback",
+                    "resolved": "() => Promise<void>",
                     "references": {
-                        "SuggestApplicationsCallback": {
+                        "CancelCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/application-declaration/bpm-app-declaration.tsx",
-                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::SuggestApplicationsCallback"
+                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::CancelCallback"
                         }
                     }
                 },
@@ -212,20 +252,20 @@ export class GxIdeBpmAppDeclaration {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked to get options for application input suggest"
+                    "text": "Callback invoked when user cancels application declaration"
                 }
             },
-            "selectApplicationCallback": {
+            "confirmCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SelectApplicationCallback",
-                    "resolved": "() => Promise<ApplicationDeclarationData>",
+                    "original": "ConfirmCallback",
+                    "resolved": "(data: ApplicationDeclarationData) => Promise<void>",
                     "references": {
-                        "SelectApplicationCallback": {
+                        "ConfirmCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/application-declaration/bpm-app-declaration.tsx",
-                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::SelectApplicationCallback"
+                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::ConfirmCallback"
                         }
                     }
                 },
@@ -233,20 +273,20 @@ export class GxIdeBpmAppDeclaration {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked to get access to selection application dialog"
+                    "text": "Callback invoked when user confirms application declaration"
                 }
             },
-            "selectMappingCallback": {
+            "getDataMappingCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SelectMappingCallback",
-                    "resolved": "(parameter: string) => Promise<string>",
+                    "original": "GetDataMappingCallback",
+                    "resolved": "(applicationName: string) => Promise<DataMappingData[]>",
                     "references": {
-                        "SelectMappingCallback": {
+                        "GetDataMappingCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/application-declaration/bpm-app-declaration.tsx",
-                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::SelectMappingCallback"
+                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::GetDataMappingCallback"
                         }
                     }
                 },
@@ -254,20 +294,20 @@ export class GxIdeBpmAppDeclaration {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when user press mapping auto-def button"
+                    "text": "Callback invoked when user select one of the options provided by the suggest"
                 }
             },
-            "confirmCallback": {
+            "selectApplicationCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ConfirmCallback",
-                    "resolved": "(data: ApplicationDeclarationData) => Promise<void>",
+                    "original": "SelectApplicationCallback",
+                    "resolved": "() => Promise<ApplicationDeclarationData>",
                     "references": {
-                        "ConfirmCallback": {
+                        "SelectApplicationCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/application-declaration/bpm-app-declaration.tsx",
-                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::ConfirmCallback"
+                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::SelectApplicationCallback"
                         }
                     }
                 },
@@ -275,20 +315,20 @@ export class GxIdeBpmAppDeclaration {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when user confirms application declaration"
+                    "text": "Callback invoked to get access to selection application dialog"
                 }
             },
-            "cancelCallback": {
+            "selectMappingCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CancelCallback",
-                    "resolved": "() => Promise<void>",
+                    "original": "SelectMappingCallback",
+                    "resolved": "(parameter: string) => Promise<string>",
                     "references": {
-                        "CancelCallback": {
+                        "SelectMappingCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/application-declaration/bpm-app-declaration.tsx",
-                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::CancelCallback"
+                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::SelectMappingCallback"
                         }
                     }
                 },
@@ -296,20 +336,20 @@ export class GxIdeBpmAppDeclaration {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when user cancels application declaration"
+                    "text": "Callback invoked when user press mapping auto-def button"
                 }
             },
-            "getDataMappingCallback": {
+            "suggestApplicationsCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GetDataMappingCallback",
-                    "resolved": "(applicationName: string) => Promise<ApplicationDeclarationData>",
+                    "original": "SuggestApplicationsCallback",
+                    "resolved": "(prefix: string) => Promise<string[]>",
                     "references": {
-                        "GetDataMappingCallback": {
+                        "SuggestApplicationsCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/application-declaration/bpm-app-declaration.tsx",
-                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::GetDataMappingCallback"
+                            "id": "src/components/bpm/application-declaration/bpm-app-declaration.tsx::SuggestApplicationsCallback"
                         }
                     }
                 },
@@ -317,14 +357,14 @@ export class GxIdeBpmAppDeclaration {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when user select one of the options provided by the suggest"
+                    "text": "Callback invoked to get options for application input suggest"
                 }
             }
         };
     }
     static get states() {
         return {
-            "suggestedApplications": {}
+            "applicationComboBoxModel": {}
         };
     }
     static get events() {
@@ -349,11 +389,6 @@ export class GxIdeBpmAppDeclaration {
             }];
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "application",
-                "methodName": "watchApplicationHandler"
-            }];
-    }
 }
+_GxIdeBpmAppDeclaration_componentLocale = new WeakMap(), _GxIdeBpmAppDeclaration_animateEmptyState = new WeakMap(), _GxIdeBpmAppDeclaration_shortcutsSrc = new WeakMap(), _GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP = new WeakMap(), _GxIdeBpmAppDeclaration_setAccessCaptions = new WeakMap(), _GxIdeBpmAppDeclaration_applicationInputChangedHandler = new WeakMap(), _GxIdeBpmAppDeclaration_cancelCallbackHandler = new WeakMap(), _GxIdeBpmAppDeclaration_clearApplicationHandler = new WeakMap(), _GxIdeBpmAppDeclaration_confirmCallbackHandler = new WeakMap(), _GxIdeBpmAppDeclaration_mapRelevantDataOptionsToComboBoxModel = new WeakMap(), _GxIdeBpmAppDeclaration_mapSuggestedApplicationsToComboBoxModel = new WeakMap(), _GxIdeBpmAppDeclaration_relevantDataInputHandler = new WeakMap(), _GxIdeBpmAppDeclaration_selectApplicationCallbackHandler = new WeakMap(), _GxIdeBpmAppDeclaration_selectMappingCallbackHandler = new WeakMap(), _GxIdeBpmAppDeclaration_setApplicationData = new WeakMap(), _GxIdeBpmAppDeclaration_suggestInputHandler = new WeakMap(), _GxIdeBpmAppDeclaration_updateApplicationData = new WeakMap(), _GxIdeBpmAppDeclaration_renderDataMappingsGrid = new WeakMap();
 //# sourceMappingURL=bpm-app-declaration.js.map