@genexus/genexus-ide-ui 0.0.9

package/dist/esm/ch-step-list-item.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, c as createEvent, a as getAssetPath, h, H as Host, g as getElement } from './index-4f0a5746.js';
+
+const chStepListItemCss = ":host{--text-color:var(--black);--font-family:\"Source Sans Pro\", sans-serif;--font-size:14px;--font-weight:bold;--item-color:var(--lightGray);--line-color:var(--lightGray);--item-active-color:var(--black)}:host .item{width:250px}:host .li-item{position:relative;display:flex;flex-direction:column}:host .li-item--active .round-tab{background-color:var(--item-active-color)}:host .li-item--active .horizontal-line{background-color:var(--item-active-color)}:host .horizontal-line{background-color:var(--line-color);width:100%;height:3px;position:absolute;z-index:1;top:28px}:host .round-tab{width:25px;height:25px;border-radius:50%;background-color:var(--item-color);margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;z-index:2}:host .round-tab:hover{cursor:pointer}:host .text{color:var(--text-color);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight);letter-spacing:0.38px;text-align:center;margin-left:auto;margin-right:auto}:host .text:hover{cursor:pointer}:host .item-icon{position:absolute;z-index:2}";
+
+const ChStepListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemClicked = createEvent(this, "itemClicked", 7);
+  }
+  itemClickedHandler(item) {
+    const targetItem = item.el.innerText;
+    this.setActiveOption(targetItem);
+    this.itemClicked.emit({ "item-clicked": targetItem });
+  }
+  setActiveOption(targetItem) {
+    const parent = this.el.parentElement;
+    const stepItems = parent.children;
+    for (let i = 0; i < stepItems.length; i++) {
+      const item = stepItems[i].shadowRoot.lastChild.childNodes[0];
+      // remove old item selected class
+      if (item.classList.contains("li-item--active")) {
+        item.classList.remove("li-item--active");
+      }
+      // set active item class
+      if (stepItems[i].innerText === targetItem) {
+        item.classList.add("li-item--active");
+      }
+    }
+  }
+  resolveIcon() {
+    if (this.iconSrc !== undefined) {
+      return this.iconSrc;
+    }
+    else {
+      return getAssetPath("step-list-item-assets/dot.svg");
+    }
+  }
+  render() {
+    return (h(Host, { class: "item", style: { width: "100%" } }, h("li", { class: {
+      // "tree-open": this.opened,
+      // disabled: this.disabled,
+      } }, h("div", { class: {
+        "li-item": true
+        // "li-text--selected": this.selected,
+      } }, h("span", { class: "text", onClick: () => this.itemClickedHandler(this) }, h("slot", null)), h("div", { class: "round-tab", onClick: () => this.itemClickedHandler(this) }, h("div", { part: "item-icon" })), h("span", { class: {
+        "horizontal-line": true
+      } })))));
+  }
+  static get assetsDirs() { return ["step-list-item-assets"]; }
+  get el() { return getElement(this); }
+};
+ChStepListItem.style = chStepListItemCss;
+
+export { ChStepListItem as ch_step_list_item };

