@genexus/genexus-ide-ui 0.0.37 → 0.0.38

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 };

package/dist/components/gx-ide-references.js

@@ -31,7 +31,10 @@ const renderSuggestLists = (suggestData) => {
   return [];
 };
 const renderSuggestListsItem = (suggestItem) => {
-  return (h("ch-suggest-list-item", { description: suggestItem.description, value: suggestItem.value }, [suggestItem.caption, suggestItem.icon && renderIcon(suggestItem.icon)]));
+  return (h("ch-suggest-list-item", { value: suggestItem.value }, [
+    suggestItem.description || suggestItem.value,
+    suggestItem.icon && renderIcon(suggestItem.icon)
+  ]));
 };
 const renderIcon = (iconName) => {
   return h("gxg-icon", { color: "auto", type: iconName, slot: "icon" });
@@ -54,7 +57,6 @@ const convertObjectDataToSuggestData = (selectorCategoriesData) => {
       selectorCategory.items.forEach((objectData) => {
         const suggestItem = {
           value: objectData.id,
-          caption: objectData.name,
           description: objectData.description,
           icon: objectData.icon
         };
@@ -65,27 +67,6 @@ const convertObjectDataToSuggestData = (selectorCategoriesData) => {
   }
   return suggestData;
 };
-/**
- * @description Keeps an updated state of the last suggested categories objects passed by the host.
- */
-const updateSuggestedObjects = (selectorCategoryData) => {
-  const suggestedObjects = [];
-  if (selectorCategoryData === null || selectorCategoryData === void 0 ? void 0 : selectorCategoryData.length) {
-    selectorCategoryData.forEach(category => {
-      if (category.items) {
-        category.items.forEach(object => {
-          suggestedObjects.push({
-            id: object.id,
-            icon: object.icon,
-            name: object.name,
-            description: object.description
-          });
-        });
-      }
-    });
-  }
-  return suggestedObjects;
-};
 /**
  * @description This function converts ReferenceData[] data to GxgTreeItemData[]
  */
@@ -122,14 +103,14 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     this.__attachShadow();
     this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
-    /**
-     * Keeps an array of the last suggested objects, returned by selectorSourceCallback
-     */
-    this.suggestedObjects = [];
     /**
      * The references messages max. width that appear if the tree is empty or could not be retrieved.
      */
     this.referencesMessagesMaxWidth = "200px";
+    /**
+     * The last SelectorCategoryData[] returned by selectorSourceCallback
+     */
+    this.selectorCategoryData = [];
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
@@ -138,21 +119,20 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      */
     this.attachSelectObjectListener = () => {
       this.selectObjectSuggestEl.addEventListener("itemSelected", (e) => {
-        const itemValue = e.detail.value;
-        this.selectedObject = this.suggestedObjects.find(item => {
-          return item.id === itemValue;
-        });
+        const categoryIndex = e.detail.indexes.listIndex;
+        const itemIndex = e.detail.indexes.itemIndex;
+        this.selectedObject =
+          this.selectorCategoryData[categoryIndex].items[itemIndex];
       });
     };
     /**
-     * This handler gets fired every time the value of the 'Select Object' ch-suggest changes. Then, it calls the 'updateSuggestedObjects' method, that keeps the state of the last suggested objects that were passed bu the host. Also, it shows the suggested objects on the ch-suggest box.
+     * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
      */
     this.selectObjectValueChangedHandler = async (e) => {
       const value = e.detail;
       this.selectorSourceCallback(value)
         .then(result => {
-        /* update selected objects state*/
-        this.suggestedObjects = updateSuggestedObjects(result);
+        this.selectorCategoryData = result;
         /* show suggestions*/
         this.objectsSuggestions = convertObjectDataToSuggestData(result);
       })
@@ -319,7 +299,7 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   // 10.RENDER() FUNCTION //
   render() {
     var _a, _b, _c, _d, _e, _f;
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.id, onInputChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
         "header__bottom": true,
         "header__bottom--hidden": this.barHidden
       } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, justifyContent: "center", fullHeight: true, part: "referenced-by-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length) }, checkbox: false, onTreeItemStateChanged: this.referencesPanelStateChangedHandler(false), part: "referenced-by-tree" }, renderTreeItems(this.referencedByTreeData)), !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "referenced-by-text" }, ((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) === 0

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export { GxIdeListSelector as GxIdeListSelector } from '../types/components/list
 export { GxIdeListSelectorItem as GxIdeListSelectorItem } from '../types/components/list-selector/list-selector-item/list-selector-item';
 export { GxIdeNewEnvironment as GxIdeNewEnvironment } from '../types/components/new-environment/new-environment';
 export { GxIdeNewKb as GxIdeNewKb } from '../types/components/new-kb/new-kb';
+export { GxIdeNewObject as GxIdeNewObject } from '../types/components/new-object/new-object';
 export { GxIdeObjectSelector as GxIdeObjectSelector } from '../types/components/object-selector/object-selector';
 export { GxIdeReferences as GxIdeReferences } from '../types/components/references/references';
 export { GxIdeTeamDevCommit as GxIdeTeamDevCommit } from '../types/components/team-dev-commit/team-dev-commit';

package/dist/components/index.js

@@ -2,6 +2,7 @@ export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/intern
 export { ChAccordion, defineCustomElement as defineCustomElementChAccordion } from './ch-accordion.js';
 export { ChActionGroup, defineCustomElement as defineCustomElementChActionGroup } from './ch-action-group.js';
 export { ChActionGroupItem, defineCustomElement as defineCustomElementChActionGroupItem } from './ch-action-group-item.js';
+export { ChAlert, defineCustomElement as defineCustomElementChAlert } from './ch-alert.js';
 export { ChCheckbox, defineCustomElement as defineCustomElementChCheckbox } from './ch-checkbox.js';
 export { ChDragBar, defineCustomElement as defineCustomElementChDragBar } from './ch-drag-bar.js';
 export { ChDropdown, defineCustomElement as defineCustomElementChDropdown } from './ch-dropdown.js';
@@ -49,6 +50,7 @@ export { ChTestActionGroup, defineCustomElement as defineCustomElementChTestActi
 export { ChTestDropdown, defineCustomElement as defineCustomElementChTestDropdown } from './ch-test-dropdown.js';
 export { ChTestTreeX, defineCustomElement as defineCustomElementChTestTreeX } from './ch-test-tree-x.js';
 export { ChTextblock, defineCustomElement as defineCustomElementChTextblock } from './ch-textblock.js';
+export { ChTimer, defineCustomElement as defineCustomElementChTimer } from './ch-timer.js';
 export { ChTree, defineCustomElement as defineCustomElementChTree } from './ch-tree.js';
 export { ChTreeItem, defineCustomElement as defineCustomElementChTreeItem } from './ch-tree-item.js';
 export { ChTreeX, defineCustomElement as defineCustomElementChTreeX } from './ch-tree-x.js';
@@ -65,6 +67,7 @@ export { GxIdeListSelector, defineCustomElement as defineCustomElementGxIdeListS
 export { GxIdeListSelectorItem, defineCustomElement as defineCustomElementGxIdeListSelectorItem } from './gx-ide-list-selector-item.js';
 export { GxIdeNewEnvironment, defineCustomElement as defineCustomElementGxIdeNewEnvironment } from './gx-ide-new-environment.js';
 export { GxIdeNewKb, defineCustomElement as defineCustomElementGxIdeNewKb } from './gx-ide-new-kb.js';
+export { GxIdeNewObject, defineCustomElement as defineCustomElementGxIdeNewObject } from './gx-ide-new-object.js';
 export { GxIdeObjectSelector, defineCustomElement as defineCustomElementGxIdeObjectSelector } from './gx-ide-object-selector.js';
 export { GxIdeReferences, defineCustomElement as defineCustomElementGxIdeReferences } from './gx-ide-references.js';
 export { GxIdeTeamDevCommit, defineCustomElement as defineCustomElementGxIdeTeamDevCommit } from './gx-ide-team-dev-commit.js';

package/dist/components/list-box-item.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './icon2.js';
 import { d as defineCustomElement$2 } from './gxg-label2.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const listBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:root{--ui-animaton-speed:0.2s}.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}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.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-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}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:block;font-family:var(--font-family-primary);font-size:inherit;color:inherit;display:flex;box-sizing:border-box;align-items:center;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;outline:none}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-02);width:100%;height:var(--gxg-list-item-height--spaced);box-sizing:border-box}:host .icon{margin-inline-end:var(--spacing-comp-01);flex-shrink:0}:host gxg-form-checkbox{margin-inline-end:var(--spacing-comp-01)}:host gxg-form-checkbox::part(box){outline:none}:host(:not([disabled])){cursor:pointer !important}:host(:hover:not([selected])){background-color:var(--gxg-background-color-item-hover)}:host(.has-icon.no-checkbox) .container{padding-inline-start:var(--spacing-comp-01)}:host([selected]){background-color:var(--gxg-background-color-item-selected);color:var(--gxg-color-item-active)}:host([highlighted]){background-color:var(--gxg-background-color-item-active);color:var(--color-always-white)}:host(.large) .container{padding:var(--spacing-comp-01)}";
+const listBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:root{--ui-animaton-speed:0.2s}.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}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.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-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}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{display:block;font-family:var(--font-family-primary);font-size:inherit;color:inherit;display:flex;box-sizing:border-box;align-items:center;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;outline:none}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-02);width:100%;height:var(--gxg-list-item-height--spaced);box-sizing:border-box}:host .icon{margin-inline-end:var(--spacing-comp-01);flex-shrink:0}:host gxg-form-checkbox{margin-inline-end:var(--spacing-comp-01)}:host gxg-form-checkbox::part(box){outline:none}:host(:not([disabled])){cursor:pointer !important}:host(:hover:not([selected])){background-color:var(--gxg-background-color-item-hover)}:host(.has-icon.no-checkbox) .container{padding-inline-start:var(--spacing-comp-01)}.description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}:host([highlighted]){background-color:var(--gxg-background-color-item-selected);color:var(--color-on-background)}:host([selected]){background-color:var(--gxg-background-color-item-active);color:var(--gxg-color-item-active)}:host(.large) .container{padding:var(--spacing-comp-01)}";
 
 const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -121,7 +121,7 @@ const GxgListboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       }, onClick: this.itemClickedFunc.bind(this),
       // onMouseOver={this.onMouseOver.bind(this)}
       // onMouseOut={this.onMouseOut.bind(this)}
-      exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: { container: true, "form-element": true } }, this.checkbox && !this.disabled ? (h("gxg-form-checkbox", { tabindex: "-1", checked: this.checked, onClick: this.handleCheckboxClick, disabled: this.disabled, part: this.parts.checkbox })) : null, this.icon !== undefined ? (h("gxg-icon", { class: "icon", color: this.iconColor(), size: "regular", type: this.icon })) : null, h("slot", null))));
+      exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: { container: true, "form-element": true } }, this.checkbox && !this.disabled ? (h("gxg-form-checkbox", { tabindex: "-1", checked: this.checked, onClick: this.handleCheckboxClick, disabled: this.disabled, part: this.parts.checkbox })) : null, this.icon !== undefined ? (h("gxg-icon", { class: "icon", color: this.iconColor(), size: "regular", type: this.icon })) : null, h("div", { class: "description" }, h("slot", null)))));
   }
   get el() { return this; }
   static get style() { return listBoxItemCss; }