@genexus/genexus-ide-ui 0.0.36 → 0.0.38

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/gx-ide-team-dev-update-partial-selection.js

@@ -26,21 +26,19 @@ const GxIdeTeamDevUpdatePartialSelection$1 = /*@__PURE__*/ proxyCustomElement(cl
     this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
     // 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) {
@@ -54,8 +52,8 @@ const GxIdeTeamDevUpdatePartialSelection$1 = /*@__PURE__*/ proxyCustomElement(cl
     this.cancelHandler = () => {
       this.cancelCallback();
     };
-    this.deselectAllHandler = () => {
-      this.chGridEl.selectAllRows(false);
+    this.removeAllHandler = () => {
+      this.selection = [];
     };
     this.listenChanges = () => {
       // for grid selection
@@ -90,7 +88,7 @@ const GxIdeTeamDevUpdatePartialSelection$1 = /*@__PURE__*/ proxyCustomElement(cl
   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 assetsDirs() { return ["gx-ide-assets/team-dev-update-partial-selection"]; }
   get el() { return this; }

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

package/dist/components/timer.js

@@ -0,0 +1,61 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const timerCss = "@keyframes transition{from{width:100%}to{width:0}}.indicator{height:5px;background-color:#cdcd44;animation:var(--animation-time) linear 1 forwards transition}";
+
+const ChTimer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Sets the progress propiety to determine the progress.
+     */
+    this.progress = 0;
+    /**
+     * Sets the accesible name of the timer.
+     */
+    this.accessibleName = "timer";
+    /**
+     * Sets the animationTime to set the custom var for the css animation.
+     */
+    this.animationTime = 0;
+    /**
+     * Sets the presented property to handle the component presentation.
+     */
+    this.presented = false;
+  }
+  render() {
+    const accessibilityAttributes = {
+      role: "timer",
+      "aria-live": "true",
+      "aria-labelledby": this.accessibleName,
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": this.progress
+    };
+    return (h(Host, null, this.presented && this.progress >= 0 && (h("div", Object.assign({}, accessibilityAttributes, { part: "indicator", class: "indicator", style: {
+        "--animation-time": `${this.animationTime}ms`
+      } })))));
+  }
+  static get style() { return timerCss; }
+}, [1, "ch-timer", {
+    "progress": [2],
+    "accessibleName": [1, "accessible-name"],
+    "animationTime": [2, "animation-time"],
+    "presented": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-timer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-timer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTimer);
+      }
+      break;
+  } });
+}
+
+export { ChTimer as C, defineCustomElement as d };

package/dist/esm/ch-alert.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-0da01575.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"]
+  }; }
+};
+ChAlert.style = alertCss;
+
+export { ChAlert as ch_alert };

package/dist/esm/ch-suggest_4.entry.js

@@ -10,7 +10,7 @@ const ARROW_UP$1 = "ArrowUp";
 const ChSuggest = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.inputChanged = createEvent(this, "inputChanged", 7);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
     this.keyEventsDictionary = {
       ArrowDown: (e) => {
         const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN$1);
@@ -37,7 +37,7 @@ const ChSuggest = class {
     /**
      * 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
      */
@@ -125,7 +125,7 @@ const ChSuggest = class {
      */
     this.handleInput = (e) => {
       const inputValue = e.target.value;
-      this.caption = inputValue;
+      this.value = inputValue;
       if (this.timeoutReference) {
         clearTimeout(this.timeoutReference);
       }
@@ -156,9 +156,7 @@ const ChSuggest = class {
       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 = () => {
@@ -174,7 +172,6 @@ const ChSuggest = class {
   // 7.LISTENERS //
   itemSelectedHandler(event) {
     this.value = event.detail.value;
-    this.caption = event.detail.caption;
     this.closeWindow();
   }
   focusChangeAttemptHandler(event) {
@@ -209,7 +206,7 @@ const ChSuggest = class {
   }
   // 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 getElement(this); }
@@ -250,11 +247,49 @@ const ChSuggestListItem = class {
     // 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) => {
@@ -269,7 +304,7 @@ const ChSuggestListItem = class {
   }
   // 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 getElement(this); }

package/dist/esm/ch-timer.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, h, H as Host } from './index-0da01575.js';
+
+const timerCss = "@keyframes transition{from{width:100%}to{width:0}}.indicator{height:5px;background-color:#cdcd44;animation:var(--animation-time) linear 1 forwards transition}";
+
+const ChTimer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Sets the progress propiety to determine the progress.
+     */
+    this.progress = 0;
+    /**
+     * Sets the accesible name of the timer.
+     */
+    this.accessibleName = "timer";
+    /**
+     * Sets the animationTime to set the custom var for the css animation.
+     */
+    this.animationTime = 0;
+    /**
+     * Sets the presented property to handle the component presentation.
+     */
+    this.presented = false;
+  }
+  render() {
+    const accessibilityAttributes = {
+      role: "timer",
+      "aria-live": "true",
+      "aria-labelledby": this.accessibleName,
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": this.progress
+    };
+    return (h(Host, null, this.presented && this.progress >= 0 && (h("div", Object.assign({}, accessibilityAttributes, { part: "indicator", class: "indicator", style: {
+        "--animation-time": `${this.animationTime}ms`
+      } })))));
+  }
+};
+ChTimer.style = timerCss;
+
+export { ChTimer as ch_timer };