package/dist/esm/ch-step-list.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, g as getElement } from './index-4f0a5746.js';
+
+const chStepListCss = ":host .step-container ul{list-style:none;display:flex;padding:0px}";
+
+const ChStepList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { class: "step-container" }, h("ul", { ref: el => (this.ulStep = el) }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+ChStepList.style = chStepListCss;
+
+export { ChStepList as ch_step_list };

package/dist/esm/ch-suggest-list-item.entry.js

@@ -0,0 +1,46 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+
+const chSuggestListItemCss = ":host{display:flex}";
+
+const ARROW_DOWN = "ArrowDown";
+const ARROW_UP = "ArrowUp";
+const ChSuggestListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.focusChangeAttempt = createEvent(this, "focusChangeAttempt", 7);
+    // / 6.COMPONENT LIFECYCLE EVENTS ///
+    // / 7.LISTENERS ///
+    // / 8.PUBLIC METHODS API ///
+    // / 9.LOCAL METHODS ///
+    this.handleClick = () => {
+      this.itemSelected.emit({
+        el: this.el,
+        value: this.el.innerText
+      });
+    };
+    this.handleKeyDown = (e) => {
+      if (e.code === "Enter") {
+        this.itemSelected.emit({
+          el: this.el,
+          value: this.el.innerText
+        });
+      }
+      else if (e.code === ARROW_UP || e.code === ARROW_DOWN) {
+        e.preventDefault();
+        this.focusChangeAttempt.emit({
+          el: this.el,
+          code: e.code
+        });
+      }
+    };
+  }
+  // / 10.RENDER() FUNCTION ///
+  render() {
+    return (h(Host, { role: "listitem", tabindex: "0", onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { name: "icon" }), h("div", { class: "content-wrapper" }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+ChSuggestListItem.style = chSuggestListItemCss;
+
+export { ChSuggestListItem as ch_suggest_list_item };

package/dist/esm/ch-suggest-list.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host } from './index-4f0a5746.js';
+
+const chSuggestListCss = ":host{display:block}.title{margin:0;font:inherit}.list{margin:0;padding:0}";
+
+const ChSuggestList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  // / 2.REFERENCE TO ELEMENTS ///
+  // / 3.STATE() VARIABLES ///
+  // / 4.PUBLIC PROPERTY API ///
+  // / 5.EVENTS (EMIT) ///
+  // / 6.COMPONENT LIFECYCLE EVENTS ///
+  // / 7.LISTENERS ///
+  // / 8.PUBLIC METHODS API ///
+  // / 9.LOCAL METHODS ///
+  // / 10.RENDER() FUNCTION ///
+  render() {
+    return (h(Host, null, this.label && (h("h2", { id: "heading", part: "title", class: "title" }, this.label)), h("ul", { "aria-labelledby": this.label ? "heading" : undefined, part: "list", class: "list" }, h("slot", null))));
+  }
+};
+ChSuggestList.style = chSuggestListCss;
+
+export { ChSuggestList as ch_suggest_list };

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

@@ -0,0 +1,217 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+
+const chSuggestCss = ":host{display:flex;flex-direction:column;--window-max-height:none;--window-gap:50px}.ch-window-container{position:relative}.dummy-header{display:none}.input{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0}ch-window::part(window){width:100%;max-height:calc(var(--window-max-height) - var(--window-gap));overflow-y:auto}";
+
+const ARROW_DOWN = "ArrowDown";
+const ARROW_UP = "ArrowUp";
+const ChSuggest = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.inputChanged = createEvent(this, "inputChanged", 7);
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE EVENTS
+  7.LISTENERS
+  8.WATCH
+  9.PUBLIC METHODS API
+  10.LOCAL METHODS
+  11.RENDER() FUNCTION
+  */
+    // / 1.OWN PROPERTIES ///
+    /**
+     * 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;
+    /**
+     * Whether or not to display the label
+     */
+    this.showLabel = false;
+    this.keyEventsDictionary = {
+      ArrowDown: (e) => {
+        const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN);
+        const nextFocusedItem = this.getNewFocusedItem(newFocusedItem, ARROW_DOWN);
+        newFocusedItem && newFocusedItem.focus();
+        if (!nextFocusedItem) {
+          /* This is the last item. Adjust window scroll to be at the very bottom*/
+          this.scrollListToBottom();
+        }
+      },
+      ArrowUp: (e) => {
+        const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_UP);
+        const nextFocusedItem = this.getNewFocusedItem(newFocusedItem, ARROW_UP);
+        newFocusedItem && newFocusedItem.focus();
+        if (!nextFocusedItem) {
+          /* This is the first item. Adjust window scroll to be at the very top*/
+          this.scrollListToTop();
+        }
+      }
+    };
+    // / 3.STATE() VARIABLES ///
+    this.windowHidden = true;
+    // / 9.PUBLIC METHODS API ///
+    // / 10.LOCAL METHODS ///
+    this.setFocusOnFirstItem = () => {
+      const firstItem = this.el.querySelector("ch-suggest-list-item");
+      firstItem && firstItem.focus();
+    };
+    this.getChSuggestListItems = () => Array.from(this.el.querySelectorAll("ch-suggest-list-item"));
+    this.getNewFocusedItem = (currentFocusedItem, direction) => {
+      /* Helper function that returns the list item that should get focus (the first one, or the last one)*/
+      const getListChild = (list) => {
+        const listItems = list.querySelectorAll("ch-suggest-list-item");
+        let listChild = listItems && listItems[listItems.length - 1];
+        if (direction === ARROW_DOWN) {
+          listChild = list.querySelector("ch-suggest-list-item");
+        }
+        else {
+          const parentListItems = list.querySelectorAll("ch-suggest-list-item");
+          listChild =
+            parentListItems && parentListItems[parentListItems.length - 1];
+        }
+        return listChild;
+      };
+      if (!currentFocusedItem) {
+        return;
+      }
+      let newFocusedItem = direction === ARROW_DOWN
+        ? currentFocusedItem.nextElementSibling
+        : currentFocusedItem.previousElementSibling;
+      if ((newFocusedItem === null || newFocusedItem === void 0 ? void 0 : newFocusedItem.nodeName) === "CH-SUGGEST-LIST") {
+        newFocusedItem = getListChild(newFocusedItem);
+      }
+      else if (!newFocusedItem) {
+        /* this could be the last item of a list, but not the last item*/
+        const parent = currentFocusedItem.parentElement;
+        const sibling = direction === ARROW_DOWN
+          ? parent.nextElementSibling
+          : parent.previousElementSibling;
+        const parentIsList = parent.nodeName === "CH-SUGGEST-LIST";
+        if (parentIsList &&
+          sibling &&
+          sibling.nodeName === "CH-SUGGEST-LIST-ITEM") {
+          newFocusedItem =
+            direction === ARROW_DOWN
+              ? parent.nextElementSibling
+              : parent.previousElementSibling;
+        }
+        else if (parentIsList &&
+          sibling &&
+          sibling.nodeName === "CH-SUGGEST-LIST") {
+          const parentList = direction === ARROW_DOWN
+            ? parent.nextElementSibling
+            : parent.previousElementSibling;
+          let listChild;
+          if (direction === ARROW_DOWN) {
+            listChild = parentList.querySelector("ch-suggest-list-item");
+          }
+          else {
+            listChild = getListChild(parentList);
+          }
+          newFocusedItem = listChild ? listChild : null;
+        }
+      }
+      return newFocusedItem;
+    };
+    /**
+     * Every time the input event is triggered, the value of the input is sent to processInputEvent, which is responsible for displaying a window with the suggested options. this.debounce is a delay that, along with clearTimeout, ensures that the window is only shown after the user has stopped typing.
+     */
+    this.handleInput = (e) => {
+      if (this.timeoutReference) {
+        clearTimeout(this.timeoutReference);
+      }
+      const value = e.target.value;
+      this.timeoutReference = setTimeout(() => {
+        this.processInputEvent(value);
+      }, this.debounce);
+    };
+    this.handleKeyDown = (e) => {
+      if (e.key === ARROW_DOWN) {
+        e.preventDefault();
+        this.setFocusOnFirstItem();
+      }
+    };
+    this.evaluateWindowMaxHeight = () => {
+      const viewportHeight = window.innerHeight;
+      const documentHeight = document.body.scrollHeight;
+      const height = documentHeight >= viewportHeight ? documentHeight : viewportHeight;
+      const inputBottomPosition = this.textInput.getBoundingClientRect().bottom + window.scrollY;
+      const windowMaxHeight = height - inputBottomPosition + "px";
+      this.el.style.setProperty("--window-max-height", windowMaxHeight);
+    };
+    this.scrollListToTop = () => {
+      const partWindow = this.chWindow.shadowRoot.querySelector("[part='window']");
+      partWindow.scrollTop = 0;
+    };
+    this.scrollListToBottom = () => {
+      const partWindow = this.chWindow.shadowRoot.querySelector("[part='window']");
+      partWindow.scrollTop = partWindow.scrollHeight;
+    };
+    this.processInputEvent = (targetValue) => {
+      this.evaluateWindowMaxHeight();
+      if (this.windowHidden) {
+        this.windowHidden = false;
+      }
+      this.value = targetValue;
+    };
+    this.closeWindow = () => {
+      this.windowHidden = true;
+    };
+  }
+  // / 6.COMPONENT LIFECYCLE EVENTS ///
+  // / 7.LISTENERS ///
+  itemSelectedHandler(event) {
+    this.value = event.detail.value;
+    this.closeWindow();
+  }
+  focusChangeAttemptHandler(event) {
+    const keyEventHandler = this.keyEventsDictionary[event.detail.code];
+    if (keyEventHandler) {
+      const currentFocusedItem = event.detail.el;
+      const chSuggestListItemsArray = this.getChSuggestListItems();
+      const currentFocusedItemIndex = chSuggestListItemsArray.findIndex(item => {
+        return item === currentFocusedItem;
+      });
+      const newItemToSetFocusOn = null;
+      keyEventHandler({
+        event: event.detail,
+        currentFocusedItem: currentFocusedItem,
+        chSuggestListItemsArray: chSuggestListItemsArray,
+        currentFocusedItemIndex: currentFocusedItemIndex,
+        newItemToSetFocusOn: newItemToSetFocusOn
+      });
+    }
+  }
+  windowClosedHandler() {
+    this.textInput.focus();
+    this.windowHidden = true;
+  }
+  // / 8.WATCH ///
+  windowHiddenHandler(newValue) {
+    if (newValue) {
+      this.chWindow.hidden = true;
+    }
+    else {
+      this.chWindow.hidden = false;
+    }
+  }
+  watchValueHandler(newValue) {
+    this.inputChanged.emit(newValue);
+  }
+  // / 10.RENDER() FUNCTION ///
+  render() {
+    return (h(Host, null, 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, 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), exportparts: "\n            caption:ch-window-caption, \n            close:ch-window-close,\n            footer:ch-window-footer,\n            header:ch-window-header,\n            main:ch-window-main,\n            mask:ch-window-mask,\n            window:ch-window-window" }, h("div", { slot: "header", class: "dummy-header" }), h("slot", null))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "windowHidden": ["windowHiddenHandler"],
+    "value": ["watchValueHandler"]
+  }; }
+};
+ChSuggest.style = chSuggestCss;
+
+export { ChSuggest as ch_suggest };

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

