@genexus/genexus-ide-ui 0.0.9

package/dist/components/store.js

@@ -0,0 +1,192 @@
+import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(defaultState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        const unReset = on('reset', () => cb(defaultState[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const { state } = createStore({
+    large: document.documentElement.classList.contains("gxg-large"),
+    rtl: document.documentElement.getAttribute("dir") === "rtl",
+});
+
+export { state as s };

package/dist/components/tab-bar.js

@@ -0,0 +1,262 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { e as exportParts } from './export-parts.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './button.js';
+import { d as defineCustomElement$1 } from './icon2.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get watchers() { return {
+    "tabBarMenuCollapsed": ["tabBarMenuCollapsedHandler"]
+  }; }
+  static get style() { return tabBarCss; }
+}, [1, "gxg-tab-bar", {
+    "appendedButtons": [32],
+    "tabBarMenuHeight": [32],
+    "tabBarMenuWidth": [32],
+    "tabBarMenuCollapsed": [32],
+    "tabBarMenuPosition": [32],
+    "rtl": [32]
+  }, [[0, "tabActivated", "tabActivatedHandler"], [0, "PrevOrNextTab", "PrevOrNextTabHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tab-bar", "ch-icon", "gxg-button", "gxg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tab-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTabBar);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GxgTabBar as G, defineCustomElement as d };

package/dist/components/tab-button.js

@@ -0,0 +1,141 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+import { e as exportParts } from './export-parts.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './icon2.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get watchers() { return {
+    "isSelected": ["isSelectedHandler"]
+  }; }
+  static get style() { return tabButtonCss; }
+}, [17, "gxg-tab-button", {
+    "tabLabel": [1, "tab-label"],
+    "tab": [513],
+    "isSelected": [4, "is-selected"],
+    "disabled": [4],
+    "icon": [1],
+    "tabButtonClick": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tab-button", "ch-icon", "gxg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tab-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTabButton);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GxgTabButton as G, defineCustomElement as d };