@genexus/genexus-ide-ui 0.0.11 → 0.0.13

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

@@ -0,0 +1,219 @@
+/* Helper Classes */
+.gxi-hidden {
+  display: none !important;
+}
+
+.gxi-full-height {
+  height: 100%;
+}
+
+.align-start {
+  display: flex;
+  align-items: start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: 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;
+}
+
+/*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);
+  line-height: 1.6em;
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+/*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-right: 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-right: 2px;
+}
+
+:host {
+  display: block;
+  border: 1px solid var(--gxg-border-color--regular);
+  background-color: var(--color-background);
+}
+
+:host(.gxi-new-environment--shadow) {
+  border: none;
+  box-shadow: var(--box-shadow-01);
+}
+
+/*HEADER*/
+.header {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
+  grid-template-columns: auto 1fr auto;
+}
+.header *:nth-child(1) {
+  grid-area: 1/1/2/2;
+}
+.header *:nth-child(2) {
+  grid-area: 1/2/2/3;
+}
+
+/*GXG-TABS*/
+.gxg-tabs {
+  margin-top: 0;
+  box-shadow: none;
+}
+
+/*Basic*/
+.grid--basic {
+  flex-grow: 1;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+.grid--basic > *:first-child {
+  border-right: 1px solid var(--gx-ide-container-border-color);
+}
+
+/*Advanced*/
+.advanced-second-row {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
+}
+.advanced-second-row > *:nth-child(1) {
+  grid-area: 1/1/2/2;
+}
+.advanced-second-row > *:nth-child(2) {
+  grid-area: 1/2/2/3;
+}
+
+.advanced-second-row-col-left {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  grid-template-columns: 1fr auto;
+}
+.advanced-second-row-col-left > * {
+  display: flex;
+  align-items: self-end;
+}
+.advanced-second-row-col-left > *:nth-child(1) {
+  grid-area: 1/1/2/2;
+}
+.advanced-second-row-col-left > *:nth-child(2) {
+  grid-area: 1/2/2/3;
+}
+.advanced-second-row-col-left > *:nth-child(3) {
+  grid-area: 2/1/3/2;
+}
+.advanced-second-row-col-left > *:nth-child(4) {
+  grid-area: 2/2/3/3;
+}
+.advanced-second-row-col-left > *:nth-child(5) {
+  grid-area: 3/1/4/2;
+}
+.advanced-second-row-col-left > *:nth-child(6) {
+  grid-area: 3/2/4/3;
+}
+.advanced-second-row-col-left > *:nth-child(7) {
+  grid-area: 4/1/5/2;
+}
+.advanced-second-row-col-left > *:nth-child(8) {
+  grid-area: 4/2/5/3;
+}
+
+.advanced-second-row-col-right {
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(4, 1fr);
+  grid-auto-rows: 1fr;
+}
+.advanced-second-row-col-right *:nth-child(1) {
+  grid-area: 1/1/2/2;
+}
+.advanced-second-row-col-right *:nth-child(2) {
+  grid-area: 2/1/3/2;
+}
+.advanced-second-row-col-right *:nth-child(3) {
+  grid-area: 3/1/4/2;
+}
+.advanced-second-row-col-right *:nth-child(4) {
+  grid-area: 4/1/5/2;
+}

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

@@ -0,0 +1,355 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+import { renderFormItems } from "../../common/common";
+import { formSubmitValidation } from "../../common/form-validation";
+export class GxIdeNewEnvironment {
+  constructor() {
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.getFrontEndOptionsValues = () => {
+      const gxOptions = [];
+      const frontEndValues = this.frontEndsEl.getValues();
+      frontEndValues.then(result => {
+        result.forEach(checkbox => {
+          gxOptions.push({
+            id: checkbox.id,
+            checked: checkbox.value,
+            disabled: checkbox.disabled
+          });
+        });
+      });
+      return gxOptions;
+    };
+    this.getRuntimeValue = () => {
+      this.runtimeEl = [];
+      const radioGroupOptions = this.runtimeGroup.querySelectorAll("gxg-form-radio");
+      radioGroupOptions === null || radioGroupOptions === void 0 ? void 0 : radioGroupOptions.forEach(radioGroupOption => {
+        this.runtimeEl.push({
+          id: radioGroupOption.id,
+          checked: radioGroupOption.checked
+        });
+      });
+      return this.runtimeEl;
+    };
+    this.setEnvironmentHandler = async () => {
+      if (this.createCallback) {
+        const newEnvData = {
+          name: this.nameEl.value,
+          runtime: this.getRuntimeValue(),
+          language: this.languageEl.value,
+          dataStores: this.dataStoreEl.value,
+          frontEnds: this.getFrontEndOptionsValues()
+        };
+        const createCallbackPromise = this.createCallback(newEnvData);
+        createCallbackPromise.then(formSubmitResult => {
+          console.log("formSubmitResult", formSubmitResult);
+          formSubmitValidation(formSubmitResult, this);
+        });
+      }
+    };
+    this.cancelButtonClickedHandler = async () => {
+      await this.cancelCallback();
+    };
+    this.runtimeEnvironmentChangedHandler = () => {
+      this.changedHandler();
+    };
+    this.languageValueChangedHandler = () => {
+      this.changedHandler();
+    };
+    this.dataStoreValueChangedHandler = () => {
+      this.changedHandler();
+    };
+    /**
+     * @description This function is called when any of the following data is modified: "Runtime Environment", "Data Store", "Language".
+     */
+    this.changedHandler = () => {
+      const newEnvData = {
+        name: this.nameEl.value,
+        runtime: this.getRuntimeValue(),
+        language: this.languageEl.value,
+        dataStores: this.dataStoreEl.value,
+        frontEnds: this.getFrontEndOptionsValues()
+      };
+      this.changedCallback(newEnvData);
+    };
+    this.renderTabBasic = () => {
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { containerTitle: this._componentLocale.runtime, fieldset: true, displayBorderTop: true, displayBorderBottom: true }, h("gxg-form-radio-group", { ref: (el) => (this.runtimeGroup = el), row: true, onChange: this.runtimeEnvironmentChangedHandler, slot: "header" }, renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment"))), h("div", { class: "grid grid--no-gap grid--basic" }, h("gx-ide-container", { fieldset: true, noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: this.languages[0]["id"], ref: (el) => (this.languageEl = el), onValueChanged: this.languageValueChangedHandler, part: "language" }, renderFormItems("gxg-combo-box-item", this.languages)), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.dataStores, value: this.dataStores[0]["id"], ref: (el) => (this.dataStoreEl = el), onValueChanged: this.dataStoreValueChangedHandler, part: "data-store" }, renderFormItems("gxg-combo-box-item", this.dataStores))), h("gx-ide-container", { fieldset: true, noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds))))));
+    };
+    this.renderTabAdvanced = () => {
+      return (h("gxg-tab", { tab: "advanced", "no-padding": true }, h("gx-ide-container", { displayBorderTop: true }, h("slot", { name: "property-grid" }))));
+    };
+    this.hideTopBar = false;
+    this.dataStores = undefined;
+    this.frontEnds = undefined;
+    this.disableAdvanced = false;
+    this.setAsTarget = true;
+    this.runtimes = undefined;
+    this.languages = undefined;
+    this.environmentName = undefined;
+    this.createCallback = undefined;
+    this.cancelCallback = undefined;
+    this.changedCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", null, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "NewEnvironment", "max-width": "100%", value: this.environmentName, ref: (el) => (this.nameEl = el), part: "environment-name" }))), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container" }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: this.disableAdvanced })), this.renderTabBasic(), this.renderTabAdvanced())), h("gx-ide-container", { displayBorderTop: true }, h("gxg-form-checkbox", { label: this._componentLocale.setCurrentEnvironment, id: "show-current-environment", checked: this.setAsTarget, slot: "footer-start" }), h("gxg-button", { id: "button-create", slot: "footer-end", type: "primary-text-only", onClick: this.setEnvironmentHandler, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnSetNewEnvironment), h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelButtonClickedHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel)))));
+  }
+  static get is() { return "gx-ide-new-environment"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["new-environment.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["new-environment.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/new-environment"]; }
+  static get properties() {
+    return {
+      "hideTopBar": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, will hide the top-bar"
+        },
+        "attribute": "hide-top-bar",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "dataStores": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It allows defining the DBMS that will be used in the solution"
+        }
+      },
+      "frontEnds": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It allows selecting multiple generators for the front end"
+        }
+      },
+      "disableAdvanced": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specify whether it is feasible to display information related to local configuration parameters"
+        },
+        "attribute": "disable-advanced",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "setAsTarget": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Belongs to checkbox 'Set as current environment' @default true"
+        },
+        "attribute": "set-as-target",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "runtimes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Possible values for 'Runtime Environment' radio button"
+        }
+      },
+      "languages": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GxOption[]",
+          "resolved": "GxOption[]",
+          "references": {
+            "GxOption": {
+              "location": "import",
+              "path": "../../common/types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Possible values for 'Language' combo"
+        }
+      },
+      "environmentName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the new environment"
+        },
+        "attribute": "environment-name",
+        "reflect": false
+      },
+      "createCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CreateCallback",
+          "resolved": "(data: NewEnvironmentData) => Promise<FormSubmitResult>",
+          "references": {
+            "CreateCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback that will be invoked when user confirms the KB creation"
+        }
+      },
+      "cancelCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CancelCallback",
+          "resolved": "() => Promise<void>",
+          "references": {
+            "CancelCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback that will be invoked when user wants to cancel"
+        }
+      },
+      "changedCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChangedCallback",
+          "resolved": "(data: NewEnvironmentData) => Promise<void>",
+          "references": {
+            "ChangedCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback that will be invoked when when any of the following data is modified: \"Runtime Environment\", \"Data Store\", \"Language\"."
+        }
+      }
+    };
+  }
+  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/new-kb/gx-ide-assets/new-kb/langs/new-kb.lang.en.json

@@ -1,4 +1,5 @@
 {
+  "componentName": "New Kb",
   "header": {
     "kbName": "KB Name",
     "kbLocation": "Location"