@@ -0,0 +1,167 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { L as LINE_MEASURING, H as HEIGHT_MEASURING, a as LINE_CLAMP } from './reserverd-names-482f1a10.js';
+
+function debounce(func, wait, immediate = false) {
+  let timeout;
+  return function (...args) {
+    const later = function () {
+      timeout = null;
+      if (!immediate) {
+        func.apply(this, args);
+      }
+    }.bind(this);
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(this, args);
+    }
+  };
+}
+/*  This functions overrides a method adding calls before (`before()`) and
+    after (`after()`)
+*/
+function overrideMethod(component, methodName, { before, after }) {
+  const oldMethod = component[methodName];
+  component[methodName] = () => {
+    if (before !== undefined) {
+      before();
+    }
+    if (oldMethod !== undefined) {
+      oldMethod.call(component);
+    }
+    if (after !== undefined) {
+      after();
+    }
+  };
+}
+
+function makeLinesClampable(component, contentElementSelector, contentContainerElementSelector, lineMeasuringElementSelector, componentHasShadowDOM = false) {
+  if (!component.lineClamp) {
+    return;
+  }
+  // Used to know the sizes of the `content`
+  let contentElement;
+  // Used to know the sizes of the `content-container`
+  let contentContainerElement;
+  // Used to measure the line height
+  let lineMeasuringElement;
+  // Used to keep the state of the component
+  let contentHeight = -1;
+  let contentContainerHeight = -1;
+  let lineMeasuringHeight = -1;
+  const applyLineClamp = debounce(() => {
+    requestAnimationFrame(() => {
+      const currentContentContainerHeight = contentContainerElement.clientHeight;
+      if (currentContentContainerHeight === 0) {
+        return;
+      }
+      const currentContentHeight = contentElement.scrollHeight;
+      const currentLineMeasuringHeight = lineMeasuringElement.clientHeight;
+      /*  If the container height and the line height have not been changed,
+          there is not need to update `component.maxLines`
+      */
+      if (contentHeight === currentContentHeight &&
+        contentContainerHeight === currentContentContainerHeight &&
+        lineMeasuringHeight === currentLineMeasuringHeight) {
+        return;
+      }
+      // Stores the current height of the content container and line measurement
+      contentHeight = currentContentHeight;
+      contentContainerHeight = currentContentContainerHeight;
+      lineMeasuringHeight = currentLineMeasuringHeight;
+      // Set how much lines needs the control to not overflow its content
+      component.contentLines = Math.max(Math.trunc(currentContentHeight / lineMeasuringHeight), 1);
+      // At least, one line will be displayed
+      component.maxLines = Math.max(Math.trunc(currentContentContainerHeight / lineMeasuringHeight), 1);
+    });
+  }, 10);
+  let resizeObserverContainer = null;
+  overrideMethod(component, "componentDidLoad", {
+    before: () => {
+      const componentElement = component.element;
+      if (componentHasShadowDOM) {
+        contentElement = componentElement.shadowRoot.querySelector(contentElementSelector);
+        contentContainerElement = componentElement.shadowRoot.querySelector(contentContainerElementSelector);
+        lineMeasuringElement = componentElement.shadowRoot.querySelector(lineMeasuringElementSelector);
+      }
+      else {
+        contentElement = componentElement.querySelector(contentElementSelector);
+        contentContainerElement = componentElement.querySelector(contentContainerElementSelector);
+        lineMeasuringElement = componentElement.querySelector(lineMeasuringElementSelector);
+      }
+      if (contentContainerElement === null || lineMeasuringElement === null) {
+        return;
+      }
+      /*  If the `content-container` resizes or the `font-size` changes, it
+            checks if it is necessary to update `component.maxLines`
+        */
+      resizeObserverContainer = new ResizeObserver(() => {
+        applyLineClamp();
+      });
+      // Observe the content, content-container and line height
+      resizeObserverContainer.observe(contentElement);
+      resizeObserverContainer.observe(contentContainerElement);
+      resizeObserverContainer.observe(lineMeasuringElement);
+    }
+  });
+  overrideMethod(component, "disconnectedCallback", {
+    before: () => {
+      if (resizeObserverContainer) {
+        resizeObserverContainer.disconnect();
+        resizeObserverContainer = undefined;
+      }
+    }
+  });
+  return {
+    applyLineClamp
+  };
+}
+
+const textblockCss = "*,::after,::before{box-sizing:border-box}.height-measuring{display:flex;width:0;height:100%;visibility:hidden}.line-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max-lines);overflow:hidden}.line-measuring{visibility:hidden;position:absolute}:host{display:flex;align-items:flex-start;justify-items:flex-start;align-self:stretch;position:relative;width:100%;text-align:start}.content{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0;position:absolute;inset-inline:0;padding-inline:inherit}";
+
+const TextBlock = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.contentLines = 0;
+    this.maxLines = 0;
+    /**
+     * It specifies the format that will have the textblock control.
+     *
+     *  - If `format` = `HTML`, the textblock control works as an HTML div and
+     *    the innerHTML will be taken from the default slot.
+     *
+     *  - If `format` = `Text`, the control works as a normal textblock control
+     *    and it is affected by most of the defined properties.
+     */
+    this.format = "Text";
+    /**
+     * True to cut text when it overflows, showing an ellipsis.
+     */
+    this.lineClamp = false;
+    /**
+     * Determine the way that the tooltip text will be displayed
+     */
+    this.tooltipShowMode = "always";
+    makeLinesClampable(this, "." + LINE_CLAMP, "." + HEIGHT_MEASURING, "." + LINE_MEASURING, true);
+  }
+  getTooltip() {
+    const noNeedToDisplayTooltip = !this.tooltip ||
+      (this.tooltipShowMode === "line-clamp" &&
+        this.lineClamp &&
+        this.contentLines <= this.maxLines);
+    return noNeedToDisplayTooltip ? null : this.tooltip;
+  }
+  render() {
+    const justRenderTheSlot = this.format === "HTML" || !this.lineClamp;
+    return (h(Host, { role: this.format === "Text" && !this.lineClamp ? "paragraph" : null, title: this.getTooltip() }, justRenderTheSlot ? (h("slot", null)) : ([
+      h("div", { class: LINE_MEASURING }, "A"),
+      h("div", { class: HEIGHT_MEASURING }),
+      h("p", { class: `content ${LINE_CLAMP}`, part: "content", style: { "--max-lines": this.maxLines.toString() } }, h("slot", null))
+    ])));
+  }
+  get element() { return getElement(this); }
+};
+TextBlock.style = textblockCss;
+
+export { TextBlock as ch_textblock };