@genexus/genexus-ide-ui 0.0.9

package/dist/components/gxg-list-box.js

@@ -0,0 +1,794 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as formMessageLogic } from './form.js';
+import { f as formClasses, c as commonClassesNames } from './classesNames.js';
+import { r as repositionScroll } from './repositionScroll.js';
+import { s as state } from './store.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './button.js';
+import { d as defineCustomElement$2 } from './icon2.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}: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)}: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 .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}: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-enabled);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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get watchers() { return {
+    "selectedItems": ["selectedItemsHandler"],
+    "checkedItems": ["checkedItemsHandler"],
+    "disabled": ["disabledHandler"],
+    "hideKeyboardSuggestions": ["hideKeyboardSuggestionsHandler"]
+  }; }
+  static get style() { return listBoxCss; }
+}, [1, "gxg-list-box", {
+    "theTitle": [1, "the-title"],
+    "minHeight": [1, "min-height"],
+    "height": [1],
+    "maxHeight": [1, "max-height"],
+    "checkboxes": [4],
+    "singleSelection": [4, "single-selection"],
+    "allowsEmpty": [4, "allows-empty"],
+    "noBorder": [4, "no-border"],
+    "keyboardSuggestions": [16],
+    "disableSuggestions": [4, "disable-suggestions"],
+    "disabled": [4],
+    "required": [4],
+    "validationStatus": [1025, "validation-status"],
+    "validationMessage": [1025, "validation-message"],
+    "informationMessage": [1, "information-message"],
+    "selectedItems": [32],
+    "checkedItems": [32],
+    "hideKeyboardSuggestions": [32],
+    "headerHeight": [32],
+    "getSelectedItems": [64]
+  }, [[0, "itemLoaded", "itemLoadedHandler"], [0, "itemClicked", "itemClickedHandler"], [0, "checkboxStateChanged", "checkboxStateChangedHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-list-box", "ch-icon", "gxg-button", "gxg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-list-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgListBox$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgListBox = GxgListBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgListBox, defineCustomElement };