@genexus/genexus-ide-ui 0.0.60 → 0.0.62

package/dist/collection/components/file-selector/file-selector.css

@@ -0,0 +1,366 @@
+:root {
+  --ui-animaton-speed: 0.2s;
+}
+
+/*ALIGNMENT*/
+/*Ellipsis*/
+/*****************************************************
+TYPOGRAPHY
+*****************************************************/
+/*Title 01 (Positive)*/
+.gxg-title-01 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+/*Title 01 (Negative)*/
+.gxg-title-01--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+/*Title 02 (Positive)*/
+.gxg-title-02 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+}
+
+.gxg-title-02--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Title 03*/
+.gxg-title-03 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+}
+
+.gxg-title-03--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Title 04*/
+.gxg-title-04 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+.gxg-title-04--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+/*Title 05*/
+.gxg-title-05 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.556em;
+}
+
+.gxg-title-05--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Text*/
+.gxg-text {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+.gxg-text--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+.gxg-text--gray {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--gray-05);
+}
+
+/*Quote*/
+.gxg-quote {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  font-style: italic;
+}
+
+.gxg-quote--negative {
+  color: var(--color-on-primary);
+}
+
+/*Link*/
+.gxg-link {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+}
+.gxg-link:hover {
+  color: var(--color-primary-hover);
+}
+.gxg-link:active {
+  color: var(--color-primary-active);
+}
+
+.gxg-link-gray {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--gray-04);
+}
+.gxg-link-gray:hover {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--gray-04);
+  color: var(--gray-06);
+}
+
+/*Alerts*/
+.gxg-alert-error {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-error-dark);
+  display: inline-block;
+}
+
+.gxg-alert-warning {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-warning-dark);
+  display: inline-block;
+}
+
+.gxg-alert-success {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-success-dark);
+  display: inline-block;
+}
+
+/*Tab*/
+.gxg-tab--disabled {
+  color: var(--color-primary-disabled);
+  pointer-events: none;
+}
+.gxg-tab--disabled[disabled] {
+  color: var(--color-primary-disabled);
+  pointer-events: none;
+}
+
+/*Label*/
+.gxg-label {
+  font-family: var(--font-family-primary) !important;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm) !important;
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-primary-enabled);
+  text-align: center;
+  line-height: 1.455em;
+}
+.gxg-label:hover {
+  color: var(--color-primary-hover);
+}
+.gxg-label:focus {
+  color: var(--color-primary-active);
+}
+.gxg-label:active {
+  color: var(--color-primary-active);
+}
+.gxg-label[disabled] {
+  color: var(--color-primary-disabled);
+}
+
+.gxg-label--negative {
+  color: var(--color-on-primary);
+}
+.gxg-label--negative[disabled] {
+  color: var(--color-on-disabled);
+}
+
+/*****************************************************
+GXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES
+*****************************************************/
+.gxg-button-styles {
+  font-family: var(--font-family-primary) !important;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm) !important;
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-primary-enabled);
+  text-align: center;
+  line-height: 1.455em;
+}
+
+/*****************************************************
+FORM ELEMENTS
+*****************************************************/
+.gxg-scrollbar {
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gxg-scrollbar::-webkit-scrollbar {
+  width: var(--gxg-scrollbar-width, 6px);
+}
+.gxg-scrollbar::-webkit-scrollbar-track {
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
+}
+.gxg-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
+}
+.gxg-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
+  cursor: pointer;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  color: var(--color-primary-enabled);
+  /*label*/
+  /*wrapper*/
+}
+:host .container {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+:host label {
+  font-size: 14px;
+}
+:host .wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gx-ide-grid-column-gap);
+}
+
+/*label position*/
+:host([label-position=start]) {
+  flex-direction: row;
+}
+:host([label-position=start]) .wrapper {
+  flex: 1;
+}

package/dist/collection/components/file-selector/file-selector.js

@@ -0,0 +1,185 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+export class GxIdeFileSelector {
+  constructor() {
+    this.evaluateLabelPosition = () => {
+      if (this.label && this.labelPosition === "above") {
+        this.centerLabel = false;
+      }
+    };
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.btnSelectClickHandler = () => { };
+    this.accessibilityLabels = {
+      buttonSelectLabel: "selects a file from the user file system"
+    };
+    this.label = undefined;
+    this.labelPosition = "start";
+    this.centerLabel = true;
+    this.labelWidth = undefined;
+    this.selectDirectoryCallback = undefined;
+    this.value = undefined;
+  }
+  // 2. REFERENCE TO ELEMENTS //
+  // 3.STATE() VARIABLES //
+  // 4.PUBLIC PROPERTY API | WATCH'S //
+  // 5.EVENTS (EMIT) //
+  // 6.METHODS //
+  componentWillLoad() {
+    this.evaluateLabelPosition();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    var _a;
+    return (h(Host, null, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel }, this.label)) : null, h("div", { class: "wrapper" }, h("gxg-form-text", { part: "input", value: this.value }), h("gxg-button", { part: "button-select", onClick: this.btnSelectClickHandler, "aria-label": (_a = this.accessibilityLabels) === null || _a === void 0 ? void 0 : _a.buttonSelectLabel, type: "secondary-icon-only", icon: "gemini-tools/folder", disabled: !this.selectDirectoryCallback }))));
+  }
+  static get is() { return "gx-ide-file-selector"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["file-selector.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["file-selector.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accessibilityLabels": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FileSelectorLabels",
+          "resolved": "{ buttonSelectLabel: string; }",
+          "references": {
+            "FileSelectorLabels": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This property provides the user a way to define custom aria-label descriptions."
+        },
+        "defaultValue": "{\n    buttonSelectLabel: \"selects a file from the user file system\"\n  }"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The label associated with the input (optional)"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LabelPosition",
+          "resolved": "\"above\" | \"start\"",
+          "references": {
+            "LabelPosition": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The label position"
+        },
+        "attribute": "label-position",
+        "reflect": true,
+        "defaultValue": "\"start\""
+      },
+      "centerLabel": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Centers the label"
+        },
+        "attribute": "center-label",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "labelWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label width"
+        },
+        "attribute": "label-width",
+        "reflect": false
+      },
+      "selectDirectoryCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => Promise<string>",
+          "resolved": "() => Promise<string>",
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback that will be called when the user presses the action button. Returns the new value (directory path) assigned to the component."
+        }
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value currently assigned."
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/kb-manager-export/gx-ide-assets/kb-manager-export/langs/kb-manager-export.lang.en.json

