@genexus/genexus-ide-ui 0.0.83 → 0.0.85

package/dist/collection/components/_helpers/card/card.css

@@ -0,0 +1,213 @@
+/*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;
+}
+
+.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;
+}
+
+/* Grids */
+.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 {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 99;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+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 {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  box-shadow: var(--box-shadow-01);
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
+  line-height: 1.6em;
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-main::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-main::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-main .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+.gx-ide-overflow {
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-overflow::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-overflow::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-overflow .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/*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/_helpers/card/card.js

@@ -0,0 +1,120 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../../common/locale";
+export class GxIdeCard {
+  constructor() {
+    this.renderedFirstTime = false;
+    this.cardTitle = undefined;
+    this.cardSubTitle = undefined;
+    this.icon = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
+  // 10.RENDER() FUNCTION //
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "gx-ide-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/card"]; }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The card title (required)"
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardSubTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An optional sub-title that will show on the oposite side of the main title."
+        },
+        "attribute": "card-sub-title",
+        "reflect": false
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An optional icon that will show before the title"
+        },
+        "attribute": "icon",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "description",
+              "text": "Gets fired when the component has rendered for the first time."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/_helpers/card/gx-ide-assets/card/langs/card.lang.en.json

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

package/dist/collection/components/_helpers/card/gx-ide-assets/card/langs/card.lang.ja.json

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

package/dist/collection/components/_helpers/card/gx-ide-assets/card/langs/card.lang.zh.json

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

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

@@ -20,7 +20,7 @@ export class GxIdeTitle {
     return (h(Host, { class: {
         [`alignment--${this.alignment}`]: true,
         [`title-type--${this.type}`]: true
-      } }, h("gxg-title", { type: this.geminiType }, h("slot", null))));
+      } }, h("gxg-title", { type: this.geminiType, alignment: this.alignment }, h("slot", null))));
   }
   static get is() { return "gx-ide-title"; }
   static get encapsulation() { return "shadow"; }

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

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

package/dist/collection/components/ai-assistant/ai-assistant.css

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

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

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

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

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

package/dist/collection/components/dashboard-home/dashboard-home.css

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

package/dist/collection/components/dashboard-home/dashboard-home.js

@@ -89,7 +89,7 @@ export class GxIdeDashboardHome {
   }
   // 11.RENDER() MAIN FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component", id: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("div", { class: "grid grid--basic" }, h("div", { class: "kb gxi-overflow-auto" }, h("gxg-title-editable", { value: this.kb.name, "disable-edition": this.editingKbName, "click-to-edit": true, fluid: true, ref: el => (this.kbNameEl = el), onValueChanged: this.handleKbNameChange, focusType: "text", debounce: true }), h("div", { class: "align-center kb-detail" }, h("gxg-pill", { id: "pill", class: "version-pill", type: "static", icon: "objects/procedure" }, this._componentLocale.version, ": ", this.kb.currentVersion), h("gxg-text", { class: "display-inline", type: "text-regular", padding: "s", italic: true }, this._componentLocale.created, ":", " ", formatDate(this.kb.created, "date-time-short"), " -", " ", this._componentLocale.lastBuild, ":", " ", formatDate(this.kb.lastBuild, "date-time-short")))), h("div", { class: "environment" }, h("gxg-title-editable", { value: this.environment.name, "disable-edition": this.editingEnvName, "click-to-edit": true, "title-type": "h3", ref: el => (this.envNameEl = el), onValueChanged: this.handleEnvNameChange, focusType: "text", debounce: true }), h("div", { class: "grid grid--environments" }, h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this.renderFrontEndTitle() }, h("div", { class: "front-end" }, this.environment.frontEnd.map((obj) => (h("div", { class: "align-center" }, h("gxg-icon", { type: obj.icon, color: "onbackground", style: {
+    return (h(Host, null, h("div", { class: "gx-ide-main-wrapper" }, h("div", { class: "grid grid--basic" }, h("div", { class: "kb gxi-overflow-auto" }, h("gxg-title-editable", { value: this.kb.name, "disable-edition": this.editingKbName, "click-to-edit": true, fluid: true, ref: el => (this.kbNameEl = el), onValueChanged: this.handleKbNameChange, focusType: "text", debounce: true }), h("div", { class: "align-center kb-detail" }, h("gxg-pill", { id: "pill", class: "version-pill", type: "static", icon: "objects/procedure" }, this._componentLocale.version, ": ", this.kb.currentVersion), h("gxg-text", { class: "display-inline", type: "text-regular", padding: "s", italic: true }, this._componentLocale.created, ":", " ", formatDate(this.kb.created, "date-time-short"), " -", " ", this._componentLocale.lastBuild, ":", " ", formatDate(this.kb.lastBuild, "date-time-short")))), h("div", { class: "environment" }, h("gxg-title-editable", { value: this.environment.name, "disable-edition": this.editingEnvName, "click-to-edit": true, "title-type": "h3", ref: el => (this.envNameEl = el), onValueChanged: this.handleEnvNameChange, focusType: "text", debounce: true }), h("div", { class: "grid grid--environments" }, h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this.renderFrontEndTitle() }, h("div", { class: "front-end" }, this.environment.frontEnd.map((obj) => (h("div", { class: "align-center" }, h("gxg-icon", { type: obj.icon, color: "onbackground", style: {
         "--color-on-background": "var(--gray-05);"
       } }), obj.name))))), h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this._componentLocale.environment.backEnd }, h("div", { class: "align-center" }, h("gxg-icon", { type: this.environment.backEnd.icon, color: "onbackground", style: {
         "--color-on-background": "var(--gray-05);"

package/dist/collection/components/kb-manager-export/kb-manager-export.css

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

package/dist/collection/components/kb-manager-import/kb-manager-import.css

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

package/dist/collection/components/new-environment/new-environment.css

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

package/dist/collection/components/new-kb/new-kb.css

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

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

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;