@genexus/genexus-ide-ui 0.0.79 → 0.0.80

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

@@ -0,0 +1,300 @@
+/*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);
+}
+
+/*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) !important;
+  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;
+  height: 100%;
+  overflow: auto;
+}
+
+:host,
+.gx-ide-main-wrapper,
+.grid--basic,
+.project,
+.recent-objects {
+  height: 100%;
+  overflow: auto;
+}
+
+.kb {
+  grid-area: kb;
+  align-self: center;
+}
+.kb .version-pill {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kb .kb-detail {
+  flex-wrap: wrap;
+  margin-block-start: var(--spacing-comp-04);
+  gap: var(--spacing-comp-04);
+}
+.kb .kb-detail .display-inline {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.environment {
+  grid-area: environment;
+}
+.environment gxg-title-editable {
+  margin-block-end: var(--gx-ide-cards-vertical-spacing);
+}
+.environment .grid--environments {
+  flex-grow: 1;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--gx-ide-grid-column-gap);
+}
+.environment .grid--environments .align-center {
+  gap: var(--spacing-comp-01);
+}
+.environment .grid--environments .front-end {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gx-ide-cards-vertical-spacing);
+}
+
+.project {
+  grid-area: project;
+}
+.project .project-buttons {
+  margin-block-start: var(--spacing-comp-04);
+  gap: var(--spacing-comp-04);
+}
+.project gxg-form-textarea::part(textarea) {
+  width: 100%;
+  background-color: transparent;
+  line-height: var(--line-height-default);
+  font-size: var(--mc-font-size-xs);
+}
+
+.recent-objects {
+  grid-area: recent-objects;
+}
+.recent-objects .recent-objects-card {
+  margin-block-end: var(--gx-ide-cards-vertical-spacing);
+}
+.recent-objects .recent-objects-card:last-child {
+  margin-block-end: 0;
+}
+.recent-objects .recent-objects-card .grid--recent-objects {
+  flex-grow: 1;
+  grid-template-columns: 1fr 10fr 12fr 1fr;
+  gap: var(--gx-ide-cards-horizontal-spacing);
+  height: 100%;
+}
+.recent-objects .recent-objects-card .grid--recent-objects .obj-name {
+  color: var(--gray-06);
+}
+
+.grid--basic {
+  flex-grow: 1;
+  grid-template-columns: 1.12fr 1fr;
+  gap: var(--spacing-comp-06);
+  grid-template-areas: "kb environment" "project recent-objects";
+  grid-template-rows: auto 1fr;
+}
+
+gxg-title-editable {
+  width: 100%;
+}
+
+gx-ide-card {
+  height: 100%;
+}

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

@@ -0,0 +1,299 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+import { formatDate } from "../../common/helpers";
+const mapStatusToIcons = {
+  new: "gx-server/new",
+  modified: "patterns-default-associated/modified",
+  conflicted: "patterns-default-associated/synchronized",
+  unmodified: "gx-server/delete"
+};
+export class GxIdeDashboardHome {
+  constructor() {
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    // Kb Name
+    this.handleKbNameChange = async () => {
+      if (this.renameKBCallback) {
+        const response = this.renameKBCallback(this.kbNameEl.value);
+        response.then((result) => {
+          this.editValidation(result, this.kb.name, this.kbNameEl);
+        });
+      }
+    };
+    // Environment Name
+    this.handleEnvNameChange = async () => {
+      if (this.renameEnvironmentCallback) {
+        const response = this.renameEnvironmentCallback(this.envNameEl.value);
+        response.then((result) => {
+          this.editValidation(result, this.environment.name, this.envNameEl);
+        });
+      }
+    };
+    // Project Description
+    this.toggleEditDescription = async () => {
+      this.editingProjectDescription = !this.editingProjectDescription;
+    };
+    this.handleDescriptionChange = async () => {
+      if (this.editDescriptionCallback) {
+        await this.editDescriptionCallback();
+      }
+    };
+    // Recent Objects
+    this.openObject = (id) => {
+      this.openObjectCallback(id);
+    };
+    // Validation
+    this.editValidation = (result, name, el) => {
+      if (!result.success) {
+        el.validationStatus = "error";
+        el.validationMessage = result.errorMessage;
+      }
+      else {
+        name = el.value;
+      }
+    };
+    // 10.RENDER() FUNCTIONS //
+    this.renderProjectContent = () => {
+      return this.editingProjectDescription ? (h("div", null, h("gxg-form-textarea", { rows: 12, value: this.projectDescription, ref: (el) => (this.projectDescriptionEl = el) }), h("div", { class: "project-buttons align-center" }, h("gxg-text", { type: "text-link", onClick: this.handleDescriptionChange }, this._componentLocale.save), h("gxg-text", { type: "text-link", onClick: this.toggleEditDescription }, this._componentLocale.discard)))) : (h("div", null, h("div", { innerHTML: this.projectDescription }), h("gxg-text", { icon: "gemini-tools/edit", type: "text-link", onClick: this.toggleEditDescription }, this._componentLocale.edit)));
+    };
+    this.editingKbName = false;
+    this.editingEnvName = false;
+    this.editingProjectDescription = false;
+    this.kb = undefined;
+    this.environment = undefined;
+    this.projectDescription = undefined;
+    this.recentObjects = undefined;
+    this.renameKBCallback = undefined;
+    this.renameEnvironmentCallback = undefined;
+    this.editDescriptionCallback = undefined;
+    this.openObjectCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  renderFrontEndTitle() {
+    return this.environment.frontEnd.length <= 1
+      ? this._componentLocale.environment.frontEndLang
+      : this._componentLocale.environment.frontEndLangs;
+  }
+  // 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: {
+        "--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);"
+      } }), this.environment.backEnd.name)), h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this._componentLocale.environment.dataStore }, h("div", { class: "align-center" }, h("gxg-icon", { type: this.environment.dataStore.icon, color: "onbackground", style: {
+        "--color-on-background": "var(--gray-05);"
+      } }), this.environment.dataStore.name)))), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.project.title, class: "project" }, this.renderProjectContent()), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.recent.title, class: "recent-objects", cardType: "section", "no-padding-top": true }, this.recentObjects.map((obj, index) => (h("gxg-card", { background: "gray-01", padding: "m", cardType: "article", class: "recent-objects-card", actionable: true, onClick: () => this.openObject(index) }, h("div", { class: "grid grid--recent-objects" }, h("gxg-icon", { type: obj.typeIcon, color: "auto" }), h("gxg-text", { type: "text-regular", class: "obj-name" }, obj.name), h("gxg-text", { italic: true, class: "justify-end" }, this._componentLocale.recent.modified, ":", " ", `${formatDate(obj.modificationDate, "date")}`), h("div", { class: " justify-end" }, h("gxg-icon", { type: mapStatusToIcons[obj.status], color: "auto" })))))))))));
+  }
+  static get is() { return "gx-ide-dashboard-home"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dashboard-home.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dashboard-home.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/dashboard-home"]; }
+  static get properties() {
+    return {
+      "kb": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KBData",
+          "resolved": "{ name: string; currentVersion: string; created: Date; lastBuild?: Date; }",
+          "references": {
+            "KBData": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The KB basic properties."
+        }
+      },
+      "environment": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EnvironmentData",
+          "resolved": "{ name: string; frontEnd: EnvironmentItemData[]; backEnd: EnvironmentItemData; dataStore: EnvironmentItemData; }",
+          "references": {
+            "EnvironmentData": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Information of the current environment."
+        }
+      },
+      "projectDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Project Detail description."
+        },
+        "attribute": "project-description",
+        "reflect": false
+      },
+      "recentObjects": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "recentObjectData[]",
+          "resolved": "recentObjectData[]",
+          "references": {
+            "recentObjectData": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Recently edited objects."
+        }
+      },
+      "renameKBCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(name: string) => Promise<EditResult>",
+          "resolved": "(name: string) => Promise<EditResult>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "EditResult": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user tries to rename the KB.\nReceives the new name as a parameter\nand returns a promise with the result of the operation."
+        }
+      },
+      "renameEnvironmentCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(\n    name: string\n  ) => Promise<EditResult>",
+          "resolved": "(name: string) => Promise<EditResult>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "EditResult": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user tries to rename the KB environment.\nReceives the new name as a parameter\nand returns a promise with the result of the operation."
+        }
+      },
+      "editDescriptionCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => Promise<void>",
+          "resolved": "() => Promise<void>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user tries to edit the Project Description.\nThe edition is resolved by the host."
+        }
+      },
+      "openObjectCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(id: number) => Promise<void>",
+          "resolved": "(id: number) => Promise<void>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user tries to open one of the listed Recent Objects\nReceives the internal ID of the object"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "editingKbName": {},
+      "editingEnvName": {},
+      "editingProjectDescription": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentDidRenderEvent",
+        "name": "componentDidRenderEvent",
+        "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/dashboard-home/gx-ide-assets/dashboard-home/langs/dashboard-home.lang.en.json

@@ -0,0 +1,28 @@
+{
+  "componentName": "Dashboard Home",
+  "version": "Version",
+  "created": "Created",
+  "lastBuild": "Last Build",
+  "edit": "Edit Description",
+  "save": "Save Changes",
+  "discard": "Discard Changes",
+  "project": {
+    "title": "Project Detail",
+    "tabs": {
+      "description": "Description",
+      "lookFeel": "Look & feel",
+      "architecture": "Architecture"
+    }
+  },
+  "environment": {
+    "title": "Environment Name",
+    "frontEndLang": "Frontend Language",
+    "frontEndLangs": "Frontend Languages",
+    "backEnd": "Backend Language",
+    "dataStore": "Main Data Store"
+  },
+  "recent": {
+    "title": "Recent Objects",
+    "modified": "Modified"
+  }
+}

package/dist/collection/components/dashboard-home/gx-ide-assets/dashboard-home/langs/dashboard-home.lang.ja.json

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

package/dist/collection/components/dashboard-home/gx-ide-assets/dashboard-home/langs/dashboard-home.lang.zh.json

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

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

@@ -40,6 +40,21 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   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;

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

@@ -40,6 +40,21 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   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;