@genexus/genexus-ide-ui 0.0.66 → 0.0.68

package/dist/collection/components/_helpers/container/container.js

@@ -2,14 +2,17 @@ import { Host, h } from "@stencil/core";
 export class GxIdeContainer {
   constructor() {
     this.headingClasses = () => {
+      var _a;
       return {
         "heading": true,
         "heading--inactive": this.inactiveTitle,
         "heading--slimmer": this.titleType === "secondary",
         "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
         [`heading--justify-${this.headingJustify}`]: true,
-        "heading--no-padding": this.noHeadingPadding && !this.headingPaddingTop,
-        "heading--padding-top": this.headingPaddingTop
+        "heading--no-padding": this.noHeadingPadding,
+        "heading--padding-top": this.headingPaddingTop && ((_a = this.containerTitle) === null || _a === void 0 ? void 0 : _a.length) > 0,
+        "heading--form-text-height": this.titleHeightAsInput,
+        "heading--flex-row": this.flexRow
       };
     };
     this.contentClasses = () => {
@@ -59,6 +62,8 @@ export class GxIdeContainer {
     this.noHeadingPadding = false;
     this.headingPaddingTop = false;
     this.headingJustify = "center";
+    this.titleHeightAsInput = false;
+    this.flexRow = false;
     this.flexContent = false;
     this.noContentBorderTop = false;
     this.noContentPadding = false;
@@ -82,7 +87,7 @@ export class GxIdeContainer {
     this.hasOnlyContent = false;
     this.hasOnlyFooter = false;
   }
-  // 4.PUBLIC PROPERTY API /
+  // 4.PUBLIC PROPERTY API //
   // 5.EVENTS (EMIT) //
   // 6.COMPONENT LIFECYCLE EVENTS //
   componentWillLoad() {
@@ -123,6 +128,7 @@ export class GxIdeContainer {
     // has only content
     if (this.hasSlottedContent &&
       !this.containerTitle &&
+      !this.hasHeaderSlot &&
       !this.hasAboveFooterSlot &&
       !this.hasFooterSlot) {
       this.hasOnlyContent = true;
@@ -138,7 +144,7 @@ export class GxIdeContainer {
   render() {
     this.evaluateSections();
     const result = [
-      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gx-ide-title", { type: this.titleType, alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
+      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gx-ide-title", { class: "heading__title", type: this.titleType, alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
       this.hasSlottedContent ? (h("div", { class: this.contentClasses(), part: "content" }, h("slot", null))) : null,
       this.aboveFooter(),
       this.footer()
@@ -152,7 +158,9 @@ export class GxIdeContainer {
         "container--display-border-bottom": this.displayBorderBottom,
         "container--display-border-start": this.displayBorderStart,
         "container--overflow-hidden-y": this.footerSubtleShadow,
-        "container--only-content": this.hasOnlyContent
+        "container--only-content": this.hasOnlyContent,
+        "container--no-header": !this.hasHeaderSlot && !this.containerTitle,
+        "container--no-footer": !this.hasFooterSlot
       } }, result)));
   }
   static get is() { return "gx-ide-container"; }
@@ -438,6 +446,42 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "\"center\""
       },
+      "titleHeightAsInput": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It forces the .heading__title min-height to be as tall as the gxg-form-text height. This is useful when you are displaying two gx-ide-container's on the same row, both of them display a title, and one of them displays a gxg-form-text in the header (usually used to filter content). Without this property set to true, the .heading without a gxg-from-text would be shorter. At the time of writing, this is used on ww-images."
+        },
+        "attribute": "title-height-as-input",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "flexRow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the header (.heading) display flex:row, instad of the default flex:column."
+        },
+        "attribute": "flex-row",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "flexContent": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/_helpers/directory-selector/directory-selector.css

@@ -322,6 +322,7 @@ FORM ELEMENTS
 }
 .gxg-scrollbar::-webkit-scrollbar {
   width: var(--gxg-scrollbar-width, 6px);
+  height: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
   background-color: var(--gxg-scrollbar-track-background, --gray-02);

package/dist/collection/components/_helpers/entity-selector/entity-selector.css

@@ -322,6 +322,7 @@ FORM ELEMENTS
 }
 .gxg-scrollbar::-webkit-scrollbar {
   width: var(--gxg-scrollbar-width, 6px);
+  height: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
   background-color: var(--gxg-scrollbar-track-background, --gray-02);
@@ -365,6 +366,7 @@ FORM ELEMENTS
 }
 :host input {
   background-color: transparent;
+  width: 100%;
   flex: 1;
   border: 0;
   font-family: var(--font-family-primary);

package/dist/collection/components/_helpers/list-selector/list-selector-item/list-selector-item.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
 *,
 ::after,
 ::before {

package/dist/collection/components/_helpers/list-selector/list-selector.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
 *,
 ::after,
 ::before {

package/dist/collection/components/_helpers/status-buttons/gx-ide-status-buttons.js

@@ -11,7 +11,13 @@ export class GxIdeStatusButtons {
       }
     };
     this.evaluateLabel = (type) => {
-      const label = !this.minimal ? type : "";
+      let label = "";
+      if (!this.minimal && type !== "success") {
+        label = type;
+      }
+      else if (!this.minimal && type === "success") {
+        label = "succeeded";
+      }
       let refType;
       if (type === "error") {
         refType = this.errors;
@@ -20,13 +26,13 @@ export class GxIdeStatusButtons {
         refType = this.warnings;
       }
       else if (type === "success") {
-        refType = this.successes;
+        refType = this.succeeded;
       }
       if (this.minimal) {
         return refType === 0 ? "none" : `${refType}`;
       }
       else {
-        const suffix = type === "success" ? "es" : "s";
+        const suffix = type === "success" ? "" : "s";
         return refType === 1 ? `1 ${label}` : `${refType} ${label}${suffix}`;
       }
     };
@@ -37,7 +43,7 @@ export class GxIdeStatusButtons {
     this.active = false;
     this.errors = 0;
     this.warnings = 0;
-    this.successes = 0;
+    this.succeeded = 0;
     this.minimal = false;
     this.compact = false;
     this.noBorder = false;
@@ -58,7 +64,7 @@ export class GxIdeStatusButtons {
         "active-indicator": true
       } })), h("gx-ide-list-selector-item", { itemId: "warning", itemValue: this.evaluateLabel("warning"), icon: "gx-test/result-warning", iconColor: this.warnings === 0 ? "disabled" : "auto", class: { "warning": true, "not-zero": this.warnings !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
         "active-indicator": true
-      } })), h("gx-ide-list-selector-item", { itemId: "success", itemValue: this.evaluateLabel("success"), icon: "gx-test/result-ok", iconColor: this.successes === 0 ? "disabled" : "auto", class: { "success": true, "not-zero": this.successes !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
+      } })), h("gx-ide-list-selector-item", { itemId: "success", itemValue: this.evaluateLabel("success"), icon: "gx-test/result-ok", iconColor: this.succeeded === 0 ? "disabled" : "auto", class: { "success": true, "not-zero": this.succeeded !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
         "active-indicator": true
       } })))));
   }
