@genexus/genexus-ide-ui 0.0.9

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

@@ -0,0 +1,1287 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { f as formMessageLogic } from './form-73d85602.js';
+import { K as KeyboardKeys, r as repositionScroll } from './repositionScroll-9d3ee138.js';
+import { e as exportParts } from './export-parts-7f208d57.js';
+import { s as state } from './store-75f5d491.js';
+
+const comboBoxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{font-family:var(--font-family-primary);display:block}:host gxg-form-text::part(input){padding-inline-end:var(--spacing-comp-05)}:host gxg-form-text.clear-icon::part(input){padding-inline-end:calc(var(--spacing-comp-05) * 2)}:host .main-container{width:100%;position:relative;}:host .main-container .label{font-size:var(--font-size-sm);margin-bottom:var(--spacing-lay-xs)}:host .main-container .search-container{flex:1;position:relative}:host .main-container .search-container .buttons-wrapper{position:absolute;top:2px;height:calc(100% - 4px);display:flex;align-items:center;padding-inline-start:var(--spacing-comp-01);inset-inline-end:2px}:host .main-container .search-container .buttons-wrapper .button-icon{height:20px;width:20px}:host .main-container .items-container{border:var(--border-width-sm) solid var(--gxg-border-color--regular);border-radius:var(--border-radius-md);border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;overflow-y:auto;overscroll-behavior:contain;background-color:var(--color-background);position:fixed;width:inherit;box-sizing:border-box;z-index:999;display:none;}:host .main-container .items-container::-webkit-scrollbar{width:6px;height:6px}:host .main-container .items-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .main-container .items-container .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host .main-container .items-container--show{display:block}:host .main-container .items-container--no-match{display:none}:host .main-container .items-container .no-ocurrences-found{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);padding:var(--spacing-comp-01);background-color:var(--color-background)}:host .main-container .items-container .no-ocurrences-found span{display:block;color:var(--gray-04)}:host .main-container .items-container.exact-match{overflow-y:hidden}:host .main-container .items-container--above{transform:translateY(calc(-100% - 24px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-md);border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:0;border-bottom-left-radius:0}:host .search-and-items-container{flex:1}:host([label-position=start]) .main-container{display:flex;flex-direction:row}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large) .main-container .label{display:flex;font-size:var(--font-size-lg);margin-bottom:var(--spacing-lay-xs);line-height:1.455em}:host(.large) .main-container .items-container .no-ocurrences-found{font-size:var(--font-size-lg)}";
+
+const GxgComboBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.opened = createEvent(this, "opened", 7);
+    this.closed = createEvent(this, "closed", 7);
+    this.toggled = createEvent(this, "toggled", 7);
+    this.parts = {
+      input: "input",
+      clearButton: "clear-button",
+      toggleButton: "toggle-button",
+    };
+    /**
+     * The presence of this attribute makes the input disabled
+     */
+    this.disabled = false;
+    /**
+     * The combo label
+     */
+    this.label = undefined;
+    /**
+     * The input label
+     */
+    this.labelPosition = "above";
+    /**
+     * The combo min-width
+     */
+    this.minWidth = "0";
+    /**
+     * The combo max-width
+     */
+    this.maxWidth = "100%";
+    /**
+     * The combo list max height
+     */
+    this.listMaxHeight = "244px";
+    /**
+     * The combo placeholder
+     */
+    this.placeholder = "Search item";
+    /**
+     * The presence of this attribute disables the filter
+     */
+    this.disableFilter = false;
+    /**
+     * The presence of this attribute disables the clear button
+     */
+    this.disableClear = false;
+    /**
+     * If this attribute is present, "value" will only return something if a comboItem is selected, otherwise it will return undefined.
+     * if this attribute is not present, "value" will return the value of the actual comboItem, or whatever text the comboItem has.
+     */
+    this.strict = false;
+    /**
+     * The presence of this attribute with make the filter search for values with case sensitive distinction
+     */
+    this.caseSensitive = false;
+    /**
+     * The container 'items container' position
+     */
+    this.listPosition = "below";
+    /**
+     * Centers the label
+     */
+    this.centerLabel = false;
+    /*VALIDATION*/
+    /**
+     * The presence of this attribute makes the commbo required
+     */
+    this.required = false;
+    /**
+     * The validation status
+     *
+     */
+    this.validationStatus = "indeterminate";
+    this.userTyped = false;
+    this.formMessageLogic = formMessageLogic;
+    this.inputTextValue = "";
+    this.listIsOpen = false;
+    this.inputTextIcon = undefined;
+    this.inputTextIconPosition = null;
+    this.noMatch = false;
+    this.lastAllowedValue = undefined;
+    this.slottedContent = null;
+    this.selectionProgramatic = true;
+    this.myObserver = null;
+    this.detectClickOutsideCombo = this.detectClickOutsideComboFunc.bind(this);
+    this.detectMouseScroll = this.detectMouseScrollFunc.bind(this);
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+    /*********************************
+    HANDLERS
+    *********************************/
+    this.inputHandler = (e) => {
+      this.userTyped = true;
+      const value = this.sanitizeString(e.detail);
+      const filteredItems = this.filterList(value);
+      if (!this.strict) {
+        this.value = value;
+      }
+      else if (filteredItems.length === 1) {
+        /*on strict mode, only set value if there is an exact match*/
+        this.value = filteredItems[0].value;
+      }
+    };
+    this.keyDownHandler = (e) => {
+      if (e.code === KeyboardKeys.ARROW_DOWN ||
+        e.code === KeyboardKeys.ARROW_UP ||
+        e.code === KeyboardKeys.SPACE) {
+        e.preventDefault();
+      }
+      let newItem;
+      if (e.code === KeyboardKeys.ARROW_DOWN) {
+        newItem = this.getNewItem("next");
+        (newItem === null || newItem === void 0 ? void 0 : newItem.value) && (this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value);
+        repositionScroll(this.itemsContainer, this.selectedItem, KeyboardKeys.ARROW_DOWN);
+        e.altKey && this.showList();
+      }
+      else if (e.code === KeyboardKeys.ARROW_UP) {
+        newItem = this.getNewItem("prev");
+        (newItem === null || newItem === void 0 ? void 0 : newItem.value) && (this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value);
+        repositionScroll(this.itemsContainer, this.selectedItem, KeyboardKeys.ARROW_UP);
+      }
+      else if (e.code === KeyboardKeys.ENTER) {
+        this.hideList();
+      }
+      else if (e.code === KeyboardKeys.SPACE) {
+        this.showList();
+      }
+      else if (e.code === KeyboardKeys.ESCAPE) {
+        this.hideList();
+      }
+      else if (e.code === KeyboardKeys.TAB && this.showList) {
+        this.hideList();
+      }
+    };
+    this.handleValueChangeFormText = (e) => {
+      this.value = e.detail;
+    };
+    /*********************************
+    PRIVATE METHODS
+    *********************************/
+    this.filterList = (text) => {
+      text = this.sanitizeString(text);
+      !this.caseSensitive && (text = text.toLowerCase());
+      const enabledItems = this.getEnabledItems();
+      const filteredItems = [];
+      if (enabledItems.length) {
+        enabledItems.forEach((item) => {
+          const itemText = !this.caseSensitive
+            ? item.textContent.toLocaleLowerCase()
+            : item.textContent;
+          if (!item.disabled && itemText.includes(text)) {
+            filteredItems.push(item);
+            item.hidden = false;
+          }
+          else {
+            item.hidden = true;
+          }
+        });
+      }
+      if (filteredItems.length >= 1) {
+        this.showList();
+      }
+      else {
+        this.hideList();
+      }
+      return filteredItems;
+    };
+    this.showAllItems = () => {
+      const enabledItems = this.getEnabledItems();
+      enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.forEach((item) => {
+        (item === null || item === void 0 ? void 0 : item.hidden) && (item.hidden = false);
+      });
+    };
+    this.cleanup = () => {
+      this.myObserver.unobserve(document.body);
+      document.removeEventListener("click", this.detectClickOutsideCombo, true);
+      document.removeEventListener("scroll", this.detectMouseScroll, true);
+    };
+    this.setup = () => {
+      this.setIndexes();
+      this.onValueChanged(this.value);
+      this.setInitialValue();
+    };
+    this.setIndexes = () => {
+      const allItems = this.getAllItems();
+      allItems.forEach((item, i) => {
+        item.index = i;
+      });
+    };
+    this.getEnabledItems = () => {
+      const enabledItems = [];
+      const allItems = this.getAllItems();
+      allItems.forEach((item) => {
+        !item.disabled && enabledItems.push(item);
+      });
+      return enabledItems;
+    };
+    this.getFilteredItems = () => {
+      const enabledItems = this.getEnabledItems();
+      const filteredItems = [];
+      enabledItems.forEach((item) => {
+        !item.hidden && filteredItems.push(item);
+      });
+      return filteredItems;
+    };
+    this.getAllItems = () => {
+      const allItems = [];
+      const allItemsNodeList = this.el.querySelectorAll("gxg-combo-box-item");
+      allItemsNodeList.forEach((item) => {
+        allItems.push(item);
+      });
+      return allItems;
+    };
+    this.getItemByValue = (value) => {
+      let item;
+      if (value) {
+        const enabledItems = this.getEnabledItems();
+        item = enabledItems.find((item) => {
+          return !item.disabled && (item === null || item === void 0 ? void 0 : item.value) && item.value === value;
+        });
+      }
+      return item;
+    };
+    this.clearSelectedItem = () => {
+      const enabledItems = this.getEnabledItems();
+      enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.forEach((item) => {
+        item.selected && (item.selected = false);
+      });
+      this.selectedItem = undefined;
+      this.clearIcon();
+    };
+    this.getValueByText = (text) => {
+      !this.caseSensitive && (text = text.toLowerCase());
+      const enabledItems = this.getEnabledItems();
+      const item = enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.find((item) => {
+        const itemText = !this.caseSensitive
+          ? item.textContent.toLocaleLowerCase()
+          : item.textContent;
+        return !item.disabled && itemText === text;
+      });
+      return item === null || item === void 0 ? void 0 : item.value;
+    };
+    this.getNewItem = (direction) => {
+      const filteredItems = this.getFilteredItems();
+      const indexInFiltered = filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.findIndex((item) => {
+        return item === this.selectedItem;
+      });
+      if (direction === "next") {
+        if (indexInFiltered === -1) {
+          /*no selectedItem at the time*/
+          return filteredItems[0];
+        }
+        return filteredItems[indexInFiltered + 1];
+      }
+      else if (direction === "prev") {
+        if (indexInFiltered !== -1) {
+          return filteredItems[indexInFiltered - 1];
+        }
+      }
+    };
+    this.setSelectedItem = (item) => {
+      if (item) {
+        this.selectedItem && (this.selectedItem.selected = false);
+        item.selected = true;
+        this.selectedItem = item;
+        return true;
+      }
+      return false;
+    };
+    this.sanitizeString = (value) => {
+      if (typeof value === "string") {
+        return value.replace(/\s+/g, " ").trim();
+      }
+      return value;
+    };
+    this.setInitialValue = () => {
+      if (this.strict && this.disableFilter && !this.value) {
+        const enabledItems = this.getEnabledItems();
+        if (enabledItems.length) {
+          this.value = enabledItems[0].value;
+        }
+      }
+    };
+    this.toggleListButtonClickHandler = () => {
+      if (!this.disabled) {
+        this.showAllItems();
+        this.toggleList();
+        this.focus();
+      }
+    };
+    this.inputTextClickHandler = () => {
+      if (!this.disabled) {
+        this.disableFilter && this.toggleList();
+      }
+    };
+    this.toggleList = () => {
+      this.listIsOpen = !this.listIsOpen;
+    };
+    this.showList = () => {
+      this.listIsOpen = true;
+    };
+    this.hideList = () => {
+      this.listIsOpen = false;
+    };
+    this.clearIcon = () => {
+      this.inputTextIcon = null;
+      this.inputTextIconPosition = null;
+    };
+  }
+  componentDidUpdate() {
+    const itemsContainerIsOverflowing = this.itemsContainerBottomOverflows();
+    itemsContainerIsOverflowing
+      ? (this.listPosition = "above")
+      : (this.listPosition = "below");
+  }
+  componentWillLoad() {
+    this.setup();
+    this.attachExportParts();
+  }
+  componentDidLoad() {
+    this.resizeObserver();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+  /*********************************
+  METHODS
+  *********************************/
+  async open() {
+    this.listIsOpen = true;
+  }
+  async close() {
+    this.listIsOpen = false;
+  }
+  async getValueByIndex(index) {
+    const enabledItems = this.getEnabledItems();
+    const foundItem = enabledItems.filter((item) => item.index === index)[0];
+    return foundItem === null || foundItem === void 0 ? void 0 : foundItem.value;
+  }
+  async setValueByIndex(index) {
+    const enabledItems = this.getEnabledItems();
+    const foundItem = enabledItems.filter((item) => item.index === index)[0];
+    if (foundItem && foundItem.value) {
+      this.value = foundItem.value;
+      return true;
+    }
+    return false;
+  }
+  /*********************************
+  LISTEN
+  *********************************/
+  itemSelectedHandler(event) {
+    this.value = event.detail.value;
+    this.inputText.focus();
+  }
+  itemDidLoadHandler() {
+    this.setup();
+  }
+  keyDownComboItemHandler(event) {
+    event.stopPropagation();
+    if (event.detail === "ArrowUp") {
+      this.inputText.focus();
+    }
+    else if (event.detail === "Tab" || event.detail === "Escape") {
+      this.listIsOpen = false;
+      this.inputText.focus();
+    }
+  }
+  /*********************************
+  WATCH
+  *********************************/
+  onValueChanged(newValue) {
+    this.valueChanged.emit(newValue);
+    this.clearSelectedItem();
+    const item = this.getItemByValue(newValue);
+    if (item === undefined) {
+      //Value was set programmatically.
+      this.text = newValue;
+    }
+    else {
+      let value;
+      let newItem = undefined;
+      if (this.userTyped) {
+        value = this.getValueByText(newValue);
+      }
+      else {
+        this.showAllItems();
+        value = newValue;
+      }
+      newItem = this.getItemByValue(value);
+      if (newItem) {
+        this.setSelectedItem(newItem);
+        this.setIcon(newItem.icon);
+        (newItem === null || newItem === void 0 ? void 0 : newItem.textContent) && (this.text = newItem.textContent);
+      }
+      else {
+        //this.setIcon(undefined);
+        if (this.strict) {
+          this.text = undefined;
+          this.value = undefined;
+        }
+        else {
+          if (!this.userTyped) {
+            this.text = undefined;
+          }
+        }
+      }
+    }
+    this.userTyped = false;
+  }
+  listIsOpenHandler(newValue) {
+    let isOpen = false;
+    if (newValue) {
+      //list is open
+      isOpen = true;
+      document.addEventListener("click", this.detectClickOutsideCombo, true);
+      document.addEventListener("scroll", this.detectMouseScroll, true);
+      this.opened.emit();
+      //Reposition .items-container, since it has fixed position
+      this.repositionItemsContainer();
+    }
+    else {
+      //list is closed
+      document.removeEventListener("click", this.detectClickOutsideCombo, true);
+      document.removeEventListener("scroll", this.detectMouseScroll, true);
+      this.closed.emit();
+    }
+    this.toggled.emit(isOpen);
+  }
+  selectedItemHandler(newItem) {
+    newItem && (newItem.selected = true);
+  }
+  setIcon(icon) {
+    if (icon) {
+      this.inputTextIcon = icon;
+      this.inputTextIconPosition = "start";
+    }
+    else {
+      this.inputTextIcon = null;
+      this.inputTextIconPosition = null;
+    }
+  }
+  focus() {
+    this.inputText.focus();
+  }
+  detectClickOutsideComboFunc(event) {
+    const comboMainContainer = this.el.shadowRoot.querySelector(".main-container");
+    const x = event.x;
+    const y = event.y;
+    //Contextual menu coordinates
+    const comboMainContainerArea = comboMainContainer.getBoundingClientRect();
+    if ((x > comboMainContainerArea.left &&
+      x < comboMainContainerArea.right &&
+      y > comboMainContainerArea.top &&
+      y < comboMainContainerArea.bottom) ||
+      (event.screenX === 0 &&
+        event.screenY === 0 &&
+        event.clientX === 0 &&
+        event.clientY === 0)) ;
+    else {
+      this.listIsOpen = false;
+      //Click happened outside the combo
+    }
+  }
+  detectMouseScrollFunc() {
+    this.listIsOpen = false;
+  }
+  clearCombo() {
+    if (!this.disabled) {
+      this.value = undefined;
+      this.listIsOpen = true;
+      this.focus();
+    }
+  }
+  resizeObserver() {
+    this.myObserver = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        this.repositionItemsContainer();
+      });
+    });
+    this.myObserver.observe(document.body);
+    this.myObserver.observe(this.el);
+  }
+  repositionItemsContainer() {
+    //redefine .main-container width
+    const inputText = this.inputText;
+    const inputTextWidth = inputText.clientWidth;
+    this.itemsContainer.style.width = inputTextWidth + "px";
+    //redefine .items-container "top" value
+    const inputTextBoundingClient = inputText.getBoundingClientRect();
+    const inputTextY = inputTextBoundingClient.y;
+    const inputTextHeight = inputTextBoundingClient.height;
+    this.itemsContainer.style.top = inputTextY + inputTextHeight + "px";
+  }
+  itemsContainerBottomOverflows() {
+    const viewportHeight = window.innerHeight;
+    const comboBottom = this.el.getBoundingClientRect().bottom;
+    const itemsContainerHeight = this.itemsContainer.clientHeight;
+    const result = comboBottom + itemsContainerHeight;
+    const itOverflows = result > viewportHeight ;
+    return itOverflows;
+  }
+  render() {
+    const clearIcon = this.value && !this.disableFilter && !this.disableClear;
+    return (h(Host, { class: {
+        "gxg-combo-box--disabled": this.disableFilter,
+        large: state.large,
+      }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
+        "main-container": true,
+      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.inputTextIcon, iconPosition: this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
+        "items-container": true,
+        "items-container--show": this.listIsOpen,
+        "items-container--no-match": this.noMatch,
+        "items-container--below": this.listPosition === "below",
+        "items-container--above": this.listPosition === "above",
+      }, style: { maxHeight: this.listMaxHeight }, ref: (el) => (this.itemsContainer = el) }, h("slot", null), this.noMatch && this.strict ? (h("div", { class: "no-ocurrences-found" }, "No occurrences found", h("span", null, "ctrl/cmd + backspace to erase"))) : null))), this.formMessageLogic(this)));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["onValueChanged"],
+    "listIsOpen": ["listIsOpenHandler"],
+    "selectedItem": ["selectedItemHandler"]
+  }; }
+};
+GxgComboBox.style = comboBoxCss;
+
+const comboBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default}:host{display:block;cursor:pointer;min-height:var(--spacing-comp-05);box-sizing:border-box;display:flex;align-items:center;font-family:var(--font-family-primary);font-size:var(--font-size-sm);background-color:var(--color-background);color:var(--color-on-background);opacity:1;overflow:hidden}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-01);width:100%;min-height:28px;box-sizing:border-box;}:host gxg-icon{flex-shrink:0}:host(.no-icon) .container{padding-left:var(--spacing-comp-02)}:host([hidden]){display:none}:host(.display-none){display:none}:host(:hover),:host(.selected:hover){background-color:var(--color-secondary-hover);color:var(--color-always-white)}:host([selected]:not(:hover)){background-color:var(--color-secondary-active);color:var(--color-always-white)}:host(.large){font-size:var(--font-size-lg);min-height:auto}:host(.large) .container{padding-top:var(--spacing-comp-01);padding-bottom:var(--spacing-comp-01)}:host(.large) gxg-icon{margin-right:var(--spacing-comp-01)}";
+
+const GxgComboBoxItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.itemDidLoad = createEvent(this, "itemDidLoad", 7);
+    this.keyDownPressed = createEvent(this, "keyDownPressed", 7);
+    /**
+     * Any icon that belongs to Gemini icon library: https://gx-gemini.netlify.app/?path=/story/icons
+     */
+    this.icon = undefined;
+    /**
+     * The presence of this attribute makes this combo-item disabled and not interactive.
+     */
+    this.disabled = false;
+    /**
+     * The presence of this attribute makes this combo-item selected.
+     */
+    this.selected = false;
+    /**
+     * True if the text typed on the combo box input is equal to this combo box item text
+     */
+    this.exactMatch = false;
+    /**
+     * This property hides the combo box item
+     */
+    this.hidden = false;
+    this.setup = () => {
+      if (!this.value) {
+        this.value = this.el.innerHTML;
+      }
+    };
+    this.clickHandler = () => {
+      this.itemSelected.emit({
+        el: this.el,
+        index: this.index,
+        value: this.value,
+        icon: this.icon,
+      });
+    };
+    this.onMouseOverHandler = () => {
+      this.iconColor = "negative";
+    };
+    this.onMouseOutHandler = () => {
+      !this.selected && (this.iconColor = "auto");
+    };
+  }
+  componentWillLoad() {
+    this.setup();
+    this.disabled ? (this.iconColor = "ondisabled") : (this.iconColor = "auto");
+  }
+  componentDidLoad() {
+    this.itemDidLoad.emit();
+  }
+  /*********************************
+  WATCH
+  *********************************/
+  selectedHandler(selected) {
+    selected ? (this.iconColor = "negative") : (this.iconColor = "auto");
+  }
+  render() {
+    return (h(Host, { onClick: this.clickHandler, onMouseOver: this.onMouseOverHandler, onMouseOut: this.onMouseOutHandler, class: {
+        large: state.large,
+        "no-icon": !this.icon,
+        "gxg--disabled": this.disabled,
+      } }, h("div", { class: { container: true } }, this.icon ? (h("gxg-icon", { color: this.iconColor, size: state.large ? "regular" : "small", type: this.icon })) : null, h("div", { class: "description" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "selected": ["selectedHandler"]
+  }; }
+};
+GxgComboBoxItem.style = comboBoxItemCss;
+
+const containerCss = ":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-container-elements-spacing:var(--spacing-comp-03);display:block}fieldset{padding:0;margin-inline-start:0;margin-inline-end:0;border:none}.heading,.content,.footer{padding:var(--gxg-container--padding)}:host(.gxg-container--padding-s){--gxg-container--padding:var(--spacing-comp-02)}:host(.gxg-container--padding-m){--gxg-container--padding:var(--spacing-comp-03)}:host(.gxg-container--padding-l){--gxg-container--padding:var(--spacing-comp-04)}:host(.gxg-container--display-border){border:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-top){border-top:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-end){border-inline-end:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-bottom){border-bottom:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-start){border-inline-start:1px solid var(--gxg-border-color--regular)}.heading{display:flex;width:100%;box-sizing:border-box;border-bottom:1px solid var(--gxg-border-color--regular)}.heading--justify-start{justify-content:start}.heading--justify-center{justify-content:center}.heading--justify-end{justify-content:end}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.content{display:flex;flex-direction:column;gap:var(--gxg-container-elements-spacing)}.content--no-padding{padding:0}.content--no-gap{gap:0}.footer{display:flex;border-top:1px solid var(--gxg-border-color--regular);gap:var(--gxg-container-elements-spacing)}.footer--justify-start{justify-content:start}.footer--justify-center{justify-content:center}.footer--justify-end{justify-content:end}.footer--no-border{border-top:0}.footer--no-padding{padding:0}";
+
+const GxgContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API
+  5.EVENTS (EMMIT)
+  6.COMPONENT LIFECYCLE EVENTS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  
+  Code organization suggested by StencilJs:
+  https://stenciljs.com/docs/style-guide#code-organization
+  */
+    /** ******************************
+     *  1.OWN PROPERTIES
+     ********************************/
+    /*GENERAL*/
+    /**
+     * Makes this component content act as a fieldset
+     */
+    this.fieldset = false;
+    /**
+     * Dsiplays a border all around the container
+     */
+    this.displayBorder = false;
+    /**
+     * Removes the component border on the top
+     */
+    this.displayBorderTop = false;
+    /**
+     * Removes the component border on the end
+     */
+    this.displayBorderEnd = false;
+    /**
+     * Removes the component border on the bottom
+     */
+    this.displayBorderBottom = false;
+    /**
+     * Removes the component border on the start
+     */
+    this.displayBorderStart = false;
+    /**
+     * The container general padding (applies to .heading, .content, and .footer)
+     */
+    this.sectionsPadding = "m";
+    /*HEADING*/
+    /**
+     * Removes the border bottom from the heading
+     */
+    this.noHeadingBorder = false;
+    /**
+     * Removes the padding from the heading
+     */
+    this.noHeadingPadding = false;
+    /**
+     * The heading justification
+     */
+    this.headingJustify = "center";
+    /*CONTENT*/
+    /**
+     * Removes the padding from the content
+     */
+    this.noContentPadding = false;
+    /**
+     * Removes the gap from the content
+     */
+    this.noContentGap = false;
+    /*FOOTER*/
+    /**
+     * Removes the padding from the footer
+     */
+    this.noFooterPadding = false;
+    /**
+     * The footer justification
+     */
+    this.footerJustify = "end";
+    /**
+     * Removes the border top from the footer
+     */
+    this.noBorderFooter = false;
+    /** *****************************
+     *  3.STATE() VARIABLES
+     ********************************/
+    /**
+     * A boolean variable indicating if the component has or not any content slotted content (regular slotted content, without 'slot' attribute)
+     */
+    this.hasSlottedContent = false;
+    /**
+     * A boolean variable indicating if the component has or not any content for the 'footer' slot
+     */
+    this.hasFooterSlot = false;
+    /**
+     * A boolean variable indicating that the container only has the heading section
+     */
+    this.hasOnlyHeading = false;
+    /**
+     * A boolean variable indicating that the container only has the footer section
+     */
+    this.hasOnlyFooter = false;
+    this.headingClasses = () => {
+      return {
+        heading: true,
+        "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
+        [`heading--justify-${this.headingJustify}`]: true,
+        ["heading--no-padding"]: this.noHeadingPadding,
+      };
+    };
+    this.contentClasses = () => {
+      return {
+        content: true,
+        "content--no-padding": this.noContentPadding,
+        "content--no-gap": this.noContentGap,
+      };
+    };
+    this.footer = () => {
+      return this.hasFooterSlot ? (h("footer", { class: {
+          footer: true,
+          "footer--no-border": this.noHeadingBorder ||
+            this.hasOnlyFooter ||
+            !this.hasSlottedContent,
+          [`footer--justify-${this.footerJustify}`]: true,
+          [`footer--justify-${this.footerJustify}`]: true,
+          ["footer--no-padding"]: this.noFooterPadding,
+        } }, h("slot", { name: "footer" }))) : null;
+    };
+  }
+  /** *****************************
+   4.PUBLIC PROPERTY API
+   ********************************/
+  /** *****************************
+   *  5.EVENTS (EMMIT)
+   ********************************/
+  /** *****************************
+   *  6.COMPONENT LIFECYCLE EVENTS
+   ********************************/
+  componentWillLoad() {
+    this.evaluateSlots();
+  }
+  /** *****************************
+   *  7.LISTENERS
+   ********************************/
+  /** *****************************
+   *  8.PUBLIC METHODS API
+   ********************************/
+  /** *****************************
+   *  9.LOCAL METHODS
+   ********************************/
+  evaluateSlots() {
+    //content
+    const slottedContent = this.el.querySelectorAll(":not([slot])");
+    if (slottedContent.length) {
+      this.hasSlottedContent = true;
+    }
+    //footer
+    const footerSlot = this.el.querySelectorAll('[slot="footer"]');
+    if (footerSlot.length) {
+      this.hasFooterSlot = true;
+    }
+  }
+  evaluateSections() {
+    if (!this.hasSlottedContent && !this.hasFooterSlot) {
+      this.hasOnlyHeading = true;
+    }
+    if (!this.hasSlottedContent && !this.containerTitle) {
+      this.hasOnlyFooter = true;
+    }
+  }
+  /** *****************************
+   *  10.RENDER() FUNCTION
+   ********************************/
+  render() {
+    this.evaluateSections();
+    let result;
+    if (this.fieldset) {
+      result = [
+        h("fieldset", null, this.containerTitle ? (h("legend", { class: this.headingClasses() }, h("gxg-title", { type: "title-04" }, this.containerTitle))) : null, this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null),
+        this.footer(),
+      ];
+    }
+    else {
+      result = [
+        this.containerTitle ? (h("header", { class: this.headingClasses() }, h("gxg-title", { type: "title-04" }, this.containerTitle))) : null,
+        this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null,
+        this.footer(),
+      ];
+    }
+    return (h(Host, { class: {
+        "gxg-container": true,
+        [`gxg-container--padding-${this.sectionsPadding}`]: true,
+        "gxg-container--display-border": this.displayBorder,
+        "gxg-container--display-border-top": this.displayBorderTop,
+        "gxg-container--display-border-end": this.displayBorderEnd,
+        "gxg-container--display-border-bottom": this.displayBorderBottom,
+        "gxg-container--display-border-start": this.displayBorderStart,
+      } }, result));
+  }
+  get el() { return getElement(this); }
+};
+GxgContainer.style = containerCss;
+
+const formRadioCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:inline-block;cursor:pointer;}:host input:focus+.radiobtn{box-shadow:0px 0px 0px 1px var(--color-primary-active)}:host .label{display:flex;align-items:center;position:relative;cursor:pointer;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;align-items:center;cursor:default}:host .label input{position:absolute;opacity:0;cursor:pointer}:host .checkmark{position:absolute;top:0;left:0;height:25px;width:25px;background-color:transparent}:host .label:hover input~.checkmark{background-color:transparent}:host .label input:checked~.checkmark{background-color:#2196f3}:host .checkmark:after{content:\"\";position:absolute;display:none}:host .label input:checked~.checkmark:after{display:block}:host .label .checkmark:after{left:10px;top:6px;width:7px;height:12px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host .radiobtn{display:inline-block;height:var(--spacing-comp-04);width:var(--spacing-comp-04);background-color:transparent;border-radius:50%;border-color:var(--gray-04);border-style:var(--border-style-regular);border-width:var(--border-width-sm);position:relative;margin-inline-end:var(--spacing-comp-02);flex-shrink:0;box-shadow:0px 0px 0px 1px transparent;box-sizing:border-box}:host .radiobtn--error{border-color:var(--color-error-dark) !important;background:var(--color-error-light) !important}:host .radiobtn--error:after{background-color:var(--color-error-dark) !important}:host input:focus+.radiobtn--error{box-shadow:0px 0px 0px 1px var(--color-error-dark)}:host .label:hover input~.radiobtn{background-color:transparent}:host .label input[checked]~.radiobtn{background-color:transparent;border-color:var(--color-primary-active)}:host .radiobtn:after{content:\"\";position:absolute;display:block;width:8px;height:8px;transition-property:all;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .label input[checked]~.radiobtn:after{display:block;transform:translateY(-50%) translateX(-50%);width:8px;height:8px}:host .label .radiobtn:after{height:0;width:0;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);border-radius:50%;background:var(--color-primary-active)}:host([disabled]){pointer-events:none}:host([disabled]) .radiobtn,:host([disabled]) .label input[checked]~.radiobtn{border-color:var(--gxg-border-color--disabled)}:host([disabled]) .radiobtn:after{background-color:var(--gxg-border-color--disabled)}";
+
+const GxgFormRadio = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "change", 7);
+    this.radioClicked = createEvent(this, "radioClicked", 7);
+    this.keyPressed = createEvent(this, "keyPressed", 7);
+    /**
+     * Styles the radio-button with error attributes
+     */
+    this.error = false;
+    /**
+     * The presence of this attribute makes the radio selected by default
+     */
+    this.checked = false;
+    /**
+     * The presence of this attribute disables the radio
+     */
+    this.disabled = false;
+    this.clickedHandler = () => {
+      this.radioClicked.emit();
+    };
+  }
+  /*********************************
+  METHODS
+  *********************************/
+  componentDidLoad() {
+    if (this.checked) {
+      this.radioInput.setAttribute("checked", "checked");
+    }
+    if (this.disabled && this.checked) {
+      this.radioInput.removeAttribute("checked");
+      this.checked = false;
+    }
+  }
+  watchHandler(newValue) {
+    if (newValue === false) {
+      this.radioInput.removeAttribute("checked");
+    }
+    if (newValue === true) {
+      this.radioInput.setAttribute("checked", "checked");
+      this.change.emit({
+        id: this.RadioId,
+        value: this.value,
+      });
+    }
+  }
+  handlerOnKeyDown(event) {
+    this.keyPressed.emit(event.key);
+  }
+  render() {
+    return (h(Host, { onClick: this.clickedHandler, class: { "gxg-form-radio--disabled": this.disabled } }, h("gxg-label", { noMargin: true, class: "label", disabled: this.disabled }, h("input", { ref: (el) => (this.radioInput = el), type: "radio", name: this.name, id: this.RadioId, value: this.value, disabled: this.disabled, onKeyDown: this.handlerOnKeyDown.bind(this) }), h("span", { class: { radiobtn: true, "radiobtn--error": this.error } }), this.label)));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "checked": ["watchHandler"]
+  }; }
+};
+GxgFormRadio.style = formRadioCss;
+
+const tabCss = ":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{height:100%;display:block}:host .container{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;height:100%;box-sizing:border-box;padding:var(--spacing-comp-03)}:host(.not-selected){display:none}:host(.no-padding) .container{padding:0}:host(.large) .container{font-size:var(--font-size-lg)}";
+
+const GxgTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The presence of this attribute removes the tab .container padding
+     */
+    this.noPadding = false;
+    /**
+     * The selected tab
+     */
+    this.isSelected = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        open: this.isSelected,
+        "not-selected": !this.isSelected,
+        "no-padding": this.noPadding,
+        large: state.large,
+      } }, h("div", { class: "container" }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+GxgTab.style = tabCss;
+
+const tabBarCss = ":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{--tabBarMenuHeight:0;--tabBarMenuWidth:0;display:inline-flex;text-align:right;position:relative;display:flex;justify-content:space-between}:host .nav{display:flex;justify-content:space-between;width:100%}:host .tab-bar{list-style-type:none;padding-inline-start:0;display:flex !important;margin-bottom:0;margin-top:0;font-family:var(--font-family-primary);background-color:var(--color-background)}:host .tab-bar__menu{display:flex;align-items:center}:host .tab-bar-menu{border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);height:var(--tabBarMenuHeight);position:absolute;z-index:10;background-color:var(--color-on-primary);right:0;margin:0;padding:0;list-style:none;display:inline-flex;flex-direction:column;overflow:hidden;transition-property:height;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-bar-menu.bottom{bottom:0}:host .tab-bar-menu.right{bottom:0;rotate:90deg;transform-origin:top right;transform:translateX(100%);height:auto !important;width:var(--tabBarMenuHeight)}:host .tab-bar-menu--collapsed{height:0}:host .tab-bar-menu--collapsed.right{width:0}:host(.rtl) .tab-bar-menu{left:0;right:auto}";
+
+const GxgTabBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.parts = {
+      buttonMenu: "button-menu",
+    };
+    this.appendedButtons = 0;
+    /*tab bar menu*/
+    this.tabBarMenuHeight = "auto";
+    this.tabBarMenuWidth = "auto";
+    this.tabBarMenuCollapsed = true;
+    this.lastAddedOrRemovedTabBarButtonWidth = 0;
+    /**
+     * Reading direction
+     */
+    this.rtl = false;
+    this.evaluateMenuButtonsTabIndex = (menuCollapsed) => {
+      if (menuCollapsed) {
+        this.disableTabIndex();
+      }
+      else {
+        this.enableTabIndex();
+      }
+    };
+    this.setFocus = (menuCollapsed) => {
+      if (menuCollapsed) {
+        this.tabBarMenuToggleButton.focus();
+      }
+      else {
+        const menuButtons = this.el.querySelectorAll("[slot=tab-menu]");
+        if (menuButtons.length) {
+          menuButtons[0].focus();
+        }
+      }
+    };
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+    this.enableTabIndex = () => {
+      const allButtons = this.el.querySelectorAll("gxg-tab-button");
+      allButtons.forEach((button) => {
+        button.removeAttribute("tabindex");
+      });
+    };
+    this.disableTabIndex = () => {
+      const menuButtons = this.el.querySelectorAll("[slot=tab-menu]");
+      menuButtons.forEach((button) => {
+        button.setAttribute("tabindex", "-1");
+      });
+    };
+    this.detectClickOutsideTabBarMenu = this.detectClickOutsideTabBarMenu.bind(this);
+  }
+  openMenu(event) {
+    event.stopPropagation();
+    this.tabBarMenuCollapsed = false;
+    document.addEventListener("click", this.detectClickOutsideTabBarMenu);
+  }
+  tabBarMenuCollapsedHandler(menuCollapsed) {
+    this.evaluateMenuButtonsTabIndex(menuCollapsed);
+    this.setFocus(menuCollapsed);
+  }
+  tabActivatedHandler() {
+    this.tabBarMenuCollapsed = true;
+  }
+  PrevOrNextTabHandler(e) {
+    const originTab = this.el.querySelector(`gxg-tab-button[tab='${e.detail["originTab"]}']`);
+    let destinationTab = null;
+    if (e.detail["arrowPressed"] === "ArrowRight") {
+      const nextTabButton = originTab.nextElementSibling;
+      if (nextTabButton) {
+        destinationTab = nextTabButton;
+      }
+    }
+    else if (e.detail["arrowPressed"] === "ArrowLeft") {
+      const prevTabButton = originTab.previousElementSibling;
+      if (prevTabButton) {
+        destinationTab = prevTabButton;
+      }
+    }
+    if (destinationTab) {
+      destinationTab.tabButtonClick();
+    }
+  }
+  appendTabItemsToMenu() {
+    //This function appends tab-buttons into a tab-menu, as long as the tab-buttons are too tight
+    const gxgTabsPosition = this.el.parentElement
+      .position;
+    const buttonHeight = this.el.children.item(0).clientHeight;
+    let sizeReference;
+    if (gxgTabsPosition === "top" || gxgTabsPosition === "bottom") {
+      sizeReference = this.el.parentElement.offsetWidth;
+    }
+    else if (gxgTabsPosition === "right" || gxgTabsPosition === "left") {
+      sizeReference = this.el.parentElement.offsetHeight;
+    }
+    const tabBarWidth = this.tabBar.offsetWidth;
+    if (tabBarWidth + 20 > sizeReference) {
+      const tabButtons = this.el.querySelectorAll("gxg-tab-button[slot='tab-bar']");
+      //get the last item of the nodeList
+      const lastTabButton = tabButtons[tabButtons.length - 1];
+      if (lastTabButton) {
+        this.lastAddedOrRemovedTabBarButtonWidth = lastTabButton.offsetWidth;
+        //add "menu-button" class to button component, in order to stylize the buttons inside the menu differently
+        lastTabButton.classList.add("menu-button");
+        lastTabButton.setAttribute("slot", "tab-menu");
+        this.appendedButtons++;
+      }
+      //}
+    }
+    else if (tabBarWidth + 20 + this.lastAddedOrRemovedTabBarButtonWidth <
+      sizeReference) {
+      const menuButtons = this.el.querySelectorAll("[slot=tab-menu]");
+      const menuFirstButton = menuButtons[0];
+      if (menuFirstButton) {
+        menuFirstButton.classList.remove("menu-button");
+        menuFirstButton.setAttribute("slot", "tab-bar");
+        this.lastAddedOrRemovedTabBarButtonWidth = menuFirstButton.offsetWidth;
+        this.appendedButtons--;
+      }
+    }
+    if (gxgTabsPosition === "right" || gxgTabsPosition === "left") {
+      this.tabBarMenuHeight = this.appendedButtons * buttonHeight + "px";
+    }
+    this.evaluateMenuButtonsTabIndex(this.tabBarMenuCollapsed);
+  }
+  componentWillLoad() {
+    this.attachExportParts();
+  }
+  componentDidLoad() {
+    //Reading Direction
+    const dirHtml = document
+      .getElementsByTagName("html")[0]
+      .getAttribute("dir");
+    const dirBody = document
+      .getElementsByTagName("body")[0]
+      .getAttribute("dir");
+    if (dirHtml === "rtl" || dirBody === "rtl") {
+      this.rtl = true;
+    }
+    const myObserver = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        //get any button space between text and button border
+        this.appendTabItemsToMenu();
+      });
+    });
+    myObserver.observe(this.el.parentElement);
+    //Collapse buttons if they dont't fit in the available space already
+    const numberOfButtons = this.el.querySelectorAll("gxg-tab-button").length;
+    for (let i = 0; i <= numberOfButtons; i++) {
+      this.appendTabItemsToMenu();
+    }
+    //Tabbar menu on bottom
+    const gxgTabsPosition = this.el.parentElement.getAttribute("position");
+    if (gxgTabsPosition === "bottom") {
+      this.tabBarMenuPosition = "bottom";
+    }
+    //Tabbar menu on right
+    if (gxgTabsPosition === "right") {
+      this.tabBarMenuPosition = "right";
+    }
+    this.setIndexToTabButtons();
+  }
+  setIndexToTabButtons() {
+    const tabButtons = this.el.querySelectorAll("gxg-tab-button");
+    tabButtons.forEach((tabButton, index) => {
+      tabButton.setAttribute("data-index", index.toString());
+    });
+  }
+  renderTabBarMenu() {
+    if (this.appendedButtons > 0) {
+      return (h("div", { class: "tab-bar__menu" }, h("gxg-button", { onClick: this.openMenu.bind(this), type: "tertiary", icon: "gemini-tools/show-more-vertical", ref: (el) => (this.tabBarMenuToggleButton = el), part: this.parts.buttonMenu })));
+    }
+  }
+  detectClickOutsideTabBarMenu(event) {
+    const x = event.x;
+    const y = event.y;
+    //card main container coordinates
+    const tabBarMenuClientRect = this.tabBarMenu.getBoundingClientRect();
+    if (x > tabBarMenuClientRect.left &&
+      x < tabBarMenuClientRect.right &&
+      y > tabBarMenuClientRect.top &&
+      y < tabBarMenuClientRect.bottom) ;
+    else {
+      //Click happened outside the menu
+      this.tabBarMenuCollapsed = true;
+    }
+  }
+  componentDidUnload() {
+    document.removeEventListener("click", this.detectClickOutsideTabBarMenu);
+  }
+  render() {
+    return (h(Host, { class: {
+        rtl: this.rtl,
+      }, exportParts: this.exportparts ? this.exportparts : null }, h("nav", { class: {
+        nav: true,
+      } }, h("ul", { class: "tab-bar", ref: (el) => (this.tabBar = el) }, h("slot", { name: "tab-bar" })), this.renderTabBarMenu(), h("ul", { class: {
+        "tab-bar-menu": true,
+        "tab-bar-menu--collapsed": this.tabBarMenuCollapsed,
+        top: this.tabBarMenuPosition === "top",
+        right: this.tabBarMenuPosition === "right",
+        bottom: this.tabBarMenuPosition === "bottom",
+        left: this.tabBarMenuPosition === "left",
+      }, style: {
+        "--tabBarMenuHeight": this.tabBarMenuHeight,
+        "--tabBarMenuWidth": this.tabBarMenuWidth,
+      }, ref: (el) => (this.tabBarMenu = el) }, h("slot", { name: "tab-menu" })))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "tabBarMenuCollapsed": ["tabBarMenuCollapsedHandler"]
+  }; }
+};
+GxgTabBar.style = tabBarCss;
+
+const tabButtonCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:block;align-self:center !important;line-height:0}:host .tab-button{display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-primary);text-transform:uppercase;color:var(--color-on-background);letter-spacing:var(--letter-spacing-regular);padding-top:0;padding-right:var(--spacing-comp-05);padding-bottom:0;padding-left:var(--spacing-comp-05);margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;border:0;width:100%;min-height:var(--spacing-comp-06);position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;transition:box-shadow 0.2s ease-in-out;background:transparent;transition-property:box-shadow;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:focus{outline-style:solid;outline-color:var(--color-primary-enabled);outline-width:var(--border-width-md);outline-offset:-2px}:host .tab-button:after{content:\"\";width:100%;height:var(--spacing-comp-01);left:0;bottom:0;position:absolute;background-color:transparent;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .tab-button:hover{cursor:pointer}:host .tab-button:hover:focus{outline-color:var(--color-primary-hover)}:host .tab-button:hover:after{background-color:var(--color-primary-hover)}:host .tab-button:active:after{background-color:var(--color-primary-active)}:host .tab-button[disabled]{color:var(--color-primary-disabled);pointer-events:none}:host .tab-button[disabled]:after{background-color:var(--gxg-border-color--disabled)}:host .tab-button--selected:after{background-color:var(--color-primary-active)}:host .tab-button--text-icon gxg-icon{margin-right:var(--spacing-comp-02)}:host .tab-button__text{display:inline-block}:host([slot=tab-menu]) .tab-button{padding-left:0;padding-right:0}:host(.menu-button){width:100%;box-sizing:border-box;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host(.menu-button) .tab-button{padding:0 var(--spacing-comp-04)}:host(.menu-button) .tab-button:after{display:none}:host(.menu-button:hover){background:var(--color-secondary)}:host(.large) .tab-button{font-size:var(--font-size-lg)}";
+
+const GxgTabButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabActivated = createEvent(this, "tabActivated", 7);
+    this.PrevOrNextTab = createEvent(this, "PrevOrNextTab", 7);
+    this.parts = {
+      button: "button",
+    };
+    /**
+     * The button label
+     */
+    this.tabLabel = null;
+    /**
+     * The tab id. Must be unique, and match the "tab" value of the correlative "gxg-tab" element
+     */
+    this.tab = null;
+    /**
+     * Provide this attribute to make this button selected by default
+     */
+    this.isSelected = false;
+    /**
+     * Provide this attribute to make this button disabled
+     */
+    this.disabled = false;
+    /**
+     * (Optional) provide an icon to this button
+     */
+    this.icon = null;
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+  }
+  async tabButtonClick() {
+    this.buttonClickHandler();
+    this.tabButton.focus();
+  }
+  isSelectedHandler(newValue) {
+    if (newValue) {
+      this.el.removeAttribute("tabindex");
+    }
+    else {
+      this.el.setAttribute("tabindex", "-1");
+    }
+  }
+  buttonClickHandler() {
+    this.isSelected = true;
+    const index = parseInt(this.el.getAttribute("data-index"), 10);
+    this.tabActivated.emit({
+      tab: this.tab,
+      index: index,
+    });
+  }
+  buttonKeyDownHandler(e) {
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      this.PrevOrNextTab.emit({
+        originTab: this.tab,
+        arrowPressed: e.key,
+      });
+    }
+    else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+    }
+  }
+  printIcon() {
+    if (this.icon !== null) {
+      if (this.disabled) {
+        return h("gxg-icon", { color: "disabled", type: this.icon });
+      }
+      return h("gxg-icon", { type: this.icon });
+    }
+  }
+  componentWillLoad() {
+    this.attachExportParts();
+  }
+  componentDidLoad() {
+    //Set the active tab for this tab-button if this is selected by default
+    if (this.isSelected) {
+      this.tabActivated.emit();
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        large: state.large,
+      }, exportParts: this.exportparts ? this.exportparts : null }, h("li", { class: "tab-item" }, h("button", { disabled: this.disabled, class: {
+        "tab-button": true,
+        "tab-button--selected": this.isSelected === true,
+        "tab-button--text-icon": this.tabLabel !== null && this.icon !== null,
+        large: state.large,
+      }, onClick: this.buttonClickHandler.bind(this), onKeyDown: this.buttonKeyDownHandler.bind(this), ref: (el) => (this.tabButton = el), part: this.parts.button }, this.printIcon(), h("span", { class: "tab-button__text" }, this.tabLabel)), h("slot", null))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "isSelected": ["isSelectedHandler"]
+  }; }
+};
+GxgTabButton.style = tabButtonCss;
+
+const tabsCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:block;height:auto;background:var(--color-background);border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);position:relative}.main-container{height:100%;max-height:100%;display:flex;flex-direction:column;justify-content:space-between}.tabs-container{height:calc(100% - 32px);overflow-y:auto}.tabs-container::-webkit-scrollbar{width:6px;height:6px}.tabs-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.tabs-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.tabs-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.tabs-container .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host([position=left]) .tab-bar-container{transform:rotate(-90deg) translate(-100%, 0);transform-origin:left top;position:absolute;z-index:10}:host([position=left]) .tabs-container{height:100%;width:calc(100% - 32px);margin-left:32px}:host([position=right]) .tab-bar-container{transform:rotate(-90deg) translate(-100%, 0);transform-origin:left top;position:absolute;z-index:10;left:calc(100% - 32px)}:host([position=right]) .tabs-container{height:100%;width:calc(100% - 32px)}";
+
+const GxgTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.position = "top";
+    this.height = "100%";
+    this.maxHeight = "100%";
+    this.minWidth = "200px";
+    /**
+     * The presence of this attribute removes each tab .container padding
+     */
+    this.noPadding = false;
+    this.activeTab = "";
+  }
+  tabActivatedHandler(event) {
+    this.updateActiveChildren(event.target.tab, "gxg-tab-button");
+    this.updateActiveChildren(event.target.tab, "gxg-tab");
+  }
+  componentWillLoad() {
+    this.configureTabs();
+  }
+  updateActiveChildren(activeTab, tagName) {
+    const children = Array.from(this.el.querySelectorAll(tagName));
+    for (const child of children) {
+      child.isSelected = activeTab === child.tab;
+    }
+  }
+  configureTabs() {
+    const tabs = this.el.querySelectorAll("gxg-tab");
+    if (this.noPadding) {
+      tabs.forEach((tab) => {
+        tab.noPadding = true;
+      });
+    }
+  }
+  render() {
+    return (h(Host, { style: {
+        height: this.height,
+        maxHeight: this.maxHeight,
+        minWidth: this.minWidth,
+      } }, h("div", { class: "main-container" }, this.position === "bottom"
+      ? [
+        h("div", { class: "tabs-container" }, h("slot", null)),
+        h("div", { class: "tab-bar-container" }, h("slot", { name: "tab-bar-container" })),
+      ]
+      : [
+        h("div", { class: "tab-bar-container" }, h("slot", { name: "tab-bar-container" })),
+        h("div", { class: "tabs-container" }, h("slot", null)),
+      ])));
+  }
+  get el() { return getElement(this); }
+};
+GxgTabs.style = tabsCss;
+
+export { GxgComboBox as gxg_combo_box, GxgComboBoxItem as gxg_combo_box_item, GxgContainer as gxg_container, GxgFormRadio as gxg_form_radio, GxgTab as gxg_tab, GxgTabBar as gxg_tab_bar, GxgTabButton as gxg_tab_button, GxgTabs as gxg_tabs };