@genexus/genexus-ide-ui 0.0.37 → 0.0.39

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

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a32426a.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) {
+    index.registerInstance(this, hostRef);
+    this.close = index.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 (index.h(index.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 && (index.h("img", { part: "image", class: "image", src: this.leftImgSrc, alt: "", "aria-hidden": "true", loading: "lazy" })),
+      index.h("div", { part: "content", class: "content" }, index.h("slot", { name: "content" })),
+      this.showCloseButton && (index.h("button", { part: "close-button", class: "close-button", type: "button", "aria-label": this.closeButtonAccessibleName, onClick: this.handleAlertClose }, index.h("slot", { name: "button", "aria-hidden": "true" }, index.h("div", { "aria-hidden": "true", class: "close-button-img" })))),
+      this.showTimeoutBar && (index.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;
+
+exports.ch_alert = ChAlert;

package/dist/cjs/ch-grid_8.cjs.entry.js

@@ -2819,7 +2819,7 @@ const ChGridSettingsColumns = class {
 };
 ChGridSettingsColumns.style = chGridSettingsColumnsCss;
 
-const gxgGridCss = ":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}:root{--indent:var(--spacing-comp-02)}:host{display:block}ch-grid{border:1px solid var(--gray-02);--focus-style:2px solid var(--color-primary-active)}ch-grid::part(main){}ch-grid::part(main)::-webkit-scrollbar{width:6px;height:6px}ch-grid::part(main)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}gxg-grid.no-border ch-grid{border:0}gxg-grid:focus-visible,ch-grid:focus-visible{outline:none}ch-grid::part(header),ch-grid::part(footer){padding:var(--spacing-comp-01);background-color:var(--color-background)}ch-grid-actionbar ch-grid-action-refresh,ch-grid-actionbar ch-grid-action-settings,ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending),ch-grid-column::part(bar-settings-button),ch-grid-column::part(settings-close),ch-grid::part(settings-close),ch-grid-cell::part(drag-icon),ch-grid-cell::part(caret),ch-grid-rowset-legend::part(caret){display:inline-flex;align-items:center;justify-content:center}ch-grid-actionbar ch-grid-action-refresh:before,ch-grid-actionbar ch-grid-action-settings:before,ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before,ch-grid-column::part(bar-settings-button):before,ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before,ch-grid-cell::part(drag-icon):before,ch-grid-cell::part(caret):before,ch-grid-rowset-legend::part(caret):before{content:\"\";display:block;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;width:70%;height:70%;background-color:var(--color-on-secondary)}ch-grid-action-refresh,ch-grid-action-settings{width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);display:inline-block}ch-grid-action-refresh:hover,ch-grid-action-settings:hover{background-color:var(--color-secondary-hover)}ch-grid-action-refresh:focus-visible,ch-grid-action-settings:focus-visible{outline:var(--focus-style)}ch-grid-action-refresh:before{-webkit-mask-image:var(--refreshIconUrl)}ch-grid-action-settings:before{-webkit-mask-image:var(--settingshIconUrl)}ch-grid{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--gray-06)}ch-grid-column{background-color:var(--color-background);font-weight:var(--font-weight-bold);padding:var(--spacing-comp-02) !important;cursor:pointer}ch-grid-column::part(bar){gap:var(--spacing-comp-02);width:100%}ch-grid-column:not([sort-direction])::part(bar-sort){display:none}ch-grid-column::part(bar-settings){line-height:0}ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending){width:var(--spacing-comp-03);height:var(--spacing-comp-03);margin-left:var(--spacing-comp-02);margin-right:var(--spacing-comp-01)}ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before{width:100%;height:100%;-webkit-mask-size:200%}ch-grid-column::part(bar-sort-descending):before{-webkit-mask-image:var(--barSortDescendingIconUrl)}ch-grid-column::part(bar-sort-ascending):before{-webkit-mask-image:var(--barSortAscendingIconUrl)}ch-grid-column::part(bar-resize-split){width:3px;background-color:var(--gray-02)}ch-grid-column:last-child::part(bar-resize-split){display:none}ch-grid-column::part(bar-settings-button){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);border:none;background-color:transparent;cursor:pointer}ch-grid-column::part(bar-settings-button):hover{background-color:var(--gray-02)}ch-grid-column::part(bar-settings-button):focus-visible{outline:var(--focus-style)}ch-grid-column::part(bar-settings-button):before{-webkit-mask-image:var(--barSettingsButtonIconUrl)}ch-grid-row{background-color:var(--color-background);color:var(--gray-04);border:2px solid transparent}ch-grid-row:nth-of-type(odd){background-color:var(--gray-00)}ch-grid-row[highlighted]{background-color:var(--color-hover)}ch-grid-row[dragging]{box-shadow:var(--box-shadow-03)}ch-grid-row[selected]>ch-grid-cell:not([selected]){background-color:var(--color-secondary-enabled)}ch-grid-cell[selected]{z-index:1;background-color:var(--color-secondary-enabled) !important}ch-grid-row[selected]>ch-grid-cell{color:var(--color-on-secondary)}ch-grid-row[selected]+ch-grid-row[selected] ch-grid-cell{border-top-color:var(--color-secondary-hover)}ch-grid-cell{box-sizing:border-box;padding-inline-start:var(--spacing-comp-02) !important;padding-inline-end:var(--spacing-comp-02) !important;padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01);align-items:center}ch-grid-column::part(settings-mask){cursor:default}ch-grid-column::part(settings-mask),ch-grid::part(settings-mask){background-color:rgba(0, 0, 0, 0.3);cursor:arrow;color:var(--color-on-secondary)}ch-grid-column::part(settings-window),ch-grid::part(settings-window){background-color:var(--color-background);width:100%;max-width:600px;padding:var(--spacing-comp-03);border-radius:var(--border-width-lg);box-shadow:var(--box-shadow-04)}ch-grid::part(settings-window){margin:0 var(--spacing-comp-05)}ch-grid-column::part(settings-header),ch-grid::part(settings-header){display:flex;align-items:center;gap:var(--spacing-comp-04);justify-content:space-between;border-bottom:var(--border-width-sm) solid var(--gray-02);padding-bottom:var(--spacing-comp-02);margin-bottom:var(--spacing-comp-03);font-weight:var(--font-weight-bold)}ch-grid-column::part(settings-close),ch-grid::part(settings-close){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);font-size:0;border:0}ch-grid-column::part(settings-close):hover,ch-grid::part(settings-close):hover{background-color:var(--color-secondary-hover)}ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before{-webkit-mask-image:var(--settingsCloseIconUrl)}ch-grid-column::part(settings-close):focus-visible,ch-grid::part(settings-close):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns){gap:var(--spacing-comp-03)}ch-grid::part(settings-columns-label){display:inline-flex;align-items:center;gap:var(--spacing-comp-03);cursor:pointer;height:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible),ch-grid-cell::part(selector),ch-grid-column::part(selector){position:relative;margin:0;height:var(--spacing-comp-04);width:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible):focus-visible,ch-grid-cell::part(selector):focus-visible,ch-grid-column::part(selector):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns-visible):before,ch-grid-cell::part(selector):before,ch-grid-column::part(selector):before{cursor:pointer;content:\"\";display:inline-block;position:relative;height:var(--spacing-comp-04);width:var(--spacing-comp-04);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:var(--border-radius-md);border-color:var(--gray-04);box-sizing:border-box;flex-shrink:0;background:var(--color-background)}ch-grid::part(settings-columns-visible):after,ch-grid-cell::part(selector):after,ch-grid-column::part(selector):after{opacity:0;display:block;position:absolute;content:\"\";left:6px;top:3px;width:3px;height:7px;border:solid;border-color:var(--color-primary-hover);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;cursor:pointer}ch-grid-column::part(indeterminate):after{opacity:1;display:block;position:absolute;content:\"\";left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--color-primary-hover);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}ch-grid::part(settings-columns-visible-checked):before,ch-grid-cell::part(checked):before,ch-grid-column::part(checked):before{border-color:var(--color-primary-hover)}ch-grid::part(settings-columns-visible-checked):after,ch-grid-cell::part(checked):after,ch-grid-column::part(checked):after{opacity:1}ch-grid-cell::part(drag-icon):before{width:var(--spacing-comp-04);height:var(--spacing-comp-04);cursor:grab}ch-grid-cell::part(drag-icon):before{-webkit-mask-image:var(--dragIconUrl)}ch-grid::part(row-actions){padding-top:2px;right:var(--spacing-comp-02)}ch-grid-column::part(selector){margin-right:8px}ch-grid-rowset-legend{background-color:var(--gray-01);padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-02);padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01)}ch-grid>ch-grid-rowset:first-of-type ch-grid-rowset-legend{border-top:1px solid var(--color-background)}ch-grid-rowset-legend{margin-inline-start:calc(var(--indent) * (var(--level) - 1));display:flex;align-items:center;gap:var(--spacing-comp-01);cursor:pointer}ch-grid-rowset-legend::part(caret),ch-grid-cell::part(caret){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}ch-grid-cell::part(caret){cursor:pointer;margin-right:var(--spacing-comp-01)}ch-grid-rowset>ch-grid-rowset-legend::part(caret):before,ch-grid-row>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretCollapseIconUrl)}ch-grid-rowset[collapsed]>ch-grid-rowset-legend::part(caret):before,ch-grid-row[collapsed]>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretExpandIconUrl)}ch-grid-rowset[collapsed] ch-grid-rowset-legend{border-bottom:1px solid var(--color-background)}ch-grid gxg-paginator{padding-top:0;padding-bottom:0}gxg-grid.large ch-grid{font-size:var(--font-size-lg)}";
+const gxgGridCss = ":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}:root{--indent:var(--spacing-comp-02)}:host{display:block}gxg-grid{display:block}ch-grid{border:1px solid var(--gray-02);--focus-style:2px solid var(--color-primary-active)}ch-grid::part(main){}ch-grid::part(main)::-webkit-scrollbar{width:6px;height:6px}ch-grid::part(main)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-grid::part(main)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}gxg-grid.no-border ch-grid{border:0}gxg-grid:focus-visible,ch-grid:focus-visible{outline:none}ch-grid::part(header),ch-grid::part(footer){background-color:var(--color-background)}ch-grid-actionbar ch-grid-action-refresh,ch-grid-actionbar ch-grid-action-settings,ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending),ch-grid-column::part(bar-settings-button),ch-grid-column::part(settings-close),ch-grid::part(settings-close),ch-grid-cell::part(drag-icon),ch-grid-cell::part(caret),ch-grid-rowset-legend::part(caret){display:inline-flex;align-items:center;justify-content:center}ch-grid-actionbar ch-grid-action-refresh:before,ch-grid-actionbar ch-grid-action-settings:before,ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before,ch-grid-column::part(bar-settings-button):before,ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before,ch-grid-cell::part(drag-icon):before,ch-grid-cell::part(caret):before,ch-grid-rowset-legend::part(caret):before{content:\"\";display:block;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;width:70%;height:70%;background-color:var(--color-on-secondary)}ch-grid-action-refresh,ch-grid-action-settings{width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);display:inline-block}ch-grid-action-refresh:hover,ch-grid-action-settings:hover{background-color:var(--color-secondary-hover)}ch-grid-action-refresh:focus-visible,ch-grid-action-settings:focus-visible{outline:var(--focus-style)}ch-grid-action-refresh:before{-webkit-mask-image:var(--refreshIconUrl)}ch-grid-action-settings:before{-webkit-mask-image:var(--settingshIconUrl)}ch-grid{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--gray-06)}ch-grid-column{background-color:var(--color-background);font-weight:var(--font-weight-bold);padding:var(--spacing-comp-02) !important;cursor:pointer}ch-grid-column::part(bar){gap:var(--spacing-comp-02);width:100%}ch-grid-column:not([sort-direction])::part(bar-sort){display:none}ch-grid-column::part(bar-settings){line-height:0}ch-grid-column::part(bar-sort-ascending),ch-grid-column::part(bar-sort-descending){width:var(--spacing-comp-03);height:var(--spacing-comp-03);margin-left:var(--spacing-comp-02);margin-right:var(--spacing-comp-01)}ch-grid-column::part(bar-sort-ascending):before,ch-grid-column::part(bar-sort-descending):before{width:100%;height:100%;-webkit-mask-size:200%}ch-grid-column::part(bar-sort-descending):before{-webkit-mask-image:var(--barSortDescendingIconUrl)}ch-grid-column::part(bar-sort-ascending):before{-webkit-mask-image:var(--barSortAscendingIconUrl)}ch-grid-column::part(bar-resize-split){width:3px;background-color:var(--gray-02)}ch-grid-column:last-child::part(bar-resize-split){display:none}ch-grid-column::part(bar-settings-button){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);border:none;background-color:transparent;cursor:pointer}ch-grid-column::part(bar-settings-button):hover{background-color:var(--gray-02)}ch-grid-column::part(bar-settings-button):focus-visible{outline:var(--focus-style)}ch-grid-column::part(bar-settings-button):before{-webkit-mask-image:var(--barSettingsButtonIconUrl)}ch-grid-row{background-color:var(--color-background);color:var(--gray-04);border:2px solid transparent}ch-grid-row:nth-of-type(odd){background-color:var(--gray-00)}ch-grid-row[highlighted]{background-color:var(--color-hover)}ch-grid-row[dragging]{box-shadow:var(--box-shadow-03)}ch-grid-row[selected]>ch-grid-cell:not([selected]){background-color:var(--color-secondary-enabled)}ch-grid-cell[selected]{z-index:1;background-color:var(--color-secondary-enabled) !important}ch-grid-row[selected]>ch-grid-cell{color:var(--color-on-secondary)}ch-grid-row[selected]+ch-grid-row[selected] ch-grid-cell{border-top-color:var(--color-secondary-hover)}ch-grid-cell{box-sizing:border-box;padding-inline-start:var(--spacing-comp-02) !important;padding-inline-end:var(--spacing-comp-02) !important;padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01);align-items:center;font-size:var(--font-size-md);line-height:var(--line-height-regular)}ch-grid-column::part(settings-mask){cursor:default}ch-grid-column::part(settings-mask),ch-grid::part(settings-mask){background-color:rgba(0, 0, 0, 0.3);cursor:arrow;color:var(--color-on-secondary)}ch-grid-column::part(settings-window),ch-grid::part(settings-window){background-color:var(--color-background);width:100%;max-width:600px;padding:var(--spacing-comp-03);border-radius:var(--border-width-lg);box-shadow:var(--box-shadow-04)}ch-grid::part(settings-window){margin:0 var(--spacing-comp-05)}ch-grid-column::part(settings-header),ch-grid::part(settings-header){display:flex;align-items:center;gap:var(--spacing-comp-04);justify-content:space-between;border-bottom:var(--border-width-sm) solid var(--gray-02);padding-bottom:var(--spacing-comp-02);margin-bottom:var(--spacing-comp-03);font-weight:var(--font-weight-bold)}ch-grid-column::part(settings-close),ch-grid::part(settings-close){padding:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);cursor:pointer;background-color:var(--color-secondary-enabled);font-size:0;border:0}ch-grid-column::part(settings-close):hover,ch-grid::part(settings-close):hover{background-color:var(--color-secondary-hover)}ch-grid-column::part(settings-close):before,ch-grid::part(settings-close):before{-webkit-mask-image:var(--settingsCloseIconUrl)}ch-grid-column::part(settings-close):focus-visible,ch-grid::part(settings-close):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns){gap:var(--spacing-comp-03)}ch-grid::part(settings-columns-label){display:inline-flex;align-items:center;gap:var(--spacing-comp-03);cursor:pointer;height:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible),ch-grid-cell::part(selector),ch-grid-column::part(selector){position:relative;margin:0;height:var(--spacing-comp-04);width:var(--spacing-comp-04)}ch-grid::part(settings-columns-visible):focus-visible,ch-grid-cell::part(selector):focus-visible,ch-grid-column::part(selector):focus-visible{outline:var(--focus-style)}ch-grid::part(settings-columns-visible):before,ch-grid-cell::part(selector):before,ch-grid-column::part(selector):before{cursor:pointer;content:\"\";display:inline-block;position:relative;height:var(--spacing-comp-04);width:var(--spacing-comp-04);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-radius:var(--border-radius-md);border-color:var(--gray-04);box-sizing:border-box;flex-shrink:0;background:var(--color-background)}ch-grid::part(settings-columns-visible):after,ch-grid-cell::part(selector):after,ch-grid-column::part(selector):after{opacity:0;display:block;position:absolute;content:\"\";left:6px;top:3px;width:3px;height:7px;border:solid;border-color:var(--color-primary-hover);border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;cursor:pointer}ch-grid-column::part(indeterminate):after{opacity:1;display:block;position:absolute;content:\"\";left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--color-primary-hover);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}ch-grid::part(settings-columns-visible-checked):before,ch-grid-cell::part(checked):before,ch-grid-column::part(checked):before{border-color:var(--color-primary-hover)}ch-grid::part(settings-columns-visible-checked):after,ch-grid-cell::part(checked):after,ch-grid-column::part(checked):after{opacity:1}ch-grid-cell::part(drag-icon):before{width:var(--spacing-comp-04);height:var(--spacing-comp-04);cursor:grab}ch-grid-cell::part(drag-icon):before{-webkit-mask-image:var(--dragIconUrl)}ch-grid::part(row-actions){padding-top:2px;right:var(--spacing-comp-02)}ch-grid-column::part(selector){margin-right:8px}ch-grid-rowset-legend{background-color:var(--gray-01);padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-02);padding-block-start:var(--spacing-comp-01);padding-block-end:var(--spacing-comp-01)}ch-grid>ch-grid-rowset:first-of-type ch-grid-rowset-legend{border-top:1px solid var(--color-background)}ch-grid-rowset-legend{margin-inline-start:calc(var(--indent) * (var(--level) - 1));display:flex;align-items:center;gap:var(--spacing-comp-01);cursor:pointer}ch-grid-rowset-legend::part(caret),ch-grid-cell::part(caret){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}ch-grid-cell::part(caret){cursor:pointer;margin-right:var(--spacing-comp-01)}ch-grid-rowset>ch-grid-rowset-legend::part(caret):before,ch-grid-row>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretCollapseIconUrl)}ch-grid-rowset[collapsed]>ch-grid-rowset-legend::part(caret):before,ch-grid-row[collapsed]>ch-grid-cell::part(caret):before{-webkit-mask-image:var(--caretExpandIconUrl)}ch-grid-rowset[collapsed] ch-grid-rowset-legend{border-bottom:1px solid var(--color-background)}ch-grid gxg-paginator{padding-top:0;padding-bottom:0}gxg-grid[full-height]{height:100%}gxg-grid[full-height] ch-grid{height:100%}gxg-grid[ellipsis] ch-grid-cell{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;display:block}gxg-grid.large ch-grid{font-size:var(--font-size-lg)}";
 
 const GxgGrid = class {
   constructor(hostRef) {

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

@@ -14,7 +14,7 @@ const ARROW_UP$1 = "ArrowUp";
 const ChSuggest = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.inputChanged = index.createEvent(this, "inputChanged", 7);
+    this.valueChanged = index.createEvent(this, "valueChanged", 7);
     this.keyEventsDictionary = {
       ArrowDown: (e) => {
         const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN$1);
@@ -41,7 +41,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
      */
@@ -129,7 +129,7 @@ const ChSuggest = class {
      */
     this.handleInput = (e) => {
       const inputValue = e.target.value;
-      this.caption = inputValue;
+      this.value = inputValue;
       if (this.timeoutReference) {
         clearTimeout(this.timeoutReference);
       }
@@ -160,9 +160,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 = () => {
@@ -178,7 +176,6 @@ const ChSuggest = class {
   // 7.LISTENERS //
   itemSelectedHandler(event) {
     this.value = event.detail.value;
-    this.caption = event.detail.caption;
     this.closeWindow();
   }
   focusChangeAttemptHandler(event) {
@@ -213,7 +210,7 @@ const ChSuggest = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "main-wrapper", part: "main-wrapper" }, index.h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (index.h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), index.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() })), index.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" }, index.h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
+    return (index.h(index.Host, null, index.h("div", { class: "main-wrapper", part: "main-wrapper" }, index.h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (index.h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), index.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() })), index.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" }, index.h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
   }
   static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }
@@ -254,11 +251,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) => {
@@ -273,7 +308,7 @@ const ChSuggestListItem = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (index.h(index.Host, { role: "listitem", onKeyDown: this.handleKeyDown }, index.h("button", { part: "button", onClick: this.handleClick }, index.h("slot", { name: "icon" }), index.h("div", { class: "content-wrapper", part: "content-wrapper" }, index.h("slot", null), this.description && (index.h("span", { part: "description" }, this.description))))));
+    return (index.h(index.Host, { role: "listitem", onKeyDown: this.handleKeyDown }, index.h("button", { part: "button", onClick: this.handleClick }, index.h("slot", { name: "icon" }), index.h("div", { class: "content-wrapper", part: "content-wrapper" }, index.h("slot", null)))));
   }
   static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }

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

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a32426a.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) {
+    index.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 (index.h(index.Host, null, this.presented && this.progress >= 0 && (index.h("div", Object.assign({}, accessibilityAttributes, { part: "indicator", class: "indicator", style: {
+        "--animation-time": `${this.animationTime}ms`
+      } })))));
+  }
+};
+ChTimer.style = timerCss;
+
+exports.ch_timer = ChTimer;