@genexus/genexus-ide-ui 0.0.13 → 0.0.15

package/dist/components/ch-suggest-list-item.js

@@ -1,61 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const chSuggestListItemCss = ":host{display:block}:where(button){all:unset;display:flex;width:100%;cursor:pointer}*,::after,::before{box-sizing:border-box}";
-
-const ARROW_DOWN = "ArrowDown";
-const ARROW_UP = "ArrowUp";
-const ChSuggestListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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({
-        value: this.value || this.el.innerText,
-        description: this.description
-      });
-    };
-    this.handleKeyDown = (e) => {
-      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", 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))))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return this; }
-  static get style() { return chSuggestListItemCss; }
-}, [17, "ch-suggest-list-item", {
-    "iconSrc": [1, "icon-src"],
-    "description": [1],
-    "value": [8]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-suggest-list-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-suggest-list-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChSuggestListItem$1);
-      }
-      break;
-  } });
-}
+import { C as ChSuggestListItem$1, d as defineCustomElement$1 } from './ch-suggest-list-item2.js';
 
 const ChSuggestListItem = ChSuggestListItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/ch-suggest-list-item.entry.js → components/ch-suggest-list-item2.js}

@@ -1,12 +1,14 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
 const chSuggestListItemCss = ":host{display:block}:where(button){all:unset;display:flex;width:100%;cursor:pointer}*,::after,::before{box-sizing:border-box}";
 
 const ARROW_DOWN = "ArrowDown";
 const ARROW_UP = "ArrowUp";
-const ChSuggestListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const ChSuggestListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.itemSelected = createEvent(this, "itemSelected", 7);
     this.focusChangeAttempt = createEvent(this, "focusChangeAttempt", 7);
     // 6.COMPONENT LIFECYCLE EVENTS //
@@ -34,8 +36,25 @@ const ChSuggestListItem = class {
     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))))));
   }
   static get delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-};
-ChSuggestListItem.style = chSuggestListItemCss;
+  get el() { return this; }
+  static get style() { return chSuggestListItemCss; }
+}, [17, "ch-suggest-list-item", {
+    "iconSrc": [1, "icon-src"],
+    "description": [1],
+    "value": [8]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-suggest-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-suggest-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChSuggestListItem);
+      }
+      break;
+  } });
+}
 
-export { ChSuggestListItem as ch_suggest_list_item };
+export { ChSuggestListItem as C, defineCustomElement as d };

package/dist/components/ch-suggest-list.js

@@ -1,42 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const chSuggestListCss = "*,::after,::before{box-sizing:border-box}:host{display:block}.title{margin:0;font:inherit}.list{margin:0;padding:0}";
-
-const ChSuggestList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  // 2.REFERENCE TO ELEMENTS //
-  // 3.STATE() VARIABLES //
-  // 4.PUBLIC PROPERTY API / WATCH'S //
-  // 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))));
-  }
-  static get style() { return chSuggestListCss; }
-}, [1, "ch-suggest-list", {
-    "label": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-suggest-list"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-suggest-list":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChSuggestList$1);
-      }
-      break;
-  } });
-}
+import { C as ChSuggestList$1, d as defineCustomElement$1 } from './ch-suggest-list2.js';
 
 const ChSuggestList = ChSuggestList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ch-suggest-list2.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const chSuggestListCss = "*,::after,::before{box-sizing:border-box}:host{display:block}.title{margin:0;font:inherit}.list{margin:0;padding:0}";
+
+const ChSuggestList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  // 2.REFERENCE TO ELEMENTS //
+  // 3.STATE() VARIABLES //
+  // 4.PUBLIC PROPERTY API / WATCH'S //
+  // 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))));
+  }
+  static get style() { return chSuggestListCss; }
+}, [1, "ch-suggest-list", {
+    "label": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-suggest-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-suggest-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChSuggestList);
+      }
+      break;
+  } });
+}
+
+export { ChSuggestList as C, defineCustomElement as d };

package/dist/components/ch-suggest.js

