@genexus/genexus-ide-ui 0.0.60 → 0.0.62

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

@@ -0,0 +1,325 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+export class GxIdeStatusButtons {
+  constructor() {
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.evaluateIconsSize = () => {
+      if (this.compact) {
+        this.iconsSize = "small";
+      }
+    };
+    this.evaluateLabel = (type) => {
+      const label = !this.minimal ? type : "";
+      let refType;
+      if (type === "error") {
+        refType = this.errors;
+      }
+      else if (type === "warning") {
+        refType = this.warnings;
+      }
+      else if (type === "success") {
+        refType = this.successes;
+      }
+      if (this.minimal) {
+        return refType === 0 ? "none" : `${refType}`;
+      }
+      else {
+        const suffix = type === "success" ? "es" : "s";
+        return refType === 1 ? `1 ${label}` : `${refType} ${label}${suffix}`;
+      }
+    };
+    this.selectionChangedHandler = (e) => {
+      e.stopPropagation();
+      this.selectionChanged.emit(e.detail);
+    };
+    this.active = false;
+    this.errors = 0;
+    this.warnings = 0;
+    this.successes = 0;
+    this.minimal = false;
+    this.compact = false;
+    this.noBorder = false;
+    this.noInnerBorders = false;
+    this.noBorderTop = false;
+    this.noBorderEnd = false;
+    this.noBorderBottom = false;
+    this.noBorderStart = false;
+    this.iconsSize = "regular";
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  componentWillLoad() {
+    this.evaluateIconsSize();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, null, h("gx-ide-list-selector", { type: "multi-selection", listName: "status-buttons", noListBorder: true, ellipsis: true, iconsSize: this.iconsSize, onSelectionChanged: this.selectionChangedHandler }, h("gx-ide-list-selector-item", { itemId: "error", itemValue: this.evaluateLabel("error"), icon: "gx-test/result-exception", iconColor: this.errors === 0 ? "disabled" : "auto", class: { "error": true, "not-zero": this.errors !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
+        "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: {
+        "active-indicator": true
+      } })))));
+  }
+  static get is() { return "gx-ide-status-buttons"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gx-ide-status-buttons.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gx-ide-status-buttons.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the buttons begin active or not"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "errors": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The errors amount"
+        },
+        "attribute": "errors",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "warnings": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The warnings amount"
+        },
+        "attribute": "warnings",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "successes": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The successes amount"
+        },
+        "attribute": "successes",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "minimal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display only the number"
+        },
+        "attribute": "minimal",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "compact": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If present will make the component look smaller."
+        },
+        "attribute": "compact",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "No border all around"
+        },
+        "attribute": "no-border",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noInnerBorders": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "No inner borders"
+        },
+        "attribute": "no-inner-borders",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noBorderTop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "No border on the top"
+        },
+        "attribute": "no-border-top",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noBorderEnd": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "No border on the end"
+        },
+        "attribute": "no-border-end",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noBorderBottom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "No border on the bottom"
+        },
+        "attribute": "no-border-bottom",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noBorderStart": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "No border on the start"
+        },
+        "attribute": "no-border-start",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "iconsSize": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectionChanged",
+        "name": "selectionChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits the actual selection"
+        },
+        "complexType": {
+          "original": "CheckedItemsInfo",
+          "resolved": "ItemData[]",
+          "references": {
+            "CheckedItemsInfo": {
+              "location": "import",
+              "path": "../list-selector/list-selector"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/_helpers/switcher/switch-panel/switch-panel.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/_helpers/switcher/switch-panel/switch-panel.js

@@ -0,0 +1,18 @@
+import { Host, h } from "@stencil/core";
+export class GxIdeSwitchPanel {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "gx-ide-switch-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["switch-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["switch-panel.css"]
+    };
+  }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,18 @@
+import { Host, h } from "@stencil/core";
+export class GxIdeSwitcher {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "gx-ide-switcher"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["switcher.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["switcher.css"]
+    };
+  }
+}

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

@@ -0,0 +1,42 @@
+:host {
+  --gx-ide-title-padding: var(--gx-ide-container--padding, --spacing-comp-03);
+  display: flex;
+  flex-direction: column;
+  color: var(--gx-ide-component-text-color);
+  font-family: var(--font-family-primary);
+  line-height: 1.6em;
+  background-color: transparent;
+  padding: 0;
+}
+
+/*alignment*/
+:host(.alignment--start) {
+  align-items: start;
+}
+
+:host(.alignment--center) {
+  align-items: center;
+}
+
+/*padding*/
+:host(.alignment--start) {
+  text-align: start;
+}
+
+:host([padding]) {
+  padding: var(--gx-ide-title-padding);
+}
+
+:host([no-padding-bottom]) {
+  padding-bottom: 0;
+}
+
+/*border*/
+:host([border]) {
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
+}
+
+/*type*/
+:host(.title-type--secondary) {
+  color: var(--gray-06);
+}

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

@@ -0,0 +1,156 @@
+import { Host, h } from "@stencil/core";
+export class GxIdeTitle {
+  constructor() {
+    this.titleCaption = undefined;
+    this.type = "primary";
+    this.alignment = "start";
+    this.padding = false;
+    this.noPaddingBottom = false;
+    this.border = false;
+  }
+  componentWillLoad() {
+    if (this.type === "primary") {
+      this.geminiType = "title-04";
+    }
+    else if (this.type === "secondary") {
+      this.geminiType = "title-05";
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        [`alignment--${this.alignment}`]: true,
+        [`title-type--${this.type}`]: true
+      } }, h("gxg-title", { type: this.geminiType }, h("slot", null))));
+  }
+  static get is() { return "gx-ide-title"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["title.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["title.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "titleCaption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title caption (the title)"
+        },
+        "attribute": "title-caption",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TitleType",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "TitleType": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title caption (the title)"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"primary\""
+      },
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TitleAlignment",
+          "resolved": "\"center\" | \"start\"",
+          "references": {
+            "TitleAlignment": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title alignment"
+        },
+        "attribute": "alignment",
+        "reflect": false,
+        "defaultValue": "\"start\""
+      },
+      "padding": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the padding"
+        },
+        "attribute": "padding",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noPaddingBottom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the padding on the bottom"
+        },
+        "attribute": "no-padding-bottom",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "border": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays a border on the bottom"
+        },
+        "attribute": "border",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/{application-declaration/bpm-app-declaration.css → _starting-template/template.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,19 +154,16 @@ gxg-tabs {
   padding-inline-end: 2px;
 }
 
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 /*Gemini*/
 /*Gx Ide*/
 :host {
   display: block;
-}
-:host .header {
-  display: flex;
-  gap: var(--gx-ide-grid-row-gap);
-}
-:host .header .application-suggest {
-  flex: 1;
-}
-:host .row-button {
-  display: flex;
-  align-items: center;
 }

package/dist/collection/components/{_template → _starting-template}/template.js

@@ -2,9 +2,11 @@
 import { Host, h } from "@stencil/core";
 /* OTHER LIBRARIES IMPORTS */
 /* CUSTOM IMPORTS */
+import { config } from "../../common/config";
 import { Locale } from "../../common/locale";
 export class GxIdeTemplate {
   constructor() {
+    this.renderedFirstTime = false;
     this.mainTile = undefined;
   }
   // 6.COMPONENT LIFECYCLE METHODS //
@@ -12,14 +14,17 @@ export class GxIdeTemplate {
     this._componentLocale = await Locale.getComponentStrings(this.el);
   }
   componentDidRender() {
-    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+    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, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { fullHeight: true, "container-title": "Header Title" }, 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", { "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")))));
   }
   static get is() { return "gx-ide-template"; }
   static get encapsulation() { return "shadow"; }
@@ -57,8 +62,8 @@ export class GxIdeTemplate {
   }
   static get events() {
     return [{
-        "method": "componentDidRenderEvent",
-        "name": "componentDidRenderEvent",
+        "method": "componentDidRenderFirstTime",
+        "name": "componentDidRenderFirstTime",
         "bubbles": true,
         "cancelable": true,
         "composed": true,