@genexus/genexus-ide-ui 1.1.3 → 1.1.5

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

@@ -1,234 +1,237 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, getAssetPath, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './MERCURY_ASSETS.js';
 import { L as Locale } from './locale.js';
 import { c as config } from './config.js';
-import { r as renderComboItems } from './render-combo-items.js';
-import { d as defineCustomElement$3 } from './container.js';
-import { d as defineCustomElement$2 } from './title.js';
+import { d as defineCustomElement$2 } from './gx-ide-empty-state2.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" });
-};
+const bpmAppDeclarationCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.pill-tag{padding:1px 4px;border-radius:2px;min-inline-size:40px;text-align:center;margin-inline-end:10px;font-size:11px}.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}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content: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(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){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(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:grid;block-size:100%;grid-template-rows:max-content 1fr max-content;overflow:auto}.section{display:contents}.header{display:grid;grid-template-columns:1fr max-content}.data-mapping-grid-container,.data-mapping-grid-container .field{overflow:auto;block-size:100%}.tabular-grid-application-declaration{overflow:auto}ch-tabular-grid.empty-result::part(main){overflow:hidden}.pill-tag{min-inline-size:40px;margin-inline-end:10px}.tabular-grid-application-declaration ch-tabular-grid-cell:is(:nth-child(2)){--control__border-width:0;--control__border-color:transparent;--control__border-radius:0;padding-block:0;padding-inline:0;padding-block:0;padding-inline:0;--control__padding-inline:var(--grid-cell__padding-inline);display:grid;align-items:stretch;justify-content:stretch;min-inline-size:0}.tabular-grid-application-declaration ch-tabular-grid-cell:is(:nth-child(2)):hover{outline:var(--focus__outline-width) var(--focus__outline-style) var(--control__border-color--hover);outline-offset:var(--focus__outline-offset)}.tabular-grid-cell:nth-child(2){padding:0 !important;display:grid;align-items:stretch;justify-content:stretch;--ds-focus-border-width:none}.tabular-grid-cell:nth-child(3){padding:0 !important;align-items:center !important;justify-content:center !important}.tabular-grid{overflow:auto}";
 
-/* 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;
+var __classPrivateFieldGet = (undefined && undefined.__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);
 };
-
-const bpmAppDeclarationCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.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}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content: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(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){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(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:host{display:block;}:host .header{display:flex;flex-direction:column;gap:var(--gx-ide-grid-row-gap)}:host .header__first-row{display:flex;flex-direction:row;gap:var(--gx-ide-grid-column-gap)}:host .header__first-row .application-suggest{flex:1}:host .data-mappings{display:grid}:host .row-button{display:flex;align-items:center}.tabular-grid-application-declaration ch-tabular-grid-cell:is(:nth-child(2)){--control__border-width:0;--control__border-color:transparent;--control__border-radius:0;padding-block:0;padding-inline:0;padding-block:0;padding-inline:0;--control__padding-inline:var(--grid-cell__padding-inline);display:grid;align-items:stretch;justify-content:stretch}.tabular-grid-application-declaration ch-tabular-grid-cell:is(:nth-child(2)):hover{outline:var(--focus__outline-width) var(--focus__outline-style) var(--control__border-color--hover);outline-offset:var(--focus__outline-offset)}gx-ide-container::part(content){display:grid}gxg-combo-box::part(input-input){border:none;background-color:transparent;top:2px}.tabular-grid-cell:nth-child(2){padding:0 !important;display:grid;align-items:stretch;justify-content:stretch;--ds-focus-border-width:none}.tabular-grid-cell:nth-child(3){padding:0 !important;align-items:center !important;justify-content:center !important}.tabular-grid{overflow:auto}";
-
+var __classPrivateFieldSet = (undefined && undefined.__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;
 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
+};
 const GxIdeBpmAppDeclaration$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeBpmAppDeclaration extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        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 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", {
-        "displayTitle": [4, "display-title"],
         "application": [1040],
-        "suggestApplicationsCallback": [16],
-        "selectApplicationCallback": [16],
-        "selectMappingCallback": [16],
-        "confirmCallback": [16],
         "cancelCallback": [16],
+        "confirmCallback": [16],
         "getDataMappingCallback": [16],
-        "suggestedApplications": [32]
-    }, undefined, {
-        "application": ["watchApplicationHandler"]
+        "selectApplicationCallback": [16],
+        "selectMappingCallback": [16],
+        "suggestApplicationsCallback": [16],
+        "applicationComboBoxModel": [32]
     }]);
+_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();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-bpm-app-declaration", "gx-ide-container", "gx-ide-title"];
+    const components = ["gx-ide-bpm-app-declaration", "gx-ide-empty-state"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-bpm-app-declaration":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxIdeBpmAppDeclaration$1);
             }
             break;
-        case "gx-ide-container":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "gx-ide-title":
+        case "gx-ide-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }