@genexus/genexus-ide-ui 0.0.40 → 0.0.42

package/dist/esm/gxg-combo-box_2.entry.js

@@ -0,0 +1,700 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
+import { a as formMessageLogic } from './form-5e68671c.js';
+import { r as repositionScroll } from './reposition-scroll-3478b46f.js';
+import { K as KeyboardKeys } from './types-02481dff.js';
+import { e as exportParts } from './export-parts-7f208d57.js';
+import { s as state } from './store-c2650ca5.js';
+import { c as commonClassesNames } from './classesNames-6cd8fadb.js';
+
+function mutationObserverRemoved(target, ref) {
+    const observer = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList) {
+            if (mutation.type === "childList") {
+                const removedNodesArray = Array.from(mutation.removedNodes);
+                for (const removedNode of removedNodesArray) {
+                    if (removedNode.nodeType === Node.ELEMENT_NODE) {
+                        ref.removedItem = removedNode;
+                    }
+                }
+            }
+        }
+    });
+    observer.observe(target, { childList: true });
+    return observer; // Return the observer instance if needed
+}
+
+const comboBoxCss = "/*! 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}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{font-family:var(--font-family-primary);display:block}:host gxg-form-text::part(input){padding-inline-end:var(--spacing-comp-05)}:host gxg-form-text.clear-icon::part(input){padding-inline-end:calc(var(--spacing-comp-05) * 2)}:host .main-container{width:100%;position:relative;}:host .main-container .label{font-size:var(--font-size-sm);margin-bottom:var(--spacing-lay-xs)}:host .main-container .search-container{flex:1;position:relative}:host .main-container .search-container .buttons-wrapper{position:absolute;top:2px;height:calc(100% - 4px);display:flex;align-items:center;padding-inline-start:var(--spacing-comp-01);inset-inline-end:2px}:host .main-container .search-container .buttons-wrapper .button-icon{height:20px;width:20px}:host .main-container .items-container{border:var(--border-width-sm) solid var(--gxg-border-color--regular);border-radius:var(--border-radius-md);border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;overflow-y:auto;overscroll-behavior:contain;background-color:var(--color-background);position:fixed;width:inherit;box-sizing:border-box;z-index:999;display:none;}:host .main-container .items-container::-webkit-scrollbar{width:6px;height:6px}:host .main-container .items-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .main-container .items-container--show{display:block}:host .main-container .items-container--no-match{display:none}:host .main-container .items-container .no-ocurrences-found{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);padding:var(--spacing-comp-01);background-color:var(--color-background)}:host .main-container .items-container .no-ocurrences-found span{display:block;color:var(--gray-04)}:host .main-container .items-container.exact-match{overflow-y:hidden}:host .main-container .items-container--above{transform:translateY(calc(-100% - 24px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-md);border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:0;border-bottom-left-radius:0}:host .search-and-items-container{flex:1}:host([label-position=start]) .main-container{display:flex;flex-direction:row}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large) .main-container .label{display:flex;font-size:var(--font-size-lg);margin-bottom:var(--spacing-lay-xs);line-height:1.455em}:host(.large) .main-container .items-container .no-ocurrences-found{font-size:var(--font-size-lg)}";
+
+const GxgComboBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.opened = createEvent(this, "opened", 7);
+    this.closed = createEvent(this, "closed", 7);
+    this.toggled = createEvent(this, "toggled", 7);
+    this.parts = {
+      input: "input",
+      clearButton: "clear-button",
+      toggleButton: "toggle-button",
+    };
+    this.setInitialValueTimes = 0;
+    /**
+     * The presence of this attribute makes the input disabled
+     */
+    this.disabled = false;
+    /**
+     * The combo label
+     */
+    this.label = undefined;
+    /**
+     * The input label
+     */
+    this.labelPosition = "above";
+    /**
+     * The combo min-width
+     */
+    this.minWidth = "0";
+    /**
+     * The combo max-width
+     */
+    this.maxWidth = "100%";
+    /**
+     * The combo list max height
+     */
+    this.listMaxHeight = "244px";
+    /**
+     * The combo placeholder
+     */
+    this.placeholder = "Search item";
+    /**
+     * The presence of this attribute disables the filter
+     */
+    this.disableFilter = false;
+    /**
+     * The presence of this attribute disables the clear button
+     */
+    this.disableClear = false;
+    /**
+     * If this attribute is present, "value" will only return something if a comboItem is selected, otherwise it will return undefined.
+     * if this attribute is not present, "value" will return the value of the actual comboItem, or whatever text the comboItem has.
+     */
+    this.strict = false;
+    /**
+     * The presence of this attribute with make the filter search for values with case sensitive distinction
+     */
+    this.caseSensitive = false;
+    /**
+     * The container 'items container' position
+     */
+    this.listPosition = "below";
+    /**
+     * Centers the label
+     */
+    this.centerLabel = false;
+    /*VALIDATION*/
+    /**
+     * The presence of this attribute makes the commbo required
+     */
+    this.required = false;
+    /**
+     * The validation status
+     *
+     */
+    this.validationStatus = "indeterminate";
+    /**
+     * If true, it will position the cursor at the end when the input is focused.
+     */
+    this.cursorEnd = false;
+    this.userTyped = false;
+    this.formMessageLogic = formMessageLogic;
+    this.inputTextValue = "";
+    this.listIsOpen = false;
+    this.inputTextIcon = undefined;
+    this.inputTextIconPosition = null;
+    this.noMatch = false;
+    this.lastAllowedValue = undefined;
+    this.slottedContent = null;
+    this.selectionProgramatic = true;
+    this.myObserver = null;
+    this.detectClickOutsideCombo = this.detectClickOutsideComboFunc.bind(this);
+    this.detectMouseScroll = this.detectMouseScrollFunc.bind(this);
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+    this.mutationRemoveObserver = () => {
+      this._mo = mutationObserverRemoved(this.el, this);
+    };
+    /*********************************
+    HANDLERS
+    *********************************/
+    this.inputHandler = (e) => {
+      this.userTyped = true;
+      const value = this.sanitizeString(e.detail);
+      const filteredItems = this.filterList(value);
+      if (!this.strict) {
+        this.value = value;
+      }
+      else if (filteredItems.length === 1) {
+        /*on strict mode, only set value if there is an exact match*/
+        this.value = filteredItems[0].value;
+      }
+    };
+    this.keyDownHandler = (e) => {
+      if (e.code === KeyboardKeys.ARROW_DOWN || e.code === KeyboardKeys.ARROW_UP) {
+        e.preventDefault();
+      }
+      let newItem;
+      if (e.code === KeyboardKeys.ARROW_DOWN) {
+        newItem = this.getNewItem("next");
+        (newItem === null || newItem === void 0 ? void 0 : newItem.value) && (this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value);
+        repositionScroll(this.itemsContainer, this.selectedItem, KeyboardKeys.ARROW_DOWN);
+        e.altKey && this.showList();
+      }
+      else if (e.code === KeyboardKeys.ARROW_UP) {
+        newItem = this.getNewItem("prev");
+        (newItem === null || newItem === void 0 ? void 0 : newItem.value) && (this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value);
+        repositionScroll(this.itemsContainer, this.selectedItem, KeyboardKeys.ARROW_UP);
+      }
+      else if (e.code === KeyboardKeys.ENTER) {
+        this.hideList();
+        this.showAllItems();
+      }
+      else if (e.code === KeyboardKeys.SPACE) {
+        this.showList();
+      }
+      else if (e.code === KeyboardKeys.ESCAPE) {
+        this.showAllItems();
+        this.hideList();
+      }
+      else if (e.code === KeyboardKeys.TAB && this.showList) {
+        this.hideList();
+      }
+    };
+    this.handleValueChangeFormText = (e) => {
+      this.value = e.detail;
+    };
+    /*********************************
+    PRIVATE METHODS
+    *********************************/
+    this.filterList = (text) => {
+      text = this.sanitizeString(text);
+      !this.caseSensitive && (text = text.toLowerCase());
+      const enabledItems = this.getEnabledItems();
+      const filteredItems = [];
+      if (enabledItems.length) {
+        enabledItems.forEach((item) => {
+          const itemText = !this.caseSensitive
+            ? item.textContent.toLocaleLowerCase()
+            : item.textContent;
+          if (!item.disabled && itemText.includes(text)) {
+            filteredItems.push(item);
+            item.hidden = false;
+          }
+          else {
+            item.hidden = true;
+          }
+        });
+      }
+      if (filteredItems.length >= 1) {
+        this.showList();
+      }
+      else {
+        this.hideList();
+      }
+      return filteredItems;
+    };
+    this.showAllItems = () => {
+      const enabledItems = this.getEnabledItems();
+      enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.forEach((item) => {
+        (item === null || item === void 0 ? void 0 : item.hidden) && (item.hidden = false);
+      });
+    };
+    this.cleanup = () => {
+      this.myObserver.unobserve(document.body);
+      document.removeEventListener("click", this.detectClickOutsideCombo, true);
+      document.removeEventListener("scroll", this.detectMouseScroll, true);
+      this._mo.disconnect();
+    };
+    this.setup = () => {
+      this.setIndexes();
+      this.setInitialValue();
+    };
+    this.setIndexes = () => {
+      const allItems = this.getAllItems();
+      allItems.forEach((item, i) => {
+        item.index = i;
+      });
+    };
+    this.getEnabledItems = () => {
+      const enabledItems = [];
+      const allItems = this.getAllItems();
+      allItems.forEach((item) => {
+        !item.disabled && enabledItems.push(item);
+      });
+      return enabledItems;
+    };
+    this.getFilteredItems = () => {
+      const enabledItems = this.getEnabledItems();
+      const filteredItems = [];
+      enabledItems.forEach((item) => {
+        !item.hidden && filteredItems.push(item);
+      });
+      return filteredItems;
+    };
+    this.getAllItems = () => {
+      const allItems = [];
+      const allItemsNodeList = this.el.querySelectorAll("gxg-combo-box-item");
+      allItemsNodeList.forEach((item) => {
+        allItems.push(item);
+      });
+      return allItems;
+    };
+    this.getItemByValue = (value) => {
+      let item;
+      if (value) {
+        const enabledItems = this.getEnabledItems();
+        item = enabledItems.find((item) => {
+          return !item.disabled && (item === null || item === void 0 ? void 0 : item.value) && item.value === value;
+        });
+      }
+      return item;
+    };
+    this.clearSelectedItem = () => {
+      const enabledItems = this.getEnabledItems();
+      enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.forEach((item) => {
+        item.selected && (item.selected = false);
+      });
+      this.selectedItem = undefined;
+      this.clearIcon();
+    };
+    this.getValueByText = (text) => {
+      !this.caseSensitive && (text = text.toLowerCase());
+      const enabledItems = this.getEnabledItems();
+      const item = enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.find((item) => {
+        const itemText = !this.caseSensitive
+          ? item.textContent.toLocaleLowerCase()
+          : item.textContent;
+        return !item.disabled && itemText === text;
+      });
+      return item === null || item === void 0 ? void 0 : item.value;
+    };
+    this.getNewItem = (direction) => {
+      const filteredItems = this.getFilteredItems();
+      const indexInFiltered = filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.findIndex((item) => {
+        return item === this.selectedItem;
+      });
+      if (direction === "next") {
+        if (indexInFiltered === -1) {
+          /*no selectedItem at the time*/
+          return filteredItems[0];
+        }
+        return filteredItems[indexInFiltered + 1];
+      }
+      else if (direction === "prev") {
+        if (indexInFiltered !== -1) {
+          return filteredItems[indexInFiltered - 1];
+        }
+      }
+    };
+    this.setSelectedItem = (item) => {
+      if (item) {
+        this.selectedItem && (this.selectedItem.selected = false);
+        item.selected = true;
+        this.selectedItem = item;
+        return true;
+      }
+      return false;
+    };
+    this.sanitizeString = (value) => {
+      if (typeof value === "string") {
+        return value.replace(/\s+/g, " ").trim();
+      }
+      return value;
+    };
+    this.setInitialValue = () => {
+      this.setInitialValueTimes++;
+      const firstItem = this.getEnabledItems()[0];
+      if (!this.value || this.removedItem !== undefined) {
+        if (firstItem) {
+          this.value = firstItem.value;
+          this.text = firstItem.innerText;
+        }
+        else {
+          if (this.strict) {
+            this.value = undefined;
+          }
+        }
+      }
+      else {
+        const item = this.getItemByValue(this.value);
+        if (item) {
+          this.text = item.innerText;
+        }
+        else {
+          if (this.strict) {
+            this.value = undefined;
+          }
+          else {
+            this.text = this.value.toString();
+          }
+        }
+      }
+    };
+    this.toggleListButtonClickHandler = () => {
+      if (!this.disabled) {
+        this.showAllItems();
+        this.toggleList();
+        this.focus();
+      }
+    };
+    this.inputTextClickHandler = () => {
+      if (!this.disabled) {
+        this.disableFilter && this.toggleList();
+      }
+    };
+    this.toggleList = () => {
+      if (!this.disabled) {
+        this.listIsOpen = !this.listIsOpen;
+      }
+    };
+    this.showList = () => {
+      if (!this.disabled) {
+        this.listIsOpen = true;
+      }
+    };
+    this.hideList = () => {
+      if (!this.disabled) {
+        this.listIsOpen = false;
+      }
+    };
+    this.clearIcon = () => {
+      if (!this.disabled) {
+        this.inputTextIcon = null;
+        this.inputTextIconPosition = null;
+      }
+    };
+  }
+  disabledHandler(newValue) {
+    if (newValue === true) {
+      this.valueBeforeDisabled = this.value;
+      this.textBeforeDisabled = this.text;
+      this.iconBeforeDisabled = this.inputTextIcon;
+      this.iconPositionBeforeDisabled = this.inputTextIconPosition;
+      this.value = null;
+      this.inputTextIcon = null;
+      this.inputTextIconPosition = null;
+    }
+    else {
+      this.value = this.valueBeforeDisabled;
+      this.text = this.textBeforeDisabled;
+      this.inputTextIcon = this.iconBeforeDisabled;
+      this.inputTextIconPosition = this.iconPositionBeforeDisabled;
+    }
+  }
+  componentDidUpdate() {
+    const itemsContainerIsOverflowing = this.itemsContainerBottomOverflows();
+    itemsContainerIsOverflowing
+      ? (this.listPosition = "above")
+      : (this.listPosition = "below");
+  }
+  componentWillLoad() {
+    this.setup();
+    this.attachExportParts();
+    this.mutationRemoveObserver();
+  }
+  componentDidLoad() {
+    this.resizeObserver();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+  /*********************************
+  METHODS
+  *********************************/
+  async open() {
+    this.listIsOpen = true;
+  }
+  async close() {
+    this.listIsOpen = false;
+  }
+  async getValueByIndex(index) {
+    const enabledItems = this.getEnabledItems();
+    const foundItem = enabledItems.filter((item) => item.index === index)[0];
+    return foundItem === null || foundItem === void 0 ? void 0 : foundItem.value;
+  }
+  async setValueByIndex(index) {
+    const enabledItems = this.getEnabledItems();
+    const foundItem = enabledItems.filter((item) => item.index === index)[0];
+    if (foundItem && foundItem.value) {
+      this.value = foundItem.value;
+      return true;
+    }
+    return false;
+  }
+  async selectInputText() {
+    this.inputText.selectInputText();
+  }
+  /*********************************
+  LISTEN
+  *********************************/
+  itemSelectedHandler(event) {
+    this.value = event.detail.value;
+    this.inputText.focus();
+  }
+  itemDidLoadHandler() {
+    this.setIndexes();
+    this.setInitialValue();
+  }
+  keyDownComboItemHandler(event) {
+    event.stopPropagation();
+    if (event.detail === "ArrowUp") {
+      this.inputText.focus();
+    }
+    else if (event.detail === "Tab" || event.detail === "Escape") {
+      this.listIsOpen = false;
+      this.inputText.focus();
+    }
+  }
+  /*********************************
+  WATCH
+  *********************************/
+  onValueChanged(newValue) {
+    if (this.setInitialValueTimes > 1) {
+      this.valueChanged.emit(newValue);
+    }
+    this.clearSelectedItem();
+    let value;
+    let newItem = undefined;
+    if (this.userTyped) {
+      value = this.getValueByText(newValue);
+    }
+    else {
+      !this.listIsOpen && this.showAllItems();
+      value = newValue;
+    }
+    newItem = this.getItemByValue(value);
+    if (newItem) {
+      this.setSelectedItem(newItem);
+      this.setIcon(newItem.icon);
+      (newItem === null || newItem === void 0 ? void 0 : newItem.textContent) && (this.text = newItem.textContent);
+    }
+    else {
+      //this.setIcon(undefined);
+      if (this.strict) {
+        this.text = undefined;
+        this.value = undefined;
+      }
+      else {
+        this.text = newValue;
+      }
+    }
+    this.userTyped = false;
+  }
+  listIsOpenHandler(newValue) {
+    let isOpen = false;
+    if (newValue) {
+      //list is open
+      isOpen = true;
+      document.addEventListener("click", this.detectClickOutsideCombo, true);
+      document.addEventListener("scroll", this.detectMouseScroll, true);
+      this.opened.emit();
+      //Reposition .items-container, since it has fixed position
+      this.repositionItemsContainer();
+    }
+    else {
+      //list is closed
+      document.removeEventListener("click", this.detectClickOutsideCombo, true);
+      document.removeEventListener("scroll", this.detectMouseScroll, true);
+      this.closed.emit();
+    }
+    this.toggled.emit(isOpen);
+  }
+  selectedItemHandler(newItem) {
+    newItem && (newItem.selected = true);
+  }
+  removedItemHandler(removedItem) {
+    const value = removedItem.value;
+    if (value === this.value) {
+      /*The removed item was the one selected on the combo. Re-evaluation of new value is needed*/
+      this.setup();
+    }
+  }
+  setIcon(icon) {
+    if (icon) {
+      this.inputTextIcon = icon;
+      this.inputTextIconPosition = "start";
+    }
+    else {
+      this.inputTextIcon = null;
+      this.inputTextIconPosition = null;
+    }
+  }
+  focus() {
+    this.inputText.focus();
+  }
+  detectClickOutsideComboFunc(event) {
+    const comboMainContainer = this.el.shadowRoot.querySelector(".main-container");
+    const x = event.x;
+    const y = event.y;
+    //Contextual menu coordinates
+    const comboMainContainerArea = comboMainContainer.getBoundingClientRect();
+    if ((x > comboMainContainerArea.left &&
+      x < comboMainContainerArea.right &&
+      y > comboMainContainerArea.top &&
+      y < comboMainContainerArea.bottom) ||
+      (event.screenX === 0 &&
+        event.screenY === 0 &&
+        event.clientX === 0 &&
+        event.clientY === 0)) ;
+    else {
+      this.listIsOpen = false;
+      //Click happened outside the combo
+    }
+  }
+  detectMouseScrollFunc() {
+    this.listIsOpen = false;
+  }
+  clearCombo() {
+    if (!this.disabled) {
+      this.value = undefined;
+      this.listIsOpen = true;
+      this.focus();
+    }
+  }
+  resizeObserver() {
+    this.myObserver = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        this.repositionItemsContainer();
+      });
+    });
+    this.myObserver.observe(document.body);
+    this.myObserver.observe(this.el);
+  }
+  repositionItemsContainer() {
+    //redefine .main-container width
+    const inputText = this.inputText;
+    const inputTextWidth = inputText.clientWidth;
+    this.itemsContainer.style.width = inputTextWidth + "px";
+    //redefine .items-container "top" value
+    const inputTextBoundingClient = inputText.getBoundingClientRect();
+    const inputTextY = inputTextBoundingClient.y;
+    const inputTextHeight = inputTextBoundingClient.height;
+    this.itemsContainer.style.top = inputTextY + inputTextHeight + "px";
+  }
+  itemsContainerBottomOverflows() {
+    const viewportHeight = window.innerHeight;
+    const comboBottom = this.el.getBoundingClientRect().bottom;
+    const itemsContainerHeight = this.itemsContainer.clientHeight;
+    const result = comboBottom + itemsContainerHeight;
+    const itOverflows = result > viewportHeight ;
+    return itOverflows;
+  }
+  render() {
+    const clearIcon = this.value && !this.disableFilter && !this.disableClear;
+    return (h(Host, { class: {
+        "gxg-combo-box--disabled": this.disableFilter,
+        large: state.large,
+      }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
+        "main-container": true,
+      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: this.fixedIcon ? "start" : this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
+        "items-container": true,
+        "items-container--show": this.listIsOpen,
+        "items-container--no-match": this.noMatch,
+        "items-container--below": this.listPosition === "below",
+        "items-container--above": this.listPosition === "above",
+      }, style: { maxHeight: this.listMaxHeight }, ref: (el) => (this.itemsContainer = el) }, h("slot", null), this.noMatch && this.strict ? (h("div", { class: "no-ocurrences-found" }, "No occurrences found", h("span", null, "ctrl/cmd + backspace to erase"))) : null))), this.formMessageLogic(this)));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "disabled": ["disabledHandler"],
+    "value": ["onValueChanged"],
+    "listIsOpen": ["listIsOpenHandler"],
+    "selectedItem": ["selectedItemHandler"],
+    "removedItem": ["removedItemHandler"]
+  }; }
+};
+GxgComboBox.style = comboBoxCss;
+
+const comboBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:block;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;font-family:var(--font-family-primary);font-size:var(--font-size-sm);background-color:var(--color-background);color:var(--color-on-background);opacity:1;overflow:hidden}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-01);width:100%;height:var(--gxg-list-item-height);box-sizing:border-box;}:host gxg-icon{flex-shrink:0}.description{white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}:host(.no-icon) .container{padding-left:var(--spacing-comp-02)}:host([hidden]){display:none}:host(.display-none){display:none}:host(:hover){background-color:var(--gxg-background-color-item-hover)}:host([selected]){background-color:var(--gxg-background-color-item-selected);color:var(--gxg-color-selected)}:host(.large){font-size:var(--font-size-lg);min-height:auto}:host(.large) gxg-icon{margin-right:var(--spacing-comp-01)}";
+
+const GxgComboBoxItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.itemDidLoad = createEvent(this, "itemDidLoad", 7);
+    this.keyDownPressed = createEvent(this, "keyDownPressed", 7);
+    /**
+     * Any icon that belongs to Gemini icon library: https://gx-gemini.netlify.app/?path=/story/icons
+     */
+    this.icon = undefined;
+    /**
+     * The presence of this attribute makes this combo-item disabled and not interactive.
+     */
+    this.disabled = false;
+    /**
+     * The presence of this attribute makes this combo-item selected.
+     */
+    this.selected = false;
+    /**
+     * True if the text typed on the combo box input is equal to this combo box item text
+     */
+    this.exactMatch = false;
+    /**
+     * This property hides the combo box item
+     */
+    this.hidden = false;
+    /*********************************
+    WATCH
+    *********************************/
+    this.setup = () => {
+      if (!this.value) {
+        this.value = this.el.innerHTML;
+      }
+    };
+    this.clickHandler = () => {
+      this.itemSelected.emit({
+        el: this.el,
+        index: this.index,
+        value: this.value,
+        icon: this.icon,
+      });
+    };
+  }
+  componentWillLoad() {
+    this.setup();
+    this.disabled ? (this.iconColor = "ondisabled") : (this.iconColor = "auto");
+  }
+  componentDidLoad() {
+    this.itemDidLoad.emit({
+      el: this.el,
+      index: this.index,
+      value: this.value,
+      icon: this.icon,
+    });
+  }
+  iconColorHandler() {
+    if (this.disabled) {
+      return "disabled";
+    }
+    else if (this.selected) {
+      return "auto";
+    }
+    else {
+      return "auto";
+    }
+  }
+  render() {
+    return (h(Host, { onClick: this.clickHandler, class: {
+        large: state.large,
+        "no-icon": !this.icon,
+        [commonClassesNames["DISABLED_CLASS"]]: this.disabled,
+      } }, h("div", { class: { container: true, "form-element": true } }, this.icon ? (h("gxg-icon", { color: this.iconColorHandler(), size: state.large ? "regular" : "small", type: this.icon })) : null, h("div", { class: "description" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
+GxgComboBoxItem.style = comboBoxItemCss;
+
+export { GxgComboBox as gxg_combo_box, GxgComboBoxItem as gxg_combo_box_item };