@genexus/genexus-ide-ui 0.0.37 → 0.0.38

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