@genexus/genexus-ide-ui 1.0.1 → 1.0.3

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

@@ -6,7 +6,6 @@ import { config } from "../../../common/config";
 import { renderSuggestLists } from "../../../common/render-suggest";
 import { renderComboItems } from "../../../common/render-combo-items";
 import { convertSuggestedApplicationsToSuggestItems } from "./helpers";
-import { gridCommon } from "../../../common/grid";
 const CSS_BUNDLES = [
     "resets/box-sizing",
     // "utils/form",
@@ -102,7 +101,7 @@ export class GxIdeBpmAppDeclaration {
             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: gridCommon.colSize.common }), h("ch-tabular-grid-column", { class: "tabular-grid-column", columnName: this._componentLocale.dataMappings.secondColName, settingable: false, sortable: false, size: gridCommon.colSize.common }), h("ch-tabular-grid-column", { class: "tabular-grid-column", settingable: false, sortable: false, size: gridCommon.colSize.auto })), this.application.mappings.map((obj, index) => {
+                    : 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" }))));
             })));

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

@@ -1 +1 @@
-{"version":3,"file":"bpm-app-declaration.js","sourceRoot":"","sources":["../../../../src/components/bpm/application-declaration/bpm-app-declaration.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n  getAssetPath\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { MercuryBundles } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../../common/locale\";\nimport { config } from \"../../../common/config\";\nimport { SuggestData } from \"@genexus/chameleon-controls-library/dist/types/deprecated-components/suggest/ch-suggest\";\nimport { renderSuggestLists } from \"../../../common/render-suggest\";\nimport { renderComboItems } from \"../../../common/render-combo-items\";\nimport { convertSuggestedApplicationsToSuggestItems } from \"./helpers\";\nimport { gridCommon } from \"../../../common/grid\";\nimport { GxOption } from \"../../../common/types\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  // \"utils/form\",\n  // \"utils/layout\",\n  // \"utils/typography\",\n  // \"components/button\",\n  // \"components/checkbox\",\n  // \"components/edit\",\n  \"components/tabular-grid\"\n];\n\n@Component({\n  tag: \"gx-ide-bpm-app-declaration\",\n  styleUrl: \"bpm-app-declaration.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/bpm-app-declaration\"]\n})\nexport class GxIdeBpmAppDeclaration {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  private shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/bpm-app-declaration/shortcuts.json`\n  );\n\n  /**\n   * The state of the actual application. Used to add a new 'Relevant data' option on 'selectMappingCallback', and update the application with the new option\n   */\n  private applicationState: ApplicationDeclarationData;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeBpmAppDeclarationElement;\n  private applicationSuggestEl: HTMLChSuggestElement;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * Possible suggestions for the applications\n   */\n  @State() suggestedApplications: SuggestData;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Current application value\n   */\n  @Prop({ mutable: true }) application: ApplicationDeclarationData;\n\n  @Watch(\"application\")\n  watchApplicationHandler(newApplication: ApplicationDeclarationData) {\n    this.applicationState = newApplication;\n  }\n\n  /**\n   * Callback invoked to get options for application input suggest\n   */\n  @Prop() readonly suggestApplicationsCallback: SuggestApplicationsCallback;\n\n  /**\n   * Callback invoked to get access to selection application dialog\n   */\n  @Prop() readonly selectApplicationCallback: SelectApplicationCallback;\n\n  /**\n   * Callback invoked when user press mapping auto-def button\n   */\n  @Prop() readonly selectMappingCallback: SelectMappingCallback;\n\n  /**\n   * Callback invoked when user confirms application declaration\n   */\n  @Prop() readonly confirmCallback: ConfirmCallback;\n\n  /**\n   * Callback invoked when user cancels application declaration\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback invoked when user select one of the options provided by the suggest\n   */\n  @Prop() readonly getDataMappingCallback: GetDataMappingCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.applicationState = this.application;\n  }\n\n  async componentDidLoad() {\n    /*  this.applicationSuggestValueChangedHandler(this.applicationText); */\n    this.listenApplicationSelected();\n    this.applicationSuggestEl.focus();\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private listenApplicationSelected = async () => {\n    this.applicationSuggestEl.addEventListener(\"itemSelected\", (e: any) => {\n      this.getDataMappingCallbackHandler(e.detail.value);\n    });\n  };\n\n  private applicationSuggestValueChangedHandler = async (\n    e: CustomEvent<string>\n  ) => {\n    const value = e.detail;\n    this.suggestApplicationsCallback(value)\n      .then(result => {\n        this.suggestedApplications =\n          convertSuggestedApplicationsToSuggestItems(result);\n      })\n      .catch(() => {\n        // to do\n      });\n  };\n\n  private getDataMappingCallbackHandler = async (applicationName: string) => {\n    this.application = await this.getDataMappingCallback(applicationName);\n  };\n\n  private selectApplicationCallbackHandler = async () => {\n    const callbackResult = await this.selectApplicationCallback();\n    if (callbackResult) {\n      this.application = callbackResult;\n    }\n  };\n\n  private confirmCallbackHandler = async () => {\n    await this.confirmCallback(this.application);\n  };\n\n  private cancelCallbackHandler = async () => {\n    await this.cancelCallback();\n  };\n\n  private selectMappingCallbackHandler = (parameter: string) => async () => {\n    if (this.selectMappingCallback) {\n      const newRelevantData = await this.selectMappingCallback(parameter);\n      if (newRelevantData) {\n        // update actual application with new relevant data option\n        // first find mapping index\n        const dataIndex: number = this.applicationState.mappings.findIndex(\n          mapping => {\n            return mapping.parameter === parameter;\n          }\n        );\n        if (dataIndex !== -1) {\n          // new relevant data could be new, or already existent.\n          const found = this.applicationState.mappings[\n            dataIndex\n          ].relevantDataOptions.find(option => {\n            return option === newRelevantData;\n          });\n          if (!found) {\n            // new. add.\n            this.applicationState.mappings[dataIndex].relevantDataOptions.push(\n              newRelevantData\n            );\n          }\n          // always set this data as selected\n          this.applicationState.mappings[dataIndex].relevantData =\n            newRelevantData;\n          // update\n          this.application = { ...this.applicationState };\n        }\n      }\n    }\n  };\n\n  private dataOptionsToComboItems = (\n    relevantDataOptions: string[]\n  ): GxOption[] => {\n    const gxOptions: GxOption[] = [\n      { id: this._componentLocale.dataMappings.emptyOption }\n    ];\n    relevantDataOptions.forEach(relevantOption => {\n      const gxOption: GxOption = { id: relevantOption };\n      gxOptions.push(gxOption);\n    });\n    return gxOptions;\n  };\n\n  private clearApplicationHandler = () => {\n    this.application = {\n      application: undefined,\n      mappings: []\n    };\n  };\n\n  private renderDataMappingsGrid = (): Element => {\n    return (\n      <ch-tabular-grid\n        class=\"tabular-grid tabular-grid-application-declaration\"\n        part=\"ch-grid-data-mappings\"\n      >\n        <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            columnName={\n              this.application.application?.typeIcon === \"objects/transaction\"\n                ? this._componentLocale.dataMappings.firstColName\n                : this._componentLocale.dataMappings.firstColNameParameter\n            }\n            settingable={false}\n            size={gridCommon.colSize.common}\n          ></ch-tabular-grid-column>\n\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            columnName={this._componentLocale.dataMappings.secondColName}\n            settingable={false}\n            sortable={false}\n            size={gridCommon.colSize.common}\n          ></ch-tabular-grid-column>\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            settingable={false}\n            sortable={false}\n            size={gridCommon.colSize.auto}\n          ></ch-tabular-grid-column>\n        </ch-tabular-grid-columnset>\n\n        {this.application.mappings.map((obj: DataMappingData, index) => (\n          <ch-tabular-grid-row\n            class=\"tabular-grid-row\"\n            rowId={index + obj.parameter}\n          >\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              {`${obj.access}: ${obj.parameter}`}\n            </ch-tabular-grid-cell>\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              <gxg-combo-box disableFilter value={obj.relevantData}>\n                {renderComboItems(\n                  this.dataOptionsToComboItems(obj.relevantDataOptions) ?? []\n                )}\n              </gxg-combo-box>\n              {/* <div class=\"row-button\">{obj.relevantData}</div> */}\n            </ch-tabular-grid-cell>\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              <gxg-button\n                data-index={index}\n                type=\"secondary-icon-only\"\n                icon=\"gemini-tools/add\"\n                onClick={this.selectMappingCallbackHandler(obj.parameter)}\n                class=\"select-mapping-callback-button\"\n              ></gxg-button>\n            </ch-tabular-grid-cell>\n          </ch-tabular-grid-row>\n        ))}\n      </ch-tabular-grid>\n    );\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noAboveFooterPadding\n            noHeadingBorder\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n          >\n            <header slot=\"header\" class=\"header\">\n              <div class=\"header__first-row\">\n                <gxg-suggest class=\"application-suggest\">\n                  <ch-suggest\n                    value={this.application.application?.name || null}\n                    onValueChanged={this.applicationSuggestValueChangedHandler}\n                    ref={el =>\n                      (this.applicationSuggestEl = el as HTMLChSuggestElement)\n                    }\n                    part=\"application-suggest\"\n                  >\n                    {renderSuggestLists(this.suggestedApplications)}\n                  </ch-suggest>\n                </gxg-suggest>\n                <gxg-button\n                  type=\"secondary-icon-only\"\n                  icon=\"gemini-tools/show-more-horizontal\"\n                  onClick={this.selectApplicationCallbackHandler}\n                  class=\"selector-dialog-button\"\n                  part=\"open-selector-dialog-button\"\n                ></gxg-button>\n                <gxg-button\n                  type=\"outlined\"\n                  part=\"clear-application-button\"\n                  onClick={this.clearApplicationHandler}\n                >\n                  Clear\n                </gxg-button>\n              </div>\n              <div class=\"header__second-row\">\n                <gx-ide-title type=\"secondary\">\n                  {this._componentLocale.dataMappings.title}\n                </gx-ide-title>\n              </div>\n            </header>\n\n            {this.renderDataMappingsGrid()}\n            <gxg-button\n              type=\"secondary-text-only\"\n              slot=\"footer-end\"\n              onClick={this.cancelCallbackHandler}\n              part=\"cancel-button\"\n            >\n              {this._componentLocale.buttons.cancelButton}\n            </gxg-button>\n            <gxg-button\n              type=\"primary-text-only\"\n              slot=\"footer-end\"\n              icon=\"general/datastore\"\n              onClick={this.confirmCallbackHandler}\n              part=\"confirm-button\"\n            >\n              {this._componentLocale.buttons.confirmButton}\n            </gxg-button>\n          </gx-ide-container>\n        </div>\n        <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n      </Host>\n    );\n  }\n}\n\nexport type ApplicationDeclarationData = {\n  application?: ApplicationData;\n  mappings: DataMappingData[];\n};\nexport type ApplicationData = {\n  name: string;\n  typeIcon: string;\n};\n\nexport type DataMappingData = {\n  parameter: string;\n  access: \"in\" | \"out\" | \"in-out\";\n  relevantDataOptions: string[];\n  relevantData?: string;\n};\n\nexport type SuggestApplicationsCallback = (\n  prefix: string\n) => Promise<string[] | undefined>;\n\nexport type SelectApplicationCallback = () => Promise<\n  ApplicationDeclarationData | undefined\n>;\n\nexport type SelectMappingCallback = (parameter: string) => Promise<string>;\n\nexport type ConfirmCallback = (\n  data: ApplicationDeclarationData\n) => Promise<void>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type GetDataMappingCallback = (\n  applicationName: string\n) => Promise<ApplicationDeclarationData>;\n"]}
+{"version":3,"file":"bpm-app-declaration.js","sourceRoot":"","sources":["../../../../src/components/bpm/application-declaration/bpm-app-declaration.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n  getAssetPath\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { MercuryBundles } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../../common/locale\";\nimport { config } from \"../../../common/config\";\nimport { SuggestData } from \"@genexus/chameleon-controls-library/dist/types/deprecated-components/suggest/ch-suggest\";\nimport { renderSuggestLists } from \"../../../common/render-suggest\";\nimport { renderComboItems } from \"../../../common/render-combo-items\";\nimport { convertSuggestedApplicationsToSuggestItems } from \"./helpers\";\nimport { GxOption } from \"../../../common/types\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  // \"utils/form\",\n  // \"utils/layout\",\n  // \"utils/typography\",\n  // \"components/button\",\n  // \"components/checkbox\",\n  // \"components/edit\",\n  \"components/tabular-grid\"\n];\n\n@Component({\n  tag: \"gx-ide-bpm-app-declaration\",\n  styleUrl: \"bpm-app-declaration.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/bpm-app-declaration\"]\n})\nexport class GxIdeBpmAppDeclaration {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  private shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/bpm-app-declaration/shortcuts.json`\n  );\n\n  /**\n   * The state of the actual application. Used to add a new 'Relevant data' option on 'selectMappingCallback', and update the application with the new option\n   */\n  private applicationState: ApplicationDeclarationData;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeBpmAppDeclarationElement;\n  private applicationSuggestEl: HTMLChSuggestElement;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * Possible suggestions for the applications\n   */\n  @State() suggestedApplications: SuggestData;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Current application value\n   */\n  @Prop({ mutable: true }) application: ApplicationDeclarationData;\n\n  @Watch(\"application\")\n  watchApplicationHandler(newApplication: ApplicationDeclarationData) {\n    this.applicationState = newApplication;\n  }\n\n  /**\n   * Callback invoked to get options for application input suggest\n   */\n  @Prop() readonly suggestApplicationsCallback: SuggestApplicationsCallback;\n\n  /**\n   * Callback invoked to get access to selection application dialog\n   */\n  @Prop() readonly selectApplicationCallback: SelectApplicationCallback;\n\n  /**\n   * Callback invoked when user press mapping auto-def button\n   */\n  @Prop() readonly selectMappingCallback: SelectMappingCallback;\n\n  /**\n   * Callback invoked when user confirms application declaration\n   */\n  @Prop() readonly confirmCallback: ConfirmCallback;\n\n  /**\n   * Callback invoked when user cancels application declaration\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback invoked when user select one of the options provided by the suggest\n   */\n  @Prop() readonly getDataMappingCallback: GetDataMappingCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.applicationState = this.application;\n  }\n\n  async componentDidLoad() {\n    /*  this.applicationSuggestValueChangedHandler(this.applicationText); */\n    this.listenApplicationSelected();\n    this.applicationSuggestEl.focus();\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private listenApplicationSelected = async () => {\n    this.applicationSuggestEl.addEventListener(\"itemSelected\", (e: any) => {\n      this.getDataMappingCallbackHandler(e.detail.value);\n    });\n  };\n\n  private applicationSuggestValueChangedHandler = async (\n    e: CustomEvent<string>\n  ) => {\n    const value = e.detail;\n    this.suggestApplicationsCallback(value)\n      .then(result => {\n        this.suggestedApplications =\n          convertSuggestedApplicationsToSuggestItems(result);\n      })\n      .catch(() => {\n        // to do\n      });\n  };\n\n  private getDataMappingCallbackHandler = async (applicationName: string) => {\n    this.application = await this.getDataMappingCallback(applicationName);\n  };\n\n  private selectApplicationCallbackHandler = async () => {\n    const callbackResult = await this.selectApplicationCallback();\n    if (callbackResult) {\n      this.application = callbackResult;\n    }\n  };\n\n  private confirmCallbackHandler = async () => {\n    await this.confirmCallback(this.application);\n  };\n\n  private cancelCallbackHandler = async () => {\n    await this.cancelCallback();\n  };\n\n  private selectMappingCallbackHandler = (parameter: string) => async () => {\n    if (this.selectMappingCallback) {\n      const newRelevantData = await this.selectMappingCallback(parameter);\n      if (newRelevantData) {\n        // update actual application with new relevant data option\n        // first find mapping index\n        const dataIndex: number = this.applicationState.mappings.findIndex(\n          mapping => {\n            return mapping.parameter === parameter;\n          }\n        );\n        if (dataIndex !== -1) {\n          // new relevant data could be new, or already existent.\n          const found = this.applicationState.mappings[\n            dataIndex\n          ].relevantDataOptions.find(option => {\n            return option === newRelevantData;\n          });\n          if (!found) {\n            // new. add.\n            this.applicationState.mappings[dataIndex].relevantDataOptions.push(\n              newRelevantData\n            );\n          }\n          // always set this data as selected\n          this.applicationState.mappings[dataIndex].relevantData =\n            newRelevantData;\n          // update\n          this.application = { ...this.applicationState };\n        }\n      }\n    }\n  };\n\n  private dataOptionsToComboItems = (\n    relevantDataOptions: string[]\n  ): GxOption[] => {\n    const gxOptions: GxOption[] = [\n      { id: this._componentLocale.dataMappings.emptyOption }\n    ];\n    relevantDataOptions.forEach(relevantOption => {\n      const gxOption: GxOption = { id: relevantOption };\n      gxOptions.push(gxOption);\n    });\n    return gxOptions;\n  };\n\n  private clearApplicationHandler = () => {\n    this.application = {\n      application: undefined,\n      mappings: []\n    };\n  };\n\n  private renderDataMappingsGrid = (): Element => {\n    return (\n      <ch-tabular-grid\n        class=\"tabular-grid tabular-grid-application-declaration\"\n        part=\"ch-grid-data-mappings\"\n      >\n        <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            columnName={\n              this.application.application?.typeIcon === \"objects/transaction\"\n                ? this._componentLocale.dataMappings.firstColName\n                : this._componentLocale.dataMappings.firstColNameParameter\n            }\n            settingable={false}\n            size={config.tabularGrid.colSize.common}\n          ></ch-tabular-grid-column>\n\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            columnName={this._componentLocale.dataMappings.secondColName}\n            settingable={false}\n            sortable={false}\n            size={config.tabularGrid.colSize.common}\n          ></ch-tabular-grid-column>\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            settingable={false}\n            sortable={false}\n            size={config.tabularGrid.colSize.auto}\n          ></ch-tabular-grid-column>\n        </ch-tabular-grid-columnset>\n\n        {this.application.mappings.map((obj: DataMappingData, index) => (\n          <ch-tabular-grid-row\n            class=\"tabular-grid-row\"\n            rowId={index + obj.parameter}\n          >\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              {`${obj.access}: ${obj.parameter}`}\n            </ch-tabular-grid-cell>\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              <gxg-combo-box disableFilter value={obj.relevantData}>\n                {renderComboItems(\n                  this.dataOptionsToComboItems(obj.relevantDataOptions) ?? []\n                )}\n              </gxg-combo-box>\n              {/* <div class=\"row-button\">{obj.relevantData}</div> */}\n            </ch-tabular-grid-cell>\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              <gxg-button\n                data-index={index}\n                type=\"secondary-icon-only\"\n                icon=\"gemini-tools/add\"\n                onClick={this.selectMappingCallbackHandler(obj.parameter)}\n                class=\"select-mapping-callback-button\"\n              ></gxg-button>\n            </ch-tabular-grid-cell>\n          </ch-tabular-grid-row>\n        ))}\n      </ch-tabular-grid>\n    );\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noAboveFooterPadding\n            noHeadingBorder\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n          >\n            <header slot=\"header\" class=\"header\">\n              <div class=\"header__first-row\">\n                <gxg-suggest class=\"application-suggest\">\n                  <ch-suggest\n                    value={this.application.application?.name || null}\n                    onValueChanged={this.applicationSuggestValueChangedHandler}\n                    ref={el =>\n                      (this.applicationSuggestEl = el as HTMLChSuggestElement)\n                    }\n                    part=\"application-suggest\"\n                  >\n                    {renderSuggestLists(this.suggestedApplications)}\n                  </ch-suggest>\n                </gxg-suggest>\n                <gxg-button\n                  type=\"secondary-icon-only\"\n                  icon=\"gemini-tools/show-more-horizontal\"\n                  onClick={this.selectApplicationCallbackHandler}\n                  class=\"selector-dialog-button\"\n                  part=\"open-selector-dialog-button\"\n                ></gxg-button>\n                <gxg-button\n                  type=\"outlined\"\n                  part=\"clear-application-button\"\n                  onClick={this.clearApplicationHandler}\n                >\n                  Clear\n                </gxg-button>\n              </div>\n              <div class=\"header__second-row\">\n                <gx-ide-title type=\"secondary\">\n                  {this._componentLocale.dataMappings.title}\n                </gx-ide-title>\n              </div>\n            </header>\n\n            {this.renderDataMappingsGrid()}\n            <gxg-button\n              type=\"secondary-text-only\"\n              slot=\"footer-end\"\n              onClick={this.cancelCallbackHandler}\n              part=\"cancel-button\"\n            >\n              {this._componentLocale.buttons.cancelButton}\n            </gxg-button>\n            <gxg-button\n              type=\"primary-text-only\"\n              slot=\"footer-end\"\n              icon=\"general/datastore\"\n              onClick={this.confirmCallbackHandler}\n              part=\"confirm-button\"\n            >\n              {this._componentLocale.buttons.confirmButton}\n            </gxg-button>\n          </gx-ide-container>\n        </div>\n        <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n      </Host>\n    );\n  }\n}\n\nexport type ApplicationDeclarationData = {\n  application?: ApplicationData;\n  mappings: DataMappingData[];\n};\nexport type ApplicationData = {\n  name: string;\n  typeIcon: string;\n};\n\nexport type DataMappingData = {\n  parameter: string;\n  access: \"in\" | \"out\" | \"in-out\";\n  relevantDataOptions: string[];\n  relevantData?: string;\n};\n\nexport type SuggestApplicationsCallback = (\n  prefix: string\n) => Promise<string[] | undefined>;\n\nexport type SelectApplicationCallback = () => Promise<\n  ApplicationDeclarationData | undefined\n>;\n\nexport type SelectMappingCallback = (parameter: string) => Promise<string>;\n\nexport type ConfirmCallback = (\n  data: ApplicationDeclarationData\n) => Promise<void>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type GetDataMappingCallback = (\n  applicationName: string\n) => Promise<ApplicationDeclarationData>;\n"]}

package/dist/collection/components/bpm/assign-roles/bpm-assign-roles.css

@@ -318,6 +318,66 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+: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;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +569,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/export-xpdl/bpm-export-xpdl.css

@@ -318,6 +318,66 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+: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;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +569,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/import-files/bpm-import-files.css

@@ -318,6 +318,66 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+: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;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +569,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/import-gxpm/bpm-import-gxpm.css

@@ -318,6 +318,66 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+: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;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +569,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/objects-selector/bpm-objects-selector.css

@@ -318,6 +318,66 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+: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;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +569,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/bpm/timer-duration/bpm-timer-duration.css

@@ -318,6 +318,66 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+: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;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +569,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles