@genexus/genexus-ide-ui 0.0.36 → 0.0.38

package/dist/collection/components/team-dev-update-partial-selection/team-dev-update-partial-selection.js

@@ -7,21 +7,19 @@ export class GxIdeTeamDevUpdatePartialSelection {
   constructor() {
     // 9.LOCAL METHODS //
     this.renderObjects = () => {
-      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-objects" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false, sortable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedOn, settingable: false })), this.selection.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon, color: "auto" })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${obj.modifiedOn.toISOString().slice(0, 10)}`)))))));
+      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-objects" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false, sortable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedOn, settingable: false })), this.selection.map((obj) => (h("ch-grid-row", { rowid: obj.id, key: obj.id }, h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon, color: "auto" })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${obj.modifiedOn.toISOString().slice(0, 10)}`)))))));
     };
     this.getObjectsHandler = () => {
       this.addCallback().then((items) => {
         if ((items === null || items === void 0 ? void 0 : items.length) > 0) {
           this.selection = [...this.selection, ...items];
           this.selectedObjectsIds = [];
-          this.deselectAllHandler();
         }
       });
     };
-    this.removeObjectsHandler = () => {
+    this.removeSelectedObjectsHandler = () => {
       this.selection = this.selection.filter(item => !this.selectedObjectsIds.includes(item.id));
       this.selectedObjectsIds = [];
-      this.deselectAllHandler();
     };
     this.confirmHandler = () => {
       if (this.confirmCallback) {
@@ -35,8 +33,8 @@ export class GxIdeTeamDevUpdatePartialSelection {
     this.cancelHandler = () => {
       this.cancelCallback();
     };
-    this.deselectAllHandler = () => {
-      this.chGridEl.selectAllRows(false);
+    this.removeAllHandler = () => {
+      this.selection = [];
     };
     this.listenChanges = () => {
       // for grid selection
@@ -71,7 +69,7 @@ export class GxIdeTeamDevUpdatePartialSelection {
   render() {
     return (h(Host, { class: {
         "gxi-team-dev-update-partial-selection": true
-      } }, h("div", { class: `main-wrapper` }, h("gxg-container", { containerTitle: this._componentLocale.title }, h("div", { class: "top-actions" }, h("gxg-button", { id: "button-add", type: "outlined", onClick: this.getObjectsHandler, part: "add" }, this._componentLocale.addObject), h("gxg-button", { id: "button-remove", type: "outlined", onClick: this.removeObjectsHandler, part: "remove", disabled: !(this.selectedObjectsIds.length > 0) }, this._componentLocale.removeObject)), this.renderObjects(), h("gxg-container", { displayBorderTop: true }, h("div", { class: "grid actions" }, h("div", null, h("gxg-button", { id: "button-clear", type: "outlined", onClick: this.deselectAllHandler, part: "clear", disabled: !(this.selectedObjectsIds.length > 0) }, this._componentLocale.footer.btnDeselectAll)), h("div", null, h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirmHandler, part: "confirm" }, this._componentLocale.footer.btnConfirm), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelHandler, part: "cancel" }, this._componentLocale.footer.btnCancel))))))));
+      } }, h("div", { class: `main-wrapper` }, h("gxg-container", { containerTitle: this._componentLocale.title }, h("div", { class: "top-actions" }, h("gxg-button", { id: "button-add", type: "outlined", onClick: this.getObjectsHandler, part: "add" }, this._componentLocale.btnAddObject), h("gxg-button", { id: "button-remove", type: "outlined", onClick: this.removeSelectedObjectsHandler, part: "remove", disabled: !(this.selectedObjectsIds.length > 0) }, this._componentLocale.btnRemoveSelectedObjects)), this.renderObjects(), h("gxg-container", { displayBorderTop: true }, h("div", { class: "grid actions" }, h("div", null, h("gxg-button", { id: "button-clear", type: "outlined", onClick: this.removeAllHandler, disabled: !(this.selection.length > 0), part: "clear" }, this._componentLocale.footer.btnRemoveAll)), h("div", null, h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirmHandler, part: "confirm" }, this._componentLocale.footer.btnConfirm), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelHandler, part: "cancel" }, this._componentLocale.footer.btnCancel))))))));
   }
   static get is() { return "gx-ide-team-dev-update-partial-selection"; }
   static get encapsulation() { return "shadow"; }

package/dist/components/ch-alert.js

@@ -0,0 +1,150 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './timer.js';
+
+const alertCss = ":host{display:grid;width:100%;height:100%;grid-template:\"img content button\" 1fr \"progress-bar progress-bar progress-bar\" min-content/min-content 1fr min-content}:host(.pause-on-hover:hover) ::part(indicator){animation-play-state:paused}::slotted([slot=button]){pointer-events:none}.image{max-width:40px;height:40px;grid-area:img;align-self:center}.content{grid-area:content}.close-button{grid-area:button}.close-button .close-button-img{-webkit-mask:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.875 18L6.75 16.875L11.25 12.375L6.75 7.875L7.875 6.75L12.375 11.25L16.875 6.75L18 7.875L13.5 12.375L18 16.875L16.875 18L12.375 13.5L7.875 18Z'/%3E%3C/svg%3E\") 50% 50%/24px 24px no-repeat;width:24px;height:24px;background-color:currentColor}.indicator-container{grid-area:progress-bar}:where(button){all:unset;display:flex;align-items:center;cursor:pointer}";
+
+const ChAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    /** Sets the timer id */
+    this.timerId = null;
+    /** Sets the desired interval */
+    this.timerInterval = 50;
+    /**
+     * Determine the accessible name of the close button.
+     * Important for accessibility.
+     */
+    this.closeButtonAccessibleName = "Close";
+    /**
+     * Specifies the time (ms) for the alert to be displayed.
+     * if `dismissTimeout = 0`, the alert will be always visible
+     * (unless is dismissed by the closeButton).
+     */
+    this.dismissTimeout = 0;
+    /**
+     * Determine src of the left image.
+     */
+    this.leftImgSrc = "";
+    /**
+     * Determine if the element is displayed or not.
+     */
+    this.presented = false;
+    /**
+     * Determine if the closeButton is displayed or not.
+     */
+    this.showCloseButton = false;
+    /**
+     * If dismissTimeout > 0, a progress bar is displayed at the bottom of the element
+     * showing the time left for the alert to show.
+     * The progress stops when the element is hovered.
+     */
+    this.showTimeoutBar = false;
+    /** Toggles the Pause on Hover functionality */
+    this.pauseOnHover = true;
+    /** Closes the alert when the close button is clicked.
+     * Also restarts the counter and sets its value to match dismissTimeout.
+     */
+    this.handleAlertClose = () => {
+      clearInterval(this.timerId);
+      this.presented = false;
+      this.close.emit();
+      this.countdown = this.dismissTimeout;
+    };
+    /** Countdown which initial state is dismissTimeout ms. */
+    this.countdown = this.dismissTimeout;
+    /** Counter decremental function */
+    this.counter = () => {
+      this.countdown -= this.timerInterval;
+    };
+    /** Starts a new countdown which interval is set in timerInterval,
+     * Only if is presented, dismissTimeout is greater than 0,
+     * and countdown is still running.
+     */
+    this.start = () => {
+      clearInterval(this.timerId);
+      if (this.presented && this.dismissTimeout !== 0 && this.countdown >= 0) {
+        this.timerId = setInterval(this.counter, this.timerInterval);
+      }
+    };
+    /** Pauses the countdown */
+    this.handleMouseEnter = () => {
+      clearInterval(this.timerId);
+    };
+    /** Resumes the countdown */
+    this.handleMouseLeave = () => {
+      this.start();
+    };
+  }
+  timeoutWatcher(newValue) {
+    if (newValue) {
+      this.countdown = newValue;
+      this.start();
+    }
+  }
+  presentedWatcher(newValue) {
+    if (newValue) {
+      this.start();
+    }
+  }
+  /** Countdown watcher that hides the alert if dismissTimeout is reached
+   * and stops the countdown.
+   * See handleAlertClose for more details. */
+  countdownWatcher(newValue) {
+    if (newValue <= 0) {
+      this.handleAlertClose();
+    }
+  }
+  componentDidLoad() {
+    this.start();
+  }
+  render() {
+    return (h(Host, { role: "alert", onMouseEnter: this.pauseOnHover && this.handleMouseEnter, onMouseLeave: this.pauseOnHover && this.handleMouseLeave, "aria-hidden": !this.presented ? "true" : "false", class: this.pauseOnHover && "pause-on-hover" }, this.presented && [
+      this.leftImgSrc && (h("img", { part: "image", class: "image", src: this.leftImgSrc, alt: "", "aria-hidden": "true", loading: "lazy" })),
+      h("div", { part: "content", class: "content" }, h("slot", { name: "content" })),
+      this.showCloseButton && (h("button", { part: "close-button", class: "close-button", type: "button", "aria-label": this.closeButtonAccessibleName, onClick: this.handleAlertClose }, h("slot", { name: "button", "aria-hidden": "true" }, h("div", { "aria-hidden": "true", class: "close-button-img" })))),
+      this.showTimeoutBar && (h("ch-timer", { part: "indicator-container", class: "indicator-container", exportparts: "indicator", progress: (this.countdown * 100) / this.dismissTimeout, accessibleName: `${this.countdown / 1000} seconds left`, "animation-time": this.dismissTimeout, presented: this.presented }))
+    ]));
+  }
+  static get watchers() { return {
+    "dismissTimeout": ["timeoutWatcher"],
+    "presented": ["presentedWatcher"],
+    "countdown": ["countdownWatcher"]
+  }; }
+  static get style() { return alertCss; }
+}, [1, "ch-alert", {
+    "timerInterval": [2, "timer-interval"],
+    "closeButtonAccessibleName": [1, "close-button-accessible-name"],
+    "dismissTimeout": [2, "dismiss-timeout"],
+    "leftImgSrc": [1, "left-img-src"],
+    "presented": [1540],
+    "showCloseButton": [4, "show-close-button"],
+    "showTimeoutBar": [4, "show-timeout-bar"],
+    "pauseOnHover": [4, "pause-on-hover"],
+    "countdown": [1026]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-alert", "ch-timer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChAlert$1);
+      }
+      break;
+    case "ch-timer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChAlert = ChAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChAlert, defineCustomElement };

package/dist/components/ch-suggest-list-item2.js

@@ -15,11 +15,49 @@ const ChSuggestListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
+    this.getItemIndexes = () => {
+      const parentElement = this.el.parentElement;
+      if (parentElement.nodeName === "CH-SUGGEST") {
+        const chSuggest = parentElement;
+        let itemIndex = -1;
+        const suggestListItemsArray = Array.from(chSuggest.querySelectorAll(":scope > ch-suggest-list-item"));
+        for (let index = 0; index < suggestListItemsArray.length; index++) {
+          // Then get the item index
+          if (suggestListItemsArray[index] === this.el) {
+            itemIndex = index;
+            break;
+          }
+        }
+        return {
+          itemIndex: itemIndex,
+          listIndex: undefined // the items does not belongs to a list
+        };
+      }
+      else if (parentElement.nodeName === "CH-SUGGEST-LIST") {
+        const chSuggestList = parentElement;
+        const chSuggestListsArray = Array.from(chSuggestList.parentElement.querySelectorAll(":scope > ch-suggest-list"));
+        const listIndex = chSuggestListsArray.findIndex(list => {
+          return list === chSuggestList;
+        });
+        if (listIndex !== -1) {
+          const listItemsArray = Array.from(chSuggestList.querySelectorAll("ch-suggest-list-item"));
+          const itemIndex = listItemsArray.findIndex(item => {
+            return item === this.el;
+          });
+          return {
+            itemIndex: itemIndex,
+            listIndex: listIndex
+          };
+        }
+      }
+    };
     this.handleClick = () => {
+      const indexes = this.getItemIndexes();
       this.itemSelected.emit({
         value: this.value || this.el.innerText,
-        caption: this.el.innerText,
-        description: this.description
+        description: this.el.innerText,
+        icon: this.iconSrc,
+        indexes: indexes
       });
     };
     this.handleKeyDown = (e) => {
@@ -34,14 +72,13 @@ const ChSuggestListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { role: "listitem", onKeyDown: this.handleKeyDown }, h("button", { part: "button", onClick: this.handleClick }, h("slot", { name: "icon" }), h("div", { class: "content-wrapper", part: "content-wrapper" }, h("slot", null), this.description && (h("span", { part: "description" }, this.description))))));
+    return (h(Host, { role: "listitem", onKeyDown: this.handleKeyDown }, h("button", { part: "button", onClick: this.handleClick }, h("slot", { name: "icon" }), h("div", { class: "content-wrapper", part: "content-wrapper" }, h("slot", null)))));
   }
   static get delegatesFocus() { return true; }
   get el() { return this; }
   static get style() { return chSuggestListItemCss; }
 }, [17, "ch-suggest-list-item", {
     "iconSrc": [1, "icon-src"],
-    "description": [1],
     "value": [8]
   }]);
 function defineCustomElement() {

package/dist/components/ch-suggest2.js

@@ -11,7 +11,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.inputChanged = createEvent(this, "inputChanged", 7);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.keyEventsDictionary = {
       ArrowDown: (e) => {
         const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN);
@@ -38,7 +38,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
      * The debounce amount in milliseconds (This is the time the suggest waits after the user has finished typing, to show the suggestions).
      */
-    this.debounce = 500;
+    this.debounce = 300;
     /**
      * The label position
      */
@@ -126,7 +126,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.handleInput = (e) => {
       const inputValue = e.target.value;
-      this.caption = inputValue;
+      this.value = inputValue;
       if (this.timeoutReference) {
         clearTimeout(this.timeoutReference);
       }
@@ -157,9 +157,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       partWindow.scrollTop = partWindow.scrollHeight;
     };
     this.processInputEvent = (inputValue) => {
-      this.inputChanged.emit(inputValue);
-      this.caption = inputValue;
-      this.value = undefined;
+      this.valueChanged.emit(inputValue);
       this.evaluateWindowMaxHeight();
     };
     this.closeWindow = () => {
@@ -175,7 +173,6 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // 7.LISTENERS //
   itemSelectedHandler(event) {
     this.value = event.detail.value;
-    this.caption = event.detail.caption;
     this.closeWindow();
   }
   focusChangeAttemptHandler(event) {
@@ -210,7 +207,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.caption, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
+    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
   }
   static get delegatesFocus() { return true; }
   get el() { return this; }
@@ -221,7 +218,6 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "labelPosition": [513, "label-position"],
     "showLabel": [4, "show-label"],
     "value": [1025],
-    "caption": [1025],
     "showHeader": [4, "show-header"],
     "suggestTitle": [1, "suggest-title"],
     "cursorEnd": [4, "cursor-end"],

package/dist/components/ch-timer.js

@@ -0,0 +1,6 @@
+import { C as ChTimer$1, d as defineCustomElement$1 } from './timer.js';
+
+const ChTimer = ChTimer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTimer, defineCustomElement };

package/dist/components/gx-ide-new-environment.js

@@ -36,7 +36,7 @@ const GxIdeNewEnvironment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       const gxOptions = [];
       const frontEndValues = this.frontEndsEl.getValues();
       frontEndValues.then(result => {
-        result.forEach(checkbox => {
+        result.forEach((checkbox) => {
           gxOptions.push({
             id: checkbox.id,
             checked: checkbox.value,
@@ -99,13 +99,14 @@ const GxIdeNewEnvironment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
       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))))));
+      return (h("gxg-tab", { tab: "basic", "no-padding": 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.frontEnd = undefined;
     this.frontEnds = undefined;
     this.disableAdvanced = false;
     this.setAsTarget = true;
@@ -133,6 +134,7 @@ const GxIdeNewEnvironment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
 }, [1, "gx-ide-new-environment", {
     "hideTopBar": [4, "hide-top-bar"],
     "dataStores": [16],
+    "frontEnd": [16],
     "frontEnds": [16],
     "disableAdvanced": [4, "disable-advanced"],
     "setAsTarget": [4, "set-as-target"],

package/dist/components/gx-ide-new-object.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GxIdeNewObject extends Components.GxIdeNewObject, HTMLElement {}
+export const GxIdeNewObject: {
+  prototype: GxIdeNewObject;
+  new (): GxIdeNewObject;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/gx-ide-new-object.js

@@ -0,0 +1,247 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { L as Locale } from './locale.js';
+import { d as defineCustomElement$d } from './icon.js';
+import { d as defineCustomElement$c } from './entity-selector.js';
+import { d as defineCustomElement$b } from './button.js';
+import { d as defineCustomElement$a } from './container2.js';
+import { d as defineCustomElement$9 } from './form-checkbox.js';
+import { d as defineCustomElement$8 } from './form-text.js';
+import { d as defineCustomElement$7 } from './icon2.js';
+import { d as defineCustomElement$6 } from './gxg-label2.js';
+import { d as defineCustomElement$5 } from './list-box.js';
+import { d as defineCustomElement$4 } from './list-box-item.js';
+import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const newObjectCss = ".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}.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}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.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}.gx-ide-main{flex-grow:1;overflow-y:auto;}.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;}.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}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-new-object--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{grid-template-columns:auto 1fr}.first-row{grid-template-columns:1fr 3fr;grid-template-rows:1fr}.first-row *:nth-child(3){grid-column:1/3}";
+
+const GxIdeNewObject$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.create = createEvent(this, "create", 7);
+    this.validateName = createEvent(this, "validateName", 7);
+    this.cancel = createEvent(this, "cancel", 7);
+    this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
+    this.descriptionModifiedByUser = false;
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.renderModuleFolder = () => {
+      if (this.selectedType.hasModule || this.selectedType.hasFolder) {
+        let labelDescription = this._componentLocale.moduleFolder;
+        if (!this.selectedType.hasFolder) {
+          labelDescription = this._componentLocale.moduleOnly;
+        }
+        else if (!this.selectedType.hasModule) {
+          labelDescription = this._componentLocale.folderOnly;
+        }
+        return [
+          h("gxg-label", { labelPosition: "start" }, labelDescription),
+          h("gx-ide-entity-selector", { value: this.parent, defaultValue: this.defaultParent, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.parentEl = el), part: "module" })
+        ];
+      }
+      return null;
+    };
+    /**
+     * This method initializes tha name value. It depends on 'this.selectedType'
+     */
+    this.init = () => {
+      if (this.selectedType && this.selectedType.name.length > 0) {
+        this.name = this.selectedType.name;
+        this.description = this.selectedType.name;
+      }
+    };
+    this.onInputNameHandler = (e) => {
+      const name = e.detail;
+      if (!this.descriptionModifiedByUser) {
+        // description should be equal to name, unless the description was already modified by the user.
+        this.descriptionEl.value = name;
+      }
+      this.processName(name);
+    };
+    this.onBlurNameHandler = () => {
+      this.validateNameHandler(this.nameEl.value);
+    };
+    this.onInputDescriptionHandler = (e) => {
+      this.description = e.detail;
+      this.descriptionModifiedByUser = true;
+    };
+    this.processName = (name) => {
+      if (this.validateNameTimeoutRef) {
+        clearTimeout(this.validateNameTimeoutRef);
+      }
+      this.validateNameTimeoutRef = setTimeout(() => {
+        this.validateNameHandler(name);
+      }, 300);
+    };
+    this.validateNameHandler = async (name) => {
+      const result = await this.validateNameCallback(name);
+      if (result !== undefined) {
+        // the name is not valid. display message
+        this.nameEl.validationMessage = result;
+        this.nameEl.validationStatus = "error";
+        this.nameIsValid = false;
+      }
+      else {
+        // valid name
+        this.nameEl.validationMessage = null;
+        this.nameEl.validationStatus = "indeterminate";
+        this.nameIsValid = true;
+      }
+    };
+    this.createCallbackHandler = async () => {
+      var _a;
+      const data = {
+        typeId: (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.id,
+        name: this.nameEl.value,
+        description: this.descriptionEl.value,
+        moduleId: this.parentEl.value.id
+      };
+      await this.createCallback(data);
+    };
+    this.cancelCallbackHandler = async () => {
+      await this.cancelCallback();
+    };
+    this.categoryOnClickHandler = (category) => {
+      this.selectedCategory = category;
+      if (category.types[0]) {
+        this.selectedType = category.types[0];
+      }
+    };
+    this.typeOnClickHandler = (type) => {
+      this.selectedType = type;
+    };
+    this.selectedCategory = undefined;
+    this.selectedType = undefined;
+    this.nameIsValid = false;
+    this.name = undefined;
+    this.description = undefined;
+    this.shadow = false;
+    this.typeCategories = undefined;
+    this.parent = undefined;
+    this.defaultParent = undefined;
+    this.selectModuleCallback = undefined;
+    this.validateNameCallback = undefined;
+    this.createCallback = undefined;
+    this.cancelCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this.selectedCategory = this.typeCategories[0];
+    this.selectedType = this.typeCategories[0].types[0];
+    this.init();
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidLoad() {
+    this.nameEl.focus();
+    this.validateNameHandler(this.name);
+    this.componentDidLoadEvent.emit(true);
+  }
+  // 10.LOCAL METHODS (RENDER) //
+  // 11.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: {
+        "gxi-new-kb": true,
+        "gxi-new-object--shadow": this.shadow
+      } }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("main", { class: "main" }, h("gxg-container", { fieldset: true, displayBorderBottom: true }, h("div", { class: "grid first-row" }, this.typeCategories.length > 1 ? (h("gxg-list-box", { "single-selection": true, id: "list-box-category", "the-title": this._componentLocale.categorySelection, height: "100%" }, this.typeCategories.map(category => (h("gxg-list-box-item", { index: Number(category.id), icon: category.icon, part: `${category}-${category.id}`, onClick: () => this.categoryOnClickHandler(category) }, category.name))))) : null, h("gxg-list-box", { "single-selection": true, id: "list-box-type", "the-title": this._componentLocale.typeSelection, height: "100%" }, this.selectedCategory.types
+      ? this.selectedCategory.types.map(type => (h("gxg-list-box-item", { index: Number(type.id), icon: type.icon, selected: this.selectedType.id === type.id, part: `${type}-${type.id}`, onClick: () => this.typeOnClickHandler(type) }, type.name)))
+      : null), h("gxg-title", { type: "title-05" }, "Text about the ", this.selectedType.name))), h("gxg-container", { fieldset: true }, h("div", { class: "grid" }, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.name, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.description), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.description, ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-container", { fieldset: true, displayBorderTop: true }, h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel))))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/new-object"]; }
+  get el() { return this; }
+  static get style() { return newObjectCss; }
+}, [1, "gx-ide-new-object", {
+    "shadow": [4],
+    "typeCategories": [16],
+    "parent": [16],
+    "defaultParent": [16],
+    "selectModuleCallback": [16],
+    "validateNameCallback": [16],
+    "createCallback": [16],
+    "cancelCallback": [16],
+    "selectedCategory": [32],
+    "selectedType": [32],
+    "nameIsValid": [32],
+    "name": [32],
+    "description": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-new-object", "ch-icon", "gx-ide-entity-selector", "gxg-button", "gxg-container", "gxg-form-checkbox", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-list-box", "gxg-list-box-item", "gxg-title", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-new-object":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeNewObject$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "gx-ide-entity-selector":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "gxg-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "gxg-form-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "gxg-form-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-list-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-list-box-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxIdeNewObject = GxIdeNewObject$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeNewObject, defineCustomElement };