@genexus/genexus-ide-ui 0.0.20 → 0.0.21

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

@@ -1,792 +1,4 @@
-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 './reposition-scroll.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 !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}: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-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$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;
-  } });
-}
+import { G as GxgListBox$1, d as defineCustomElement$1 } from './list-box.js';
 
 const GxgListBox = GxgListBox$1;
 const defineCustomElement = defineCustomElement$1;