@@ -130,7 +136,7 @@ export class GxIdeStatusButtons {
         "reflect": false,
         "defaultValue": "0"
       },
-      "successes": {
+      "succeeded": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -142,9 +148,9 @@ export class GxIdeStatusButtons {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The successes amount"
+          "text": "The succeded amount"
         },
-        "attribute": "successes",
+        "attribute": "succeeded",
         "reflect": false,
         "defaultValue": "0"
       },

package/dist/collection/components/_starting-template/gx-ide-assets/template/langs/template.lang.en.json

@@ -1,3 +1,10 @@
 {
-  "componentName": "Component Title"
+  "componentName": "Component Title",
+  "header": {},
+  "main": {},
+  "footer": {},
+  "loader": {
+    "title": "Loading...",
+    "cancelLabel": "Cancel"
+  }
 }

package/dist/collection/components/_starting-template/template.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
 }
 
 ch-grid-cell {
@@ -164,6 +175,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
 :host {
   display: block;
 }

package/dist/collection/components/_starting-template/template.js

@@ -7,14 +7,14 @@ import { Locale } from "../../common/locale";
 export class GxIdeTemplate {
   constructor() {
     this.renderedFirstTime = false;
-    this.mainTile = undefined;
+    this.displayTitle = false;
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
   }
   componentDidRender() {
-    if (this.renderedFirstTime) {
+    if (!this.renderedFirstTime) {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
       this.renderedFirstTime = true;
     }
@@ -24,7 +24,7 @@ export class GxIdeTemplate {
   // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { "container-title": "Header Title", slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer" }, "Create")))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("p", { style: { marginTop: "0" } }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer-end" }, "Create")))));
   }
   static get is() { return "gx-ide-template"; }
   static get encapsulation() { return "shadow"; }
@@ -41,22 +41,23 @@ export class GxIdeTemplate {
   static get assetsDirs() { return ["gx-ide-assets/template"]; }
   static get properties() {
     return {
-      "mainTile": {
-        "type": "string",
+      "displayTitle": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "false",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The main title"
+          "text": "If true it displays the component title on the header"
         },
-        "attribute": "main-tile",
-        "reflect": false
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/_test/test.css

@@ -2,7 +2,19 @@
   display: block;
 }
 
-.tree-container {
-  display: flex;
-  height: 200px;
+section {
+  border-top: 1px solid #ccc;
+  margin-top: 300px;
+  container-name: section;
+  container-type: inline-size;
+}
+
+gxg-combo-box {
+  opacity: 1;
+}
+
+@container section (width < 400px) {
+  gxg-combo-box {
+    opacity: 0.5;
+  }
 }

package/dist/collection/components/_test/test.js

@@ -21,12 +21,6 @@ export class GxIdeTest {
   */
     // 1.OWN PROPERTIES //
     this.renderedFirstTime = false;
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.checkAllHandler = () => {
-      this.treeViewEl.updateAllItemsProperties({ checked: true });
-    };
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   componentDidRender() {
@@ -35,97 +29,12 @@ export class GxIdeTest {
       this.renderedFirstTime = true;
     }
   }
-  componentDidLoad() {
-    this.treeViewEl.treeModel = [
-      {
-        id: "number-1",
-        caption: "number-1 label (always editable)",
-        class: "tree-view-item tree-view-item--success",
-        leaf: false,
-        leftImgSrc: "./objects/datastore",
-        editable: true,
-        checkbox: true,
-        items: [
-          {
-            id: "number-1-1",
-            caption: "number-1-1 (always editable)",
-            leaf: false,
-            leftImgSrc: "/build/ch-icon-assets/patterns",
-            editable: true,
-            checkbox: true,
-            items: [
-              {
-                id: "number-1-1-1",
-                caption: "number-1-1-1",
-                leaf: true,
-                checkbox: true,
-                leftImgSrc: "./objects/knowledge-base"
-              },
-              {
-                id: "number-1-1-2",
-                caption: "number-1-1-2",
-                leaf: false,
-                checkbox: true,
-                leftImgSrc: "./objects/knowledge-base",
-                items: [
-                  {
-                    id: "number-1-1-2-1",
-                    caption: "number-1-1-2-1 (lazy, drag disabled)",
-                    leaf: false,
-                    leftImgSrc: "./objects/knowledge-base",
-                    lazy: true,
-                    checkbox: true,
-                    dragDisabled: true,
-                    toggleCheckboxes: true
-                  },
-                  {
-                    id: "number-1-1-2-2",
-                    caption: "number-1-1-2-2",
-                    leaf: true,
-                    checkbox: true,
-                    leftImgSrc: "/build/ch-icon-assets/java"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            id: "number-1-2",
-            caption: "number-1-2",
-            leaf: true,
-            checkbox: true,
-            leftImgSrc: "./objects/knowledge-base"
-          }
-        ]
-      },
-      {
-        id: "number-2",
-        caption: "number-2",
-        class: "tree-view-item tree-view-item--custom-image",
-        checkbox: true,
-        leaf: false,
-        items: [
-          {
-            id: "number-2-1",
-            caption: "number-2-1",
-            leaf: true,
-            checkbox: true,
-            leftImgSrc: "/build/ch-icon-assets/java"
-          },
-          {
-            id: "number-2-2",
-            caption: "number-2-2",
-            leaf: true,
-            checkbox: true,
-            leftImgSrc: "./objects/knowledge-base"
-          }
-        ]
-      }
-    ];
-  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h("div", null, h("div", { class: "tree-container" }, h("gxg-tree-view", { ref: el => (this.treeViewEl = el) })), h("label", null, "Check item", h("input", { type: "checkbox", name: "", id: "check-all", onInput: this.checkAllHandler }))));
+    return (h("div", { class: "container" }, h("h2", null, "combo-box"), h("p", null, "AAA Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor est culpa laborum illo, tenetur, quaerat quae eum rem magni voluptatem quasi eos repellendus nostrum commodi. Quasi aperiam eveniet dicta id."), h("section", null, h("gxg-combo-box", null, h("gxg-combo-box-item", { value: "manzana" }, "Manzana"), h("gxg-combo-box-item", { value: "banana" }, "Banana"), h("gxg-combo-box-item", { value: "mandarina" }, "Mandarina"), h("gxg-combo-box-item", { value: "uva" }, "Uvas")))));
   }
   static get is() { return "gx-ide-test"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
 }
 
 ch-grid-cell {
@@ -164,6 +175,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
 :host {
   display: block;
   /*data mappings*/

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

@@ -98,6 +98,7 @@ export class GxIdeBpmAppDeclaration {
       }))));
     };
     this.suggestedApplications = undefined;
+    this.displayTitle = false;
     this.application = undefined;
     this.suggestApplicationsCallback = undefined;
     this.selectApplicationCallback = undefined;
@@ -127,7 +128,7 @@ export class GxIdeBpmAppDeclaration {
   // 10.RENDER() FUNCTION //
   render() {
     var _a;
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, footerSubtleShadow: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this._componentLocale.header.applicationLabel }, 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))), h("div", { class: "data-mappings" }, this.renderDataMappingsGrid()), h("gxg-button", { type: "secondary-text-only", slot: "footer-end", onClick: this.cancelCallbackHandler }, this._componentLocale.buttons.cancelButton), h("gxg-button", { type: "primary-text-only", slot: "footer-end", icon: "general/datastore", onClick: this.confirmCallbackHandler }, this._componentLocale.buttons.confirmButton)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, footerSubtleShadow: 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))), h("div", { class: "data-mappings" }, this.renderDataMappingsGrid()), h("gxg-button", { type: "secondary-text-only", slot: "footer-end", onClick: this.cancelCallbackHandler }, this._componentLocale.buttons.cancelButton), h("gxg-button", { type: "primary-text-only", slot: "footer-end", icon: "general/datastore", onClick: this.confirmCallbackHandler }, this._componentLocale.buttons.confirmButton)))));
   }
   static get is() { return "gx-ide-bpm-app-declaration"; }
   static get encapsulation() { return "shadow"; }
@@ -144,6 +145,24 @@ export class GxIdeBpmAppDeclaration {
   static get assetsDirs() { return ["gx-ide-assets/bpm-app-declaration"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "application": {
         "type": "unknown",
         "mutable": true,

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

@@ -1,7 +1,6 @@
 {
-  "header": {
-    "applicationLabel": "Application Declaration"
-  },
+  "componentName": "Application Declaration",
+  "header": {},
   "dataMappings": {
     "title": "Data Mappings",
     "firstColName": "Primary Key Attribute",

package/dist/collection/components/create-kb-from-server/create-kb-from-server.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
 }
 
 ch-grid-cell {
@@ -164,6 +175,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* 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.
+*/
 :host {
   display: block;
   border: 1px solid var(--gxg-border-color--regular);