@genexus/genexus-ide-ui 0.0.12 → 0.0.14

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

@@ -0,0 +1,380 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { s as state } from './store-75f5d491.js';
+import { f as formMessageLogic } from './form-73d85602.js';
+import { f as formClasses, c as commonClassesNames } from './classesNames-6cd8fadb.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$1 = "ArrowDown";
+const ARROW_UP$1 = "ArrowUp";
+const ChSuggest = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.keyEventsDictionary = {
+      ArrowDown: (e) => {
+        const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN$1);
+        const nextFocusedItem = this.getNewFocusedItem(newFocusedItem, ARROW_DOWN$1);
+        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$1);
+        const nextFocusedItem = this.getNewFocusedItem(newFocusedItem, ARROW_UP$1);
+        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$1) {
+          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$1
+        ? 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$1
+          ? parent.nextElementSibling
+          : parent.previousElementSibling;
+        const parentIsList = parent.nodeName === "CH-SUGGEST-LIST";
+        if (parentIsList &&
+          sibling &&
+          sibling.nodeName === "CH-SUGGEST-LIST-ITEM") {
+          newFocusedItem =
+            direction === ARROW_DOWN$1
+              ? parent.nextElementSibling
+              : parent.previousElementSibling;
+        }
+        else if (parentIsList &&
+          sibling &&
+          sibling.nodeName === "CH-SUGGEST-LIST") {
+          const parentList = direction === ARROW_DOWN$1
+            ? parent.nextElementSibling
+            : parent.previousElementSibling;
+          let listChild;
+          if (direction === ARROW_DOWN$1) {
+            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$1) {
+        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 getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValueHandler"]
+  }; }
+};
+ChSuggest.style = chSuggestCss;
+
+const chSuggestListCss = "*,::after,::before{box-sizing:border-box}: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 / 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))));
+  }
+};
+ChSuggestList.style = chSuggestListCss;
+
+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);
+    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 getElement(this); }
+};
+ChSuggestListItem.style = chSuggestListItemCss;
+
+const stylesCss = "@charset \"UTF-8\";: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}:host(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}ch-suggest{font-family:var(--font-family-primary);font-size:var(--font-size-lg);color:var(--color-on-background);}ch-suggest::-webkit-scrollbar{width:6px;height:6px}ch-suggest::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}ch-suggest ::-webkit-scrollbar{width:6px;height:6px}ch-suggest ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(label){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;display:flex;align-items:center;cursor:default;font-size:inherit}ch-suggest[label-position=start]::part(label){margin-inline-end:var(--gxg-label-margin-horizontal)}ch-suggest[label-position=above]::part(label){margin-block-end:var(--gxg-label-margin-vertical)}ch-suggest::part(input){height:var(--spacing-comp-05);border:var(--border-width-sm) solid var(--gxg-border-color--regular);padding:var(--spacing-comp-01) var(--spacing-comp-02);box-sizing:border-box;background-color:var(--color-background)}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(header){display:block;padding-block-end:var(--spacing-comp-02);display:flex;justify-content:flex-end}ch-suggest::part(close-button){height:var(--spacing-comp-05);width:var(--spacing-comp-05);background-color:var(--color-background);color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-sizing:border-box;cursor:pointer;display:block}ch-suggest::part(close-button):hover{background-color:var(--color-primary-hover-opacity-01)}ch-suggest::part(close-button)::after{content:\"✖\";width:100%;display:block;line-height:24px;text-align:center}ch-suggest::part(close-button):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(dropdown){background-color:var(--color-background);margin-top:var(--spacing-comp-01);padding:var(--spacing-comp-02);box-shadow:var(--box-shadow-02);}ch-suggest::part(dropdown)::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(dropdown) .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}ch-suggest::part(dropdown) ::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown) ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}gxg-suggest.gxg-validation--success ch-suggest::part(input){outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--success ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input){outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input){outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-error-dark)}gxg-suggest.gxg--disabled ch-suggest{pointer-events:none}gxg-suggest.gxg--disabled ch-suggest::part(input){background-color:var(--gray-01);color:var(--color-on-disabled)}gxg-suggest[ellipsis]:not([ellipsis=false]) ch-suggest-list-item::part(content-wrapper){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}ch-suggest-list{margin:var(--spacing-comp-01) 0;font-family:inherit;border:var(--border-width-sm) solid var(--gxg-border-color--regular)}ch-suggest-list:first-child{margin-top:0}ch-suggest-list:last-child{margin-bottom:0}ch-suggest-list::part(title){text-transform:uppercase;font-weight:var(--font-weight-semibold);margin:var(--spacing-comp-01) 0 0 0;padding:var(--spacing-comp-01) var(--spacing-comp-02)}ch-suggest-list-item{}ch-suggest-list-item::part(button){padding:var(--spacing-comp-01) var(--spacing-comp-02);align-items:center;gap:var(--spacing-comp-01);box-sizing:border-box}ch-suggest-list-item::part(button):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest-list-item::part(description)::before{content:\" - \"}ch-suggest-list-item gxg-icon::part(ch-icon){--icon-size:16px;margin-right:2px}ch-suggest-list-item:hover{background-color:var(--gxg-background-color-item-hover)}";
+
+const GxgSuggest = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /* VALIDATION */
+    /**
+     * The validation status
+     */
+    this.validationStatus = "indeterminate";
+    /**
+     * The presence of this attribute makes the suggest disabled.
+     */
+    this.disabled = false;
+    /**
+     * The presence of this attribute forces the suggest list items to not wrap to a second line, and it will display ellipsis. (...)
+     */
+    this.ellipsis = true;
+  }
+  render() {
+    return (h(Host, { class: {
+        large: state.large,
+        [formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
+        [formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
+        [formClasses["VALIDATION_ERROR_CLASS"]]: this.validationStatus === "error",
+        [formClasses["VALIDATION_SUCCESS_CLASS"]]: this.validationStatus === "success",
+        [commonClassesNames["DISABLED_CLASS"]]: this.disabled,
+      } }, h("slot", null), formMessageLogic(this)));
+  }
+};
+GxgSuggest.style = stylesCss;
+
+const textCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}: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}:host{display:block;font-size:14px}:host p,:host q,:host a{display:block;margin:0;padding:0;margin:0 auto}:host([text-align=start]){text-align:start}:host([text-align=start]) *{text-align:start}:host([text-align=center]){text-align:center}:host([text-align=center]) *{text-align:center}:host([text-align=end]){text-align:end}:host([text-align=end]) *{text-align:end}:host([padding=s]){padding:var(--spacing-comp-01)}:host([padding=m]){padding:var(--spacing-comp-02)}:host(.large) .gxg-text,:host(.large) .gxg-text--gray,:host(.large) .gxg-quote,:host(.large) .gxg-link,:host(.large) .gxg-link-gray,:host(.large) .gxg-alert-error,:host(.large) .gxg-alert-warning,:host(.large) .gxg-alert-success{font-size:var(--font-size-lg)}";
+
+const GxgText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The target (for "link" or "link-gray" types
+     * */
+    this.target = "_self";
+    /**
+     * Text type
+     */
+    this.type = "text-regular";
+    /**
+     * Text alignment
+     */
+    this.textAlign = "start";
+    /**
+     * Text padding
+     */
+    this.padding = "none";
+    /**
+     * Max. width
+     */
+    this.maxWidth = "100%";
+  }
+  textType() {
+    let text;
+    switch (this.type) {
+      case "text-regular":
+        text = (h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-text" }, h("slot", null)));
+        break;
+      case "text-gray":
+        text = (h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-text--gray" }, h("slot", null)));
+        break;
+      case "text-quote":
+        text = (h("q", { style: { maxWidth: this.maxWidth }, class: "gxg-quote" }, h("slot", null)));
+        break;
+      case "text-link":
+        text = (h("a", { style: { maxWidth: this.maxWidth }, href: this.href, target: this.target, class: "gxg-link" }, h("slot", null)));
+        break;
+      case "text-link-gray":
+        text = (h("a", { style: { maxWidth: this.maxWidth }, href: this.href, target: this.target, class: "gxg-link-gray" }, h("slot", null)));
+        break;
+      case "text-alert-error":
+        text = (h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-alert-error" }, h("slot", null)));
+        break;
+      case "text-alert-warning":
+        text = (h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-alert-warning" }, h("slot", null)));
+        break;
+      case "text-alert-success":
+        text = (h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-alert-success" }, h("slot", null)));
+        break;
+      default:
+        text = (h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-text" }, h("slot", null)));
+    }
+    return text;
+  }
+  render() {
+    return h(Host, { class: { large: state.large } }, this.textType(), " ");
+  }
+};
+GxgText.style = textCss;
+
+export { ChSuggest as ch_suggest, ChSuggestList as ch_suggest_list, ChSuggestListItem as ch_suggest_list_item, GxgSuggest as gxg_suggest, GxgText as gxg_text };

package/dist/esm/form-validation-a6686ca1.js

@@ -0,0 +1,64 @@
+import { h } from './index-4f0a5746.js';
+
+/* STENCIL IMPORTS */
+const renderFormItems = (componentType = "gxg-combo-box-item", options, group = "undefined-group", callback) => {
+  if (options.length) {
+    const items = [];
+    options.forEach(option => {
+      let item;
+      switch (componentType) {
+        case "gxg-form-checkbox":
+          item = (h("gxg-form-checkbox", { checkboxId: option.id, checked: option.checked, disabled: option.disabled, label: option.label, value: option.value, onChange: callback ? callback : null, iconName: option.iconName, part: `${group}-${option.id}` }));
+          items.push(item);
+          break;
+        case "gxg-combo-box-item":
+          item = (h("gxg-combo-box-item", { value: option.id, icon: option.iconName, part: `${group}-${option.id}` }, option.label));
+          items.push(item);
+          break;
+        case "gxg-form-radio":
+          item = (h("gxg-form-radio", { "radio-id": option.id, checked: option.checked, disabled: option.disabled, label: option.label, value: option.value, name: group, part: `${group}-${option.id}` }));
+          items.push(item);
+          break;
+      }
+    });
+    return items;
+  }
+  return null;
+};
+/**
+ *
+ * @param gxOptions An array of GxOptions's
+ * @returns The first option in the array that is 'selected'. If no one found it returns null.
+ */
+const getSelectedGxOption = (gxOptions) => {
+  let found;
+  if (gxOptions === null || gxOptions === void 0 ? void 0 : gxOptions.length) {
+    for (let i = 0; i < gxOptions.length; i++) {
+      if (gxOptions[i].selected) {
+        found = gxOptions[i];
+        break;
+      }
+    }
+  }
+  return found;
+};
+
+const formSubmitValidation = (result, ref) => {
+  var _a;
+  (_a = result.fieldErrors) === null || _a === void 0 ? void 0 : _a.forEach(element => {
+    const key = element.key;
+    const message = element.message;
+    const hasError = element.hasError;
+    const reference = ref[`${key}El`];
+    if (reference && hasError && message.trim()) {
+      reference.validationStatus = "error";
+      reference.validationMessage = message;
+    }
+    else if (reference && !hasError) {
+      reference.validationStatus = "indeterminate";
+      reference.validationMessage = null;
+    }
+  });
+};
+
+export { formSubmitValidation as f, getSelectedGxOption as g, renderFormItems as r };