@@ -1,262 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './ch-window2.js';
-import { d as defineCustomElement$2 } from './ch-window-close2.js';
-
-const chSuggestCss = "*,::after,::before{box-sizing:border-box}:host{--window-max-height:none;--window-gap:50px}.main-wrapper{display:block}.label-input-wrapper{display:flex}.label-input-wrapper .input{flex:1}:host([label-position=start]) .label-input-wrapper{flex-direction:row}:host([label-position=above]) .label-input-wrapper{flex-direction:column}.input{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0}.ch-window-container{position:relative}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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    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;
-    this.slotIsEmpty = true;
-    // 4.PUBLIC PROPERTY API / WATCH'S //
-    /**
-     * 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;
-    /**
-     * The label position
-     */
-    this.labelPosition = "start";
-    /**
-     * Whether or not to display the label
-     */
-    this.showLabel = true;
-    /**
-     * Wether or not the suggest has a header. The header will show the "suggestTitle" if provided, and a close button.
-     */
-    this.showHeader = false;
-    /**
-     * If true, it will position the cursor at the end when the input is focused.
-     */
-    this.cursorEnd = false;
-    // 10.LOCAL METHODS //
-    this.evaluateSlotIsEmpty = () => {
-      this.slotIsEmpty = !this.el.firstElementChild;
-    };
-    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) => {
-      this.value = e.target.value;
-      if (this.timeoutReference) {
-        clearTimeout(this.timeoutReference);
-      }
-      this.timeoutReference = setTimeout(() => {
-        this.processInputEvent();
-      }, 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 = () => {
-      this.evaluateWindowMaxHeight();
-      this.chWindow.hidden = this.slotIsEmpty;
-    };
-    this.closeWindow = () => {
-      this.chWindow.hidden = true;
-    };
-    this.onFocusHandler = () => {
-      if (this.cursorEnd) {
-        this.textInput.setSelectionRange(this.textInput.value.length, this.textInput.value.length);
-      }
-    };
-  }
-  watchValueHandler(newValue) {
-    this.valueChanged.emit(newValue);
-  }
-  // 6.COMPONENT LIFECYCLE EVENTS //
-  componentWillLoad() {
-    this.evaluateSlotIsEmpty();
-  }
-  // 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;
-  }
-  // 9.PUBLIC METHODS API //
-  /**
-   * @description It selects/highlights the input text.
-   */
-  async selectInputText() {
-    this.textInput.focus();
-    this.textInput.select();
-  }
-  // 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.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return this; }
-  static get watchers() { return {
-    "value": ["watchValueHandler"]
-  }; }
-  static get style() { return chSuggestCss; }
-}, [17, "ch-suggest", {
-    "debounce": [2],
-    "label": [1],
-    "labelPosition": [513, "label-position"],
-    "showLabel": [4, "show-label"],
-    "value": [1025],
-    "showHeader": [4, "show-header"],
-    "suggestTitle": [1, "suggest-title"],
-    "cursorEnd": [4, "cursor-end"],
-    "windowHidden": [32],
-    "slotIsEmpty": [32],
-    "selectInputText": [64]
-  }, [[0, "itemSelected", "itemSelectedHandler"], [0, "focusChangeAttempt", "focusChangeAttemptHandler"], [0, "windowClosed", "windowClosedHandler"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ch-suggest", "ch-window", "ch-window-close"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ch-suggest":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChSuggest$1);
-      }
-      break;
-    case "ch-window":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ch-window-close":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { C as ChSuggest$1, d as defineCustomElement$1 } from './ch-suggest2.js';
 
 const ChSuggest = ChSuggest$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/{esm/ch-suggest.entry.js → components/ch-suggest2.js}

@@ -1,12 +1,16 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './ch-window2.js';
+import { d as defineCustomElement$1 } from './ch-window-close2.js';
 
 const chSuggestCss = "*,::after,::before{box-sizing:border-box}:host{--window-max-height:none;--window-gap:50px}.main-wrapper{display:block}.label-input-wrapper{display:flex}.label-input-wrapper .input{flex:1}:host([label-position=start]) .label-input-wrapper{flex-direction:row}:host([label-position=above]) .label-input-wrapper{flex-direction:column}.input{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0}.ch-window-container{position:relative}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);
+const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.valueChanged = createEvent(this, "valueChanged", 7);
     this.keyEventsDictionary = {
       ArrowDown: (e) => {
@@ -54,7 +58,7 @@ const ChSuggest = class {
     this.cursorEnd = false;
     // 10.LOCAL METHODS //
     this.evaluateSlotIsEmpty = () => {
-      this.slotIsEmpty = !this.el.firstElementChild;
+      this.chWindow.hidden = !this.el.firstElementChild;
     };
     this.setFocusOnFirstItem = () => {
       const firstItem = this.el.querySelector("ch-suggest-list-item");
@@ -154,7 +158,7 @@ const ChSuggest = class {
     };
     this.processInputEvent = () => {
       this.evaluateWindowMaxHeight();
-      this.chWindow.hidden = this.slotIsEmpty;
+      this.valueChanged.emit(this.value);
     };
     this.closeWindow = () => {
       this.chWindow.hidden = true;
@@ -165,13 +169,7 @@ const ChSuggest = class {
       }
     };
   }
-  watchValueHandler(newValue) {
-    this.valueChanged.emit(newValue);
-  }
   // 6.COMPONENT LIFECYCLE EVENTS //
-  componentWillLoad() {
-    this.evaluateSlotIsEmpty();
-  }
   // 7.LISTENERS //
   itemSelectedHandler(event) {
     this.value = event.detail.value;
@@ -212,11 +210,43 @@ const ChSuggest = class {
     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); }
-  static get watchers() { return {
-    "value": ["watchValueHandler"]
-  }; }
-};
-ChSuggest.style = chSuggestCss;
+  get el() { return this; }
+  static get style() { return chSuggestCss; }
+}, [17, "ch-suggest", {
+    "debounce": [2],
+    "label": [1],
+    "labelPosition": [513, "label-position"],
+    "showLabel": [4, "show-label"],
+    "value": [1025],
+    "showHeader": [4, "show-header"],
+    "suggestTitle": [1, "suggest-title"],
+    "cursorEnd": [4, "cursor-end"],
+    "windowHidden": [32],
+    "slotIsEmpty": [32],
+    "selectInputText": [64]
+  }, [[0, "itemSelected", "itemSelectedHandler"], [0, "focusChangeAttempt", "focusChangeAttemptHandler"], [0, "windowClosed", "windowClosedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-suggest", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-suggest":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChSuggest);
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
 
-export { ChSuggest as ch_suggest };
+export { ChSuggest as C, defineCustomElement as d };

package/dist/components/gx-ide-new-kb.js

@@ -20,7 +20,7 @@ import { d as defineCustomElement$4 } from './tabs.js';
 import { d as defineCustomElement$3 } from './title.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const newKbCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.header{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-label{grid-area:kb-label}.header .location-label{grid-area:location-label}.header .location-input{grid-area:location-input}.header .location-icon{grid-area:location-icon}.gxg-tabs{margin-top:0;box-shadow:none}.basic-row-first{grid-template-areas:\"prototyping-target user-interface-language\";grid-template-columns:repeat(2, 1fr)}.basic-row-second{grid-template-areas:\"prototyping-environment data-source\";grid-template-columns:repeat(2, 1fr);grid-column-gap:0;grid-row-gap:0;flex-grow:1}.basic-row-second>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage{grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);flex-grow:1;gap:0}.knowledge-base-storage>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage__col-left{grid-area:knowledge-base-storage__col-left;grid-template-columns:1fr auto;grid-template-areas:\"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\"}.knowledge-base-storage__col-left .server-name-combo-box{grid-area:server-name-combo-box}.knowledge-base-storage__col-left .server-name-button{grid-area:server-name-button;align-self:center}.knowledge-base-storage__col-left .database-name{grid-area:database-name}.knowledge-base-storage__col-left .collation-combo-box{grid-area:collation-combo-box}.knowledge-base-storage__col-left .collation-button{grid-area:collation-button;align-self:center}.knowledge-base-storage__col-left .create-data-in-kb{grid-area:create-data-in-kb}.knowledge-base-storage__col-right{grid-area:knowledge-base-storage__col-right;grid-template-columns:1fr;grid-template-areas:\"authentication-type\" \"user-name\" \"password\" \"save-password\"}.knowledge-base-storage__col-right .authentication-type{grid-area:authentication-type}.knowledge-base-storage__col-right .user-name{grid-area:user-name}.knowledge-base-storage__col-right .password{grid-area:password}.knowledge-base-storage__col-right .save-password{grid-area:save-password}.knowledge-base-storage__col-right--windows-authentication{grid-template-areas:\"authentication-type\"}";
+const newKbCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.header{grid-template-columns:auto 1fr;grid-template-areas:\"kb-name-label kb-input\"}.header--is-advanced{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-name-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-name-label{grid-area:kb-label}.header .location-label{grid-area:location-label}.header .location-input{grid-area:location-input}.header .location-icon{grid-area:location-icon}.gxg-tabs{margin-top:0;box-shadow:none}.basic-row-first{grid-template-areas:\"prototyping-target user-interface-language\";grid-template-columns:repeat(2, 1fr)}.basic-row-second{grid-template-areas:\"prototyping-environment data-source\";grid-template-columns:repeat(2, 1fr);grid-column-gap:0;grid-row-gap:0;flex-grow:1}.basic-row-second>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage{grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);flex-grow:1;gap:0}.knowledge-base-storage>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage__col-left{grid-area:knowledge-base-storage__col-left;grid-template-columns:1fr auto;grid-template-areas:\"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\"}.knowledge-base-storage__col-left .server-name-combo-box{grid-area:server-name-combo-box}.knowledge-base-storage__col-left .server-name-button{grid-area:server-name-button;align-self:end}.knowledge-base-storage__col-left .database-name{grid-area:database-name}.knowledge-base-storage__col-left .collation-combo-box{grid-area:collation-combo-box}.knowledge-base-storage__col-left .collation-button{grid-area:collation-button;align-self:end}.knowledge-base-storage__col-left .create-data-in-kb{grid-area:create-data-in-kb}.knowledge-base-storage__col-right{grid-area:knowledge-base-storage__col-right;grid-template-columns:1fr;grid-template-areas:\"authentication-type\" \"user-name\" \"password\" \"save-password\"}.knowledge-base-storage__col-right .authentication-type{grid-area:authentication-type}.knowledge-base-storage__col-right .user-name{grid-area:user-name}.knowledge-base-storage__col-right .password{grid-area:password}.knowledge-base-storage__col-right .save-password{grid-area:save-password}.knowledge-base-storage__col-right--windows-authentication{grid-template-areas:\"authentication-type\"}";
 
 const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -156,7 +156,7 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     // 10.RENDER() FUNCTION //
     this.renderTabBasic = () => {
       var _a, _b, _c, _d;
-      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderTop: true, displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disabled: !this.isAdvanced, disableFilter: true, label: this._componentLocale.tabBasic.prototypingTarget, value: (_a = this._initialComboValue["prototypingTargets"]) !== null && _a !== void 0 ? _a : this.prototypingTargets[0].id, ref: (el) => (this.prototypingTargetEl = el), class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.userInterfaceLanguage, value: (_b = this._initialComboValue["userInterfaceLanguages"]) !== null && _b !== void 0 ? _b : this.userInterfaceLanguages[0].id, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment, value: (_c = this._initialComboValue["prototypingEnvironments"]) !== null && _c !== void 0 ? _c : this.prototypingEnvironments[0].id, ref: (el) => (this.prototypingEnvironmentEl = el), class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource, disableFilter: true, value: (_d = this._initialComboValue["dataSources"]) !== null && _d !== void 0 ? _d : this.dataSources[0].id, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.dataSources, "data-source"))), h("gx-ide-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderTop: true, displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.prototypingTarget, value: (_a = this._initialComboValue["prototypingTargets"]) !== null && _a !== void 0 ? _a : this.prototypingTargets[0].id, ref: (el) => (this.prototypingTargetEl = el), class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.userInterfaceLanguage, value: (_b = this._initialComboValue["userInterfaceLanguages"]) !== null && _b !== void 0 ? _b : this.userInterfaceLanguages[0].id, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment, value: (_c = this._initialComboValue["prototypingEnvironments"]) !== null && _c !== void 0 ? _c : this.prototypingEnvironments[0].id, ref: (el) => (this.prototypingEnvironmentEl = el), class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource, disableFilter: true, value: (_d = this._initialComboValue["dataSources"]) !== null && _d !== void 0 ? _d : this.dataSources[0].id, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.dataSources, "data-source"))), h("gx-ide-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
     };
     this.renderTabAdvanced = () => {
       var _a, _b, _c;
@@ -207,9 +207,17 @@ const GxIdeNewKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    *  11.RENDER() FUNCTION
    ********************************/
   render() {
-    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", null, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start", class: "kb-label" }, this._componentLocale.header.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation), h("gxg-form-text", { labelPosition: "start", placeholder: "C:\\Models", maxWidth: "100%", value: this.kbLocation, ref: (el) => (this.locationEl = el), disabled: !this.isAdvanced, part: "kb-location", class: "location-input" }), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" }))), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar" }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced",
-      // disabled={!this.isAdvanced}
-      part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced())), h("gx-ide-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
+    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", null, h("header", { class: {
+        "header": true,
+        "grid": true,
+        "header--is-advanced": this.isAdvanced
+      } }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.header.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), this.isAdvanced
+      ? [
+        h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation),
+        h("gxg-form-text", { labelPosition: "start", placeholder: "C:\\Models", maxWidth: "100%", value: this.kbLocation, ref: (el) => (this.locationEl = el), disabled: !this.isAdvanced, part: "kb-location", class: "location-input" }),
+        h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" })
+      ]
+      : null)), h("main", { class: "gxi-full-height" }, h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar" }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", hidden: !this.isAdvanced, part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced())), h("gx-ide-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
   }
   static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
   get el() { return this; }

package/dist/components/gx-ide-references.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GxIdeReferences extends Components.GxIdeReferences, HTMLElement {}
+export const GxIdeReferences: {
+  prototype: GxIdeReferences;
+  new (): GxIdeReferences;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;