@genexus/genexus-ide-ui 0.0.19 → 0.0.21

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

@@ -0,0 +1,856 @@
+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 { f as formClasses, c as commonClassesNames } from './classesNames-6cd8fadb.js';
+import { r as repositionScroll } from './reposition-scroll-3478b46f.js';
+import { s as state } from './store-c2650ca5.js';
+import { e as exportParts } from './export-parts-7f208d57.js';
+import './types-02481dff.js';
+
+const listBoxCss = ":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}: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(.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)}:host{display:block;font-size:var(--font-size-sm);font-family:var(--font-family-primary);background-color:var(--color-background);color:var(--color-on-background)}:host .container{height:100%;border:var(--border-radius-xs) var(--border-style-regular) var(--gray-02)}:host .header{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;background-color:var(--gray-02);padding:var(--spacing-comp-01) var(--spacing-comp-02);text-transform:uppercase;font-size:inherit;font-weight:var(--font-weight-bold);color:var(--color-on-background)}:host .main{overflow-y:auto;}:host .main::-webkit-scrollbar{width:6px;height:6px}:host .main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .main--no-border{border:none}:host .icon{margin-inline-end:var(--spacing-comp-01)}:host .checkbox{margin-inline-end:var(--spacing-comp-01)}:host.selected{background-color:var(--color-secondary-active);color:var(--color-always-white)}.container:focus-within{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:0}.suggestions__container{background-color:var(--gray-01);color:var(--gray-06);font-family:inherit;font-size:var(--font-size-sm);padding:var(--spacing-comp-01) var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);align-items:center}.suggestions__list{margin:0;padding:0;list-style-type:none;flex-grow:1}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large){font-size:var(--font-size-lg)}";
+
+const GxgListBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
+    this.checkedChanged = createEvent(this, "checkedChanged", 7);
+    /*********************************
+    PROPERTIES & STATE
+    *********************************/
+    /**
+     * The listbox title that appears on the header
+     */
+    this.theTitle = "";
+    /**
+     * The list-box min-height
+     */
+    this.minHeight = "0";
+    /**
+     * The list-box height
+     */
+    this.height = "100%";
+    /**
+     * The list-box max-height
+     */
+    this.maxHeight = "100%";
+    /**
+     * The presence of this attribute will display a checkbox for every item
+     */
+    this.checkboxes = false;
+    /**
+     * The presence of this attribute will deactivate multi-selection
+     */
+    this.singleSelection = false;
+    /**
+     * The presence of this attribute allows the list-box to not have any list-box-item selected
+     */
+    this.allowsEmpty = false;
+    /**
+     * The presence of this attribute disables the border
+     */
+    this.noBorder = false;
+    /**
+     * An object with suggestions about the possible keyboard combinations
+     */
+    this.keyboardSuggestions = {
+      checkCheckbox: "to check a checkbox press (shift + space)",
+      uncheckCheckbox: "to uncheck a checkbox press (shift + ctrl + space)",
+    };
+    /**
+     * Disable suggestions about keyboard combinations
+     */
+    this.disableSuggestions = false;
+    /**
+     * this variable keeps an array of the selected items.
+     */
+    this.selectedItems = [];
+    /**
+     * this variable keeps an array of the items with checked checkboxes.
+     */
+    this.checkedItems = [];
+    /**
+     * Hides the keyboard suggestions
+     */
+    this.hideKeyboardSuggestions = true;
+    /**
+     * This is needed to evaluate if keyboard suggestions should be displayed.
+     */
+    this.userUsedKeyboard = false;
+    this.headerHeight = 0;
+    /*********************************
+    PROPERTIES FOR VALIDATION
+    *********************************/
+    /**
+     * The presence of this attribute makes the component disabled
+     */
+    this.disabled = false;
+    /*VALIDATION*/
+    this.formMessageLogic = formMessageLogic;
+    /**
+     * Make the radio-buttons required
+     */
+    this.required = false;
+    /**
+     * The validation status
+     *
+     */
+    this.validationStatus = "indeterminate";
+    this.initialSetup = () => {
+      /*set index to every item*/
+      const allItems = this.getAllItems();
+      if (allItems === null || allItems === void 0 ? void 0 : allItems.length)
+        allItems.forEach((item, i) => {
+          item.index = i;
+        });
+      /*conditions to do setup*/
+      const selectItem = !this.allowsEmpty && this.selectedItemsLength() === 0;
+      const unselectItems = this.singleSelection && this.selectedItemsLength() > 1;
+      const setCheckbox = this.checkboxes;
+      const disableListbox = this.disabled;
+      const doSetup = selectItem || setCheckbox || unselectItems || disableListbox;
+      /*/conditions to do setup*/
+      if (doSetup) {
+        const enabledItems = this.getEnabledItems();
+        const selectedItems = this.getSelectedItemsFunc();
+        if (selectItem) {
+          const firstDeselectedItem = enabledItems.find((item) => {
+            return !item.selected;
+          });
+          firstDeselectedItem && (firstDeselectedItem.selected = true);
+        }
+        else if (unselectItems) {
+          if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+            selectedItems.forEach((item, i) => {
+              /*keep only the first one selected*/
+              i !== 0 && (item.selected = false);
+            });
+          }
+        }
+        if (setCheckbox) {
+          enabledItems.forEach((item) => {
+            item.checkbox = true;
+            !this.disableSuggestions && (item.emitCheckboxChange = true);
+          });
+        }
+        if (disableListbox) {
+          enabledItems.forEach((item) => {
+            item.disabled = true;
+          });
+        }
+      }
+      /*Do updateSelectedItems to initialize this.getSelectedItems array*/
+      this.selectedItemsLength() > 0 && this.updateSelectedItems();
+    };
+    this.handleKeyDown = (e) => {
+      this.userUsedKeyboard = true;
+      const ctrlKey = e.ctrlKey;
+      const cmdKey = e.metaKey;
+      const shiftKey = e.shiftKey;
+      const activeItemIndex = this.getIndexByElement(this.activeItem);
+      if (e.code === "ArrowDown" ||
+        e.code === "ArrowUp" ||
+        e.code === "Space" ||
+        e.code === "Enter" ||
+        e.code === "Backspace" ||
+        e.code === "Delete" ||
+        e.code === "KeyA") {
+        e.preventDefault();
+      }
+      if (e.code === "ArrowDown" || e.code === "ArrowUp") {
+        this.HandleArrow(e.code, shiftKey, activeItemIndex);
+      }
+      else if (e.code === "Space" || e.code === "Enter") {
+        if (shiftKey && ctrlKey) {
+          /*uncheck checkbox*/
+          const changedLength = this.setCheckboxState(this.getHighlightedItems(), false);
+          changedLength > 0 && (this.hideKeyboardSuggestions = true);
+        }
+        else if (shiftKey && !ctrlKey) {
+          const changedLength = this.setCheckboxState(this.getHighlightedItems(), true);
+          changedLength > 0 && (this.hideKeyboardSuggestions = true);
+        }
+        else if (!shiftKey &&
+          (ctrlKey || cmdKey) &&
+          this.selectedItemsLength() >= 1) {
+          this.unselectHighlightedItems();
+        }
+        else if (!ctrlKey && !cmdKey) {
+          if (this.singleSelection) {
+            if (this.activeItem === this.getSelectedItemsFunc()[0]) {
+              return;
+            }
+            this.clearSelectedItems();
+            this.selectItems(this.activeItem);
+          }
+          else {
+            /*multi-select allowed*/
+            if (ctrlKey || cmdKey) {
+              this.clearHighlightedItems();
+            }
+            else {
+              this.selectHighlightedItems();
+            }
+          }
+        }
+      }
+      else if (e.code === "KeyA" &&
+        (ctrlKey || cmdKey) &&
+        !this.singleSelection) {
+        /*highlight all*/
+        this.highlightAll();
+      }
+      else if (e.code === "Delete" || e.code === "Backspace") {
+        /*Deselect highlighted items*/
+        this.unselectHighlightedItems();
+      }
+    };
+    this.HandleArrow = (direction, shiftKey, activeItemIndex) => {
+      /*Get the next element*/
+      let newElement;
+      if (activeItemIndex >= 0) {
+        direction === "ArrowDown"
+          ? (newElement = this.getNextItem(activeItemIndex))
+          : (newElement = this.getPrevItem(activeItemIndex));
+      }
+      else {
+        direction === "ArrowDown"
+          ? (newElement = this.getFirstEnabledItem())
+          : null;
+      }
+      /*Handle*/
+      if (newElement) {
+        this.singleSelection &&
+          !this.allowsEmpty &&
+          newElement !== this.getSelectedItemsFunc()[0] &&
+          this.clearSelectedItems();
+        if (shiftKey && !this.singleSelection) {
+          !this.activeItem.selected && this.selectItems(this.activeItem);
+          !newElement.selected && this.selectItems(newElement);
+        }
+        this.unhighlightAll();
+        this.setActiveItem(newElement);
+        this.highlightItem(newElement);
+        if ((this.singleSelection || (!this.singleSelection && shiftKey)) &&
+          !newElement.selected &&
+          !this.allowsEmpty) {
+          this.selectItems(newElement);
+        }
+        repositionScroll(this.main, newElement, direction);
+      }
+    };
+    this.selectedItemsLength = () => {
+      return this.getSelectedItemsFunc().length;
+    };
+    this.getIndexByElement = (el) => {
+      let index;
+      const enabledItems = this.getEnabledItems();
+      if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
+        const element = enabledItems.find((item) => item === el);
+        element && (index = element.index);
+      }
+      return index;
+    };
+    this.updateSelectedItems = () => {
+      const selectedItemsArray = [];
+      const selectedItems = this.getSelectedItemsFunc();
+      selectedItems.forEach((item) => {
+        selectedItemsArray.push({
+          active: item.active,
+          selected: item.selected,
+          checked: item.checked,
+          highlighted: item.highlighted,
+          index: item.index,
+          value: item.value || item.textContent,
+        });
+      });
+      this.selectedItems = [...selectedItemsArray];
+    };
+    /* OTHER */
+    this.getAllItems = () => {
+      const allItemsArray = [];
+      const allItems = this.el.querySelectorAll("gxg-list-box-item");
+      if (allItems === null || allItems === void 0 ? void 0 : allItems.length) {
+        allItems.forEach((item) => {
+          allItemsArray.push(item);
+        });
+      }
+      return allItemsArray;
+    };
+  }
+  /*********************************
+  METHODS
+  *********************************/
+  async getSelectedItems() {
+    if (this.disabled) {
+      return null;
+    }
+    return this.selectedItems;
+  }
+  componentDidRender() {
+    if (this.theTitle) {
+      this.headerHeight = this.header.clientHeight;
+    }
+  }
+  componentWillLoad() {
+    this.initialSetup();
+  }
+  itemLoadedHandler() {
+    this.initialSetup();
+  }
+  itemClickedHandler(event) {
+    const { clickedItem, ctrlKey, cmdKey, shiftKey, index } = event["detail"];
+    //this.clearActiveItem();
+    if (this.singleSelection) {
+      if (this.activeItem === clickedItem && !this.allowsEmpty) {
+        /*same item. do nothing.*/
+        return;
+      }
+      if (this.allowsEmpty && (ctrlKey || cmdKey)) {
+        this.unselectItems(clickedItem);
+      }
+      else {
+        this.clearHighlightedItems();
+        this.clearSelectedItems();
+        this.selectItems(clickedItem);
+        this.highlightItem(clickedItem);
+      }
+    }
+    else {
+      /*multiple-selection allowed*/
+      if (shiftKey || !ctrlKey) {
+        this.clearHighlightedItems();
+        this.clearSelectedItems();
+      }
+      if (shiftKey) {
+        if (this.activeItem === clickedItem)
+          return;
+        let fromIndex;
+        const toIndex = index;
+        if (this.activeItem) {
+          const activeItemIndex = this.getIndexByElement(this.activeItem);
+          if (index === activeItemIndex) {
+            return;
+          }
+          fromIndex = activeItemIndex;
+        }
+        else {
+          fromIndex = 0;
+        }
+        this.selectMultipleItems(fromIndex, toIndex);
+      }
+      else if (ctrlKey) {
+        if (!this.allowsEmpty &&
+          this.selectedItemsLength() === 1 &&
+          clickedItem.selected) {
+          return;
+        }
+        this.unhighlightItem(this.activeItem);
+        this.toggleItem(clickedItem);
+        this.highlightItem(clickedItem);
+      }
+      else {
+        this.selectItems(clickedItem);
+        this.highlightItem(clickedItem);
+      }
+    }
+    this.setActiveItem(clickedItem);
+  }
+  selectedItemsHandler(newArray) {
+    this.selectionChanged.emit(newArray);
+  }
+  checkedItemsHandler(newArray) {
+    this.checkedChanged.emit(newArray);
+  }
+  disabledHandler(disabled) {
+    if (disabled) {
+      const enabledItems = this.getEnabledItems();
+      enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.forEach((item) => {
+        item.disabled = true;
+      });
+    }
+  }
+  hideKeyboardSuggestionsHandler(newValue, oldValue) {
+    newValue === true &&
+      oldValue === false &&
+      localStorage.setItem("gxg-list-box-hide-keyboard-suggestions", "true");
+  }
+  checkboxStateChangedHandler(e) {
+    const checkedItemEl = e.detail.checkedItem;
+    const checkedItemValue = e.detail.checked;
+    /*Update checkboxes array*/
+    const checkedItemsArray = [];
+    const enabledItems = this.getEnabledItems();
+    if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
+      enabledItems.forEach((enabledItem) => {
+        let item;
+        if (enabledItem === checkedItemEl) {
+          item = checkedItemEl;
+        }
+        else {
+          item = enabledItem;
+        }
+        const checked = enabledItem === checkedItemEl ? checkedItemValue : item.checked;
+        if (item && checked) {
+          checkedItemsArray.push({
+            active: item.active,
+            selected: item.selected,
+            checked: checked,
+            highlighted: item.highlighted,
+            index: item.index,
+            value: item.value || item.textContent,
+          });
+        }
+      });
+      this.checkedItems = checkedItemsArray;
+    }
+    /*Local Storage*/
+    const localStorageExists = localStorage.getItem("gxg-list-box-hide-keyboard-suggestions");
+    if (!localStorageExists &&
+      !this.disableSuggestions &&
+      this.userUsedKeyboard) {
+      this.hideKeyboardSuggestions = false;
+    }
+  }
+  /* SELECTED */
+  clearSelectedItems(ignoreHighlighted = false) {
+    const actualSelectedItems = ignoreHighlighted
+      ? this.el.querySelectorAll("gxg-list-box-item[selected]:not([highlighted])")
+      : this.el.querySelectorAll("gxg-list-box-item[selected]");
+    if (actualSelectedItems.length > 0) {
+      actualSelectedItems.forEach((item) => {
+        this.unselectItems(item);
+      });
+    }
+  }
+  getSelectedItemsFunc() {
+    const selectedItemsArray = [];
+    const enabledItems = this.getEnabledItems();
+    if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
+      enabledItems.forEach((item) => {
+        !item.disabled && item.selected && selectedItemsArray.push(item);
+      });
+    }
+    return selectedItemsArray;
+  }
+  /* HIGHLIGHTED */
+  highlightItem(item, doNotActivate = false) {
+    if (item) {
+      this.singleSelection && this.clearHighlightedItems();
+      item.highlighted = true;
+      !doNotActivate && (this.activeItem = item);
+    }
+  }
+  unhighlightItem(item) {
+    if (item) {
+      item.highlighted = false;
+    }
+  }
+  unhighlightAll(ignoreActiveItem = false) {
+    const enabledItems = this.getEnabledItems();
+    if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
+      enabledItems.forEach((item) => {
+        ignoreActiveItem && item === this.activeItem
+          ? null
+          : (item.highlighted = false);
+      });
+      return enabledItems.length;
+    }
+    return 0;
+  }
+  toggleHighlightedItems() {
+    const highlightedItems = this.getHighlightedItems();
+    highlightedItems.forEach((item) => {
+      this.toggleItem(item);
+    });
+  }
+  selectHighlightedItems() {
+    const selectedItems = this.selectItems(this.getHighlightedItems());
+    return selectedItems;
+  }
+  unselectHighlightedItems() {
+    const length = this.unselectItems(this.getHighlightedItems());
+    return length;
+  }
+  clearHighlightedItems() {
+    const enabledItems = this.getEnabledItems();
+    if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
+      enabledItems.forEach((item) => {
+        item.highlighted && this.unhighlightItem(item);
+      });
+    }
+  }
+  getHighlightedItems() {
+    const highlightedItemsArray = [];
+    const enabledItems = this.getEnabledItems();
+    if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
+      enabledItems.forEach((item) => {
+        item.highlighted && highlightedItemsArray.push(item);
+      });
+    }
+    return highlightedItemsArray;
+  }
+  getHighlightedItemsLength() {
+    return this.getHighlightedItems().length;
+  }
+  highlightAll() {
+    let highlightedItemsLength = 0;
+    const enabledItems = this.getEnabledItems();
+    if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
+      enabledItems.forEach((item) => {
+        this.highlightItem(item, true);
+        highlightedItemsLength++;
+      });
+    }
+    return highlightedItemsLength;
+  }
+  /* INDEX */
+  getItemByIndex(index) {
+    const enabledItems = this.getEnabledItems();
+    let itemByIndex;
+    if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
+      itemByIndex = enabledItems.find((item) => item.index === index);
+    }
+    return itemByIndex;
+  }
+  /* PREV/NEXT */
+  getNextItem(index) {
+    const allItems = this.getAllItems();
+    if (index === -1) {
+      return allItems[0];
+    }
+    const allItemsLength = allItems.length;
+    let nextItemIndex = index + 1;
+    while (nextItemIndex < allItemsLength && allItems[nextItemIndex].disabled) {
+      nextItemIndex++;
+    }
+    if (nextItemIndex < allItemsLength && !allItems[nextItemIndex].disabled) {
+      return allItems[nextItemIndex];
+    }
+    return null;
+  }
+  getPrevItem(index) {
+    const allItems = this.getAllItems();
+    let prevItemIndex = index - 1;
+    while (prevItemIndex > -1 && allItems[prevItemIndex].disabled) {
+      prevItemIndex--;
+    }
+    if (prevItemIndex > -1 && !allItems[prevItemIndex].disabled) {
+      return allItems[prevItemIndex];
+    }
+    return null;
+  }
+  /* SELECTED */
+  selectItems(items) {
+    let selected = 0;
+    if (items && Array.isArray(items) && items.length > 0) {
+      items.forEach((item) => {
+        if (!item.selected && !item.disabled) {
+          (item.selected = true) && selected++;
+        }
+        this.activeItem !== item && this.unhighlightItem(item);
+      });
+    }
+    else if (items && !Array.isArray(items)) {
+      if (!items.selected && !items.disabled) {
+        (items.selected = true) && selected++;
+      }
+      this.activeItem !== items && this.unhighlightItem(items);
+    }
+    this.updateSelectedItems();
+    return selected;
+  }
+  unselectItems(items) {
+    let unselected = 0;
+    let selectedItemsLength = this.selectedItemsLength();
+    if (items &&
+      Array.isArray(items) &&
+      items.length > 0 &&
+      selectedItemsLength > 0) {
+      items.forEach((item) => {
+        if (item.selected && !item.disabled) {
+          if (this.allowsEmpty) {
+            item.selected = false;
+            unselected++;
+          }
+          else {
+            /*al least one item has to stay selected*/
+            if (selectedItemsLength > 1) {
+              item.selected = false;
+              unselected++;
+              selectedItemsLength--;
+            }
+          }
+        }
+        this.activeItem !== item && this.unhighlightItem(item);
+      });
+    }
+    else if (items && !Array.isArray(items)) {
+      if (items.selected && !items.disabled) {
+        items.selected = false;
+        unselected++;
+      }
+      this.activeItem !== items && this.unhighlightItem(items);
+    }
+    unselected > 0 && this.updateSelectedItems();
+    return unselected;
+  }
+  toggleItem(item) {
+    if (item === null || item === void 0 ? void 0 : item.selected) {
+      this.unselectItems(item);
+    }
+    else {
+      this.selectItems(item);
+    }
+  }
+  /* ACTIVE */
+  getActiveItem() {
+    const enabledItems = this.getEnabledItems();
+    return enabledItems.find((item) => item.active);
+  }
+  setActiveItem(item) {
+    if (item) {
+      this.clearActiveItem(); /*Only one active item allowed at a time*/
+      item.active = true;
+      this.activeItem = item;
+      return true;
+    }
+    return false;
+  }
+  clearActiveItem() {
+    const activeItem = this.getActiveItem();
+    if (activeItem) {
+      activeItem.active = false;
+      return true;
+    }
+    return false;
+  }
+  /* ENABLED */
+  getEnabledItems() {
+    const enabledItemsArray = [];
+    const enabledItems = this.el.querySelectorAll("gxg-list-box-item");
+    enabledItems.forEach((item) => {
+      !item.disabled && enabledItemsArray.push(item);
+    });
+    return enabledItemsArray;
+  }
+  /* CHECKBOX */
+  setCheckboxState(items, check = true) {
+    if (items && Array.isArray(items) && items.length !== 0) {
+      let changed = 0;
+      items.forEach((item) => {
+        if (!item.checked && check) {
+          item.checked = true;
+          changed++;
+        }
+        else if (item.checked && !check) {
+          item.checked = false;
+          changed++;
+        }
+      });
+      return changed;
+    }
+    else if (!(items && Array.isArray(items))) {
+      const item = items;
+      if (!item.checked && check) {
+        item.checked = true;
+        return 1;
+      }
+      else if (item.checked && !check) {
+        item.checked = false;
+        return 1;
+      }
+    }
+    return 0;
+  }
+  getFirstEnabledItem() {
+    return this.getEnabledItems()[0] || null;
+  }
+  getFirstSelectedItem() {
+    const enabledItems = this.getEnabledItems();
+    if ((enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) && enabledItems[0].selected) {
+      return enabledItems[0];
+    }
+    return undefined;
+  }
+  selectMultipleItems(fromIndex, toIndex) {
+    let comparator = toIndex;
+    const selectedItems = [];
+    if (fromIndex === toIndex) {
+      return;
+    }
+    else if (fromIndex > toIndex) {
+      const fromIndexCopy = fromIndex;
+      fromIndex = toIndex;
+      toIndex = fromIndexCopy;
+      comparator = fromIndex;
+    }
+    for (let i = fromIndex; i <= toIndex; i++) {
+      const item = this.getItemByIndex(i);
+      item && selectedItems.push(item);
+      if (i === comparator) {
+        this.highlightItem(item);
+      }
+    }
+    if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0) {
+      this.selectItems(selectedItems);
+    }
+  }
+  renderKeyboardSuggestions() {
+    if (Object.keys(this.keyboardSuggestions).length) {
+      const itemsArray = [];
+      for (const key in this.keyboardSuggestions) {
+        const listItem = (h("li", { class: "suggestions-__list-item" }, this.keyboardSuggestions[key]));
+        itemsArray.push(listItem);
+      }
+      return (h("div", { class: "suggestions suggestions__container" }, h("ul", { class: "suggestions__list" }, itemsArray), h("gxg-button", { class: "suggestions__button", type: "secondary-icon-only", icon: "gemini-tools/close", onClick: () => (this.hideKeyboardSuggestions = true) })));
+    }
+  }
+  /* RENDER */
+  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,
+      }, onKeyDown: this.handleKeyDown, style: {
+        minHeight: this.minHeight,
+        height: this.height,
+        maxHeight: this.maxHeight,
+      } }, h("div", { class: { container: true, "form-element": true }, tabindex: this.disabled ? "-1" : "0" }, this.theTitle ? (h("header", { class: { header: true }, ref: (el) => (this.header = el) }, this.theTitle)) : null, !this.disableSuggestions && !this.hideKeyboardSuggestions
+      ? this.renderKeyboardSuggestions()
+      : null, h("main", { class: {
+        main: true,
+        "main--no-border": this.noBorder,
+      }, style: {
+        height: `calc(100% - ${this.headerHeight}px)`,
+      }, ref: (el) => (this.main = el) }, h("slot", null))), formMessageLogic(this)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "selectedItems": ["selectedItemsHandler"],
+    "checkedItems": ["checkedItemsHandler"],
+    "disabled": ["disabledHandler"],
+    "hideKeyboardSuggestions": ["hideKeyboardSuggestionsHandler"]
+  }; }
+};
+GxgListBox.style = listBoxCss;
+
+const listBoxItemCss = ":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}: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{display:block;font-family:var(--font-family-primary);font-size:inherit;color:inherit;display:flex;box-sizing:border-box;align-items:center;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;outline:none}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-02);width:100%;height:var(--gxg-list-item-height--spaced);box-sizing:border-box}:host .icon{margin-inline-end:var(--spacing-comp-01);flex-shrink:0}:host gxg-form-checkbox{margin-inline-end:var(--spacing-comp-01)}:host gxg-form-checkbox::part(box){outline:none}:host(:not([disabled])){cursor:pointer !important}:host(:hover:not([selected])){background-color:var(--gxg-background-color-item-hover)}:host(.has-icon.no-checkbox) .container{padding-inline-start:var(--spacing-comp-01)}:host([selected]){background-color:var(--gxg-background-color-item-selected);color:var(--gxg-color-item-active)}:host([highlighted]){background-color:var(--gxg-background-color-item-active);color:var(--color-always-white)}:host(.large) .container{padding:var(--spacing-comp-01)}";
+
+const GxgListboxItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemClicked = createEvent(this, "itemClicked", 7);
+    this.itemLoaded = createEvent(this, "itemLoaded", 7);
+    this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.checkboxStateChanged = createEvent(this, "checkboxStateChanged", 7);
+    this.parts = {
+      checkbox: "checkbox",
+    };
+    /**
+     * Any icon that belongs to Gemini icon library: https://gx-gemini.netlify.app/?path=/story/icons
+     */
+    this.icon = undefined;
+    /**
+     * The presence of this attribute sets this item as selected
+     */
+    this.selected = false;
+    /**
+     * The presence of this attribute sets this item as highlighted
+     */
+    this.highlighted = false;
+    /**
+     * The presence of this attribute sets this item as active (it is as if it was focused)
+     * Only one item at a time should be active.
+     */
+    this.active = false;
+    /**
+     * This property is set by the list-box item. It should not be set by the user.
+     */
+    this.index = null;
+    /**
+     * The presence of this attribute emits the 'checkboxChanged' event every time a checkbox value is changed.
+     */
+    this.emitCheckboxChange = false;
+    /**
+     * The item value. If value is not provided, the value will be the item innerHTML.
+     */
+    this.value = undefined;
+    /**
+     * The presence of this attribute will add a checkbox to the item.
+     */
+    this.checkbox = false;
+    /**
+     * The presence of this attribute will make the checkbox checked.
+     */
+    this.checked = false;
+    this.mouseOver = false;
+    this.handleCheckboxClick = (e) => {
+      e.stopPropagation();
+      e.target.checked
+        ? (this.checked = true)
+        : (this.checked = false);
+    };
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+  }
+  checkboxChangedHandler(e) {
+    const checked = e.detail.value;
+    this.emitCheckboxChange &&
+      this.checkboxStateChanged.emit({
+        checkedItem: this.el,
+        checked: checked,
+      });
+  }
+  iconColor() {
+    if (this.disabled) {
+      return "disabled";
+    }
+    else if (this.selected || this.highlighted || this.mouseOver) {
+      return "negative";
+    }
+    else {
+      return "auto";
+    }
+  }
+  componentWillLoad() {
+    this.attachExportParts();
+  }
+  componentDidLoad() {
+    this.itemLoaded.emit();
+  }
+  itemClickedFunc(e) {
+    this.itemClicked.emit({
+      clickedItem: this.el,
+      ctrlKey: e.ctrlKey,
+      cmdKey: e.metaKey,
+      shiftKey: e.shiftKey,
+      index: this.index,
+    });
+  }
+  onMouseOver() {
+    this.mouseOver = true;
+  }
+  onMouseOut() {
+    this.mouseOver = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        "has-icon": this.icon !== undefined,
+        "no-checkbox": !this.checkbox,
+        large: state.large,
+        [commonClassesNames["DISABLED_CLASS"]]: this.disabled,
+      }, onClick: this.itemClickedFunc.bind(this),
+      // onMouseOver={this.onMouseOver.bind(this)}
+      // onMouseOut={this.onMouseOut.bind(this)}
+      exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: { container: true, "form-element": true } }, this.checkbox && !this.disabled ? (h("gxg-form-checkbox", { tabindex: "-1", checked: this.checked, onClick: this.handleCheckboxClick, disabled: this.disabled, part: this.parts.checkbox })) : null, this.icon !== undefined ? (h("gxg-icon", { class: "icon", color: this.iconColor(), size: "regular", type: this.icon })) : null, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+GxgListboxItem.style = listBoxItemCss;
+
+export { GxgListBox as gxg_list_box, GxgListboxItem as gxg_list_box_item };