@@ -1,4 +1,5 @@
 {
+  "componentName": "Kb Manager Export",
   "header": {
     "exportFileName": "Export File Name",
     "selectKbButton": "Select Kb",
@@ -8,6 +9,7 @@
   },
   "main": {
     "addKnowledgeBaseDescription": "Add Knowledge Base / Version / Environment properties to list",
+    "addKnowledgeBaseDescriptionShort": "Add",
     "exportAll": "Export All"
   },
   "footer": {

package/dist/collection/components/kb-manager-export/helpers.js

@@ -40,7 +40,7 @@ const convertObjectTypeToTreeItem = (objectType) => ({
   leftImgSrc: objectType.icon,
   leaf: false,
   checkbox: true,
-  class: "object-type",
+  class: "object-type tree-view-item",
   expanded: true,
   items: []
 });
@@ -50,7 +50,7 @@ const convertObjectToTreeItem = (object, objectTypes) => ({
   id: object.id,
   leftImgSrc: getObjectIcon(object.typeId, objectTypes),
   checkbox: true,
-  class: "object",
+  class: "object tree-view-item",
   leaf: true
 });
 /* 4. getObjectType*/
@@ -100,7 +100,7 @@ const convertPropertyToTreeItem = (property, kbPropertiesTypes) => ({
   id: property.id,
   leftImgSrc: getPropertyIcon(property.typeId, kbPropertiesTypes),
   checkbox: true,
-  class: "property",
+  class: "property tree-view-item",
   leaf: true
 });
 /* 8. convertObjectDataToTreeItemData*/
@@ -162,6 +162,5 @@ export const clearKbPropertiesFromTree = (actualTreeState) => {
       updatedTreeData.splice(i, 1);
     }
   }
-  console.log("updatedTreeData", updatedTreeData);
   return updatedTreeData;
 };

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

@@ -55,6 +55,15 @@ 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-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -78,6 +87,7 @@ gxg-tabs {
   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);
@@ -144,6 +154,14 @@ gxg-tabs {
   padding-inline-end: 2px;
 }
 
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /*Gemini*/
 /*Gx Ide*/
 /*general*/
@@ -152,44 +170,41 @@ gxg-tabs {
 }
 
 /*Header*/
-.header {
+.header__top {
+  border-top: 1px solid var(--gx-ide-container-border-color);
   display: grid;
+  padding: var(--gxg-container--padding) var(--gxg-container--padding) 0 var(--gxg-container--padding);
   gap: var(--gx-ide-grid-column-gap);
   grid-template-columns: 1fr auto;
   grid-template-areas: "select-directory export-cancel-buttons-group options-btn";
 }
-.header .select-directory {
+.header__top .select-directory {
   grid-area: select-directory;
 }
-.header .export-cancel-buttons-group {
+.header__top .export-cancel-buttons-group {
   grid-area: export-cancel-buttons-group;
 }
-.header .options-btn {
+.header__top .options-btn {
   grid-area: options-btn;
 }
-
-/*Main*/
-.checkboxes-wrapper {
+.header__bottom .checkboxes-wrapper {
   padding: var(--gx-ide-grid-column-gap);
   display: flex;
   flex-wrap: wrap;
   gap: var(--gx-ide-grid-column-gap);
-  border-bottom: 1px solid var(--gx-ide-container-border-color);
 }
-
-.tree-container {
+.header__bottom .checkboxes-wrapper .add-checkbox {
   display: flex;
-  min-height: 100px;
-  max-height: 200px;
-  padding-left: var(--gx-ide-grid-column-gap);
-  width: 100%;
-  box-sizing: border-box;
 }
+
+/*Main*/
 .tree-container--empty {
-  padding-left: 0;
   align-items: center;
   justify-content: center;
 }
+.tree-container .gx-ide-message {
+  padding: 100px 0;
+}
 
 /*Footer*/
 .footer-right-wrapper {