@genexus/genexus-ide-ui 0.0.9

package/dist/esm/gxg-accordion.entry.js

@@ -0,0 +1,122 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4f0a5746.js';
+
+const accordionCss = "/*! 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:block;width:100% !important}:host ::slotted(*:last-child){margin-bottom:0}";
+
+const GxgAccordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The presence of this attribute makes all of the accordion-items disabled and not focusable
+     */
+    this.disabled = false;
+    /**
+     * If this attribute is present, only one accordion-item can be open at the same time
+     */
+    this.singleItemOpen = false;
+    /**
+     * The accordion flavor
+     */
+    this.mode = "classical";
+    /**
+     * The accordion max-width
+     */
+    this.maxWidth = "100%";
+    /**
+     * The presence of this attribues removes the padding (internal spacing) from the accordion items containers. This property only applies for the "classical" or "boxed" modes.
+     */
+    this.noPadding = false;
+    /**
+     * The presence of this attribue adds a border to each accordion item.
+     */
+    this.hasBorder = false;
+  }
+  itemClickedHandler(event) {
+    event.stopPropagation();
+    this.accordions.forEach((accordion) => {
+      const id = accordion.itemId;
+      if (this.singleItemOpen) {
+        if (id === event.detail) {
+          if (accordion.status === "open") {
+            accordion.status = "closed";
+          }
+          else {
+            accordion.status = "open";
+          }
+        }
+        else {
+          accordion.status = "closed";
+        }
+      }
+      else {
+        if (id === event.detail) {
+          if (accordion.status === "open") {
+            accordion.status = "closed";
+          }
+          else {
+            accordion.status = "open";
+          }
+        }
+      }
+    });
+  }
+  itemLoadedHandler() {
+    this.setupAccordions();
+  }
+  componentWillLoad() {
+    this.setupAccordions();
+  }
+  setupAccordions() {
+    this.accordions = Array.from(this.el.querySelectorAll(":scope > gxg-accordion-item"));
+    //Disabled
+    if (this.disabled) {
+      this.accordions.forEach((accordion) => {
+        accordion.status = "closed";
+      });
+    }
+    if (this.singleItemOpen) {
+      /* If "single-item-open" is true, and more than one accordion has the "open" property,
+      show only the first accordion open.*/
+      let numberOfOpenAccordions = 0;
+      this.accordions.forEach((accordion) => {
+        if (accordion.getAttribute("status") ===
+          "open") {
+          numberOfOpenAccordions++;
+        }
+      });
+      if (numberOfOpenAccordions > 1) {
+        let firstOpenAccordionFound = false;
+        this.accordions.forEach((accordion) => {
+          if (accordion.getAttribute("status") === "open") {
+            if (firstOpenAccordionFound) {
+              accordion.setAttribute("status", "closed");
+            }
+            else {
+              firstOpenAccordionFound = true;
+            }
+          }
+        });
+      }
+    }
+    this.accordions.forEach((accordion) => {
+      accordion.setAttribute("mode", this.mode);
+      if (this.noPadding) {
+        accordion.setAttribute("no-padding", "");
+      }
+      if (this.disabled) {
+        accordion.setAttribute("disabled", "disabled");
+      }
+      if (this.hasBorder && this.mode === "classical") {
+        accordion.setAttribute("has-border", "");
+      }
+    });
+  }
+  render() {
+    return (h(Host, { style: {
+        "max-width": this.maxWidth,
+      } }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+GxgAccordion.style = accordionCss;
+
+export { GxgAccordion as gxg_accordion };

package/dist/esm/gxg-alert.entry.js

@@ -0,0 +1,216 @@
+import { r as registerInstance, h, a as getAssetPath, H as Host, g as getElement } from './index-4f0a5746.js';
+
+const alertCss = "/*! 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{position:fixed;bottom:0;z-index:100;transition-property:transform;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host .alert-message{background-color:var(--gray-07);color:var(--color-on-primary);border-width:0;border-top-width:var(--border-width-lg);border-style:solid;border-color:var(--gray-06);padding:var(--spacing-comp-03);display:flex;align-items:flex-start;justify-content:space-between;font-family:var(--font-family-primary);}:host .alert-message--error{border-color:var(--color-error-dark);background-color:var(--color-error-light);color:var(--color-on-secondary)}:host .alert-message--warning{border-color:var(--color-warning-dark);background-color:var(--color-warning-light);color:var(--color-on-secondary)}:host .alert-message--success{border-color:var(--color-success-dark);background-color:var(--color-success-light);color:var(--color-on-secondary)}:host .alert-message__close{display:flex}:host .alert-message--title{margin:0 0 var(--spacing-comp-02) 0;font-size:var(--font-size-xs);text-transform:uppercase}:host .alert-message--icon{margin-inline-end:var(--spacing-comp-02);display:flex}:host .alert-message--container{display:flex;align-items:top}:host .alert-message--description{font-size:var(--font-size-md);margin-top:0;margin-bottom:0;line-height:1.5em}:host([position=end]:not(.rtl)){left:auto !important}:host(:not([active])){transform:translateY(100%) !important}:host([position=center]){left:50% !important;transform:translateX(-50%)}:host(:not([active])[position=center]){transform:translateY(100%) translateX(-50%) !important}:host([position=center].rtl){right:50% !important;transform:translateX(50%)}:host(:not([active])[position=center].rtl){transform:translateY(100%) translateX(50%) !important}:host([position=end].rtl){right:auto !important}";
+
+const GxgAlert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /*********************************
+    PROPERTIES & STATE
+    *********************************/
+    /**
+     * Wether the alert is active (visible) or hidden
+     */
+    this.active = false;
+    /**
+     * The amount of time the alert is visible before hidding under the document
+     */
+    this.activeTime = "regular";
+    /**
+     * The alert position on the X axis
+     */
+    this.position = "start";
+    /**
+     * The alert flavor
+     */
+    this.type = "notice";
+    /**
+     * The presence of this attribute makes the component full-width
+     */
+    this.fullWidth = false;
+    /**
+     * The spacing between the alert, and the left or right side of the document
+     */
+    this.leftRight = "xs";
+    /**
+     * The spacing between the alert and the bottom side of the document
+     */
+    this.bottom = "xs";
+    /**
+     * The alert width
+     */
+    this.width = "350px";
+    /**
+     * The presence of this attribute removes the sound on the 'warning' or 'error' alert
+     */
+    this.silent = false;
+    /**
+     * Reading direction
+     */
+    this.rtl = false;
+  }
+  /*********************************
+  METHODS
+  *********************************/
+  componentDidLoad() {
+    this.el.removeAttribute("hidden");
+    //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;
+    }
+  }
+  iconColor() {
+    if (this.type === "notice")
+      return "negative";
+    if (this.type === "error")
+      return "error";
+    if (this.type === "warning")
+      return "warning";
+    if (this.type === "success")
+      return "success";
+  }
+  closeIconColor() {
+    if (this.type === "notice") {
+      return "negative";
+    }
+    else {
+      return "onbackground";
+    }
+  }
+  printTitle() {
+    if (this.title !== undefined) {
+      return h("h2", { class: "alert-message--title" }, this.title);
+    }
+  }
+  setAlertInactive() {
+    this.active = false;
+    this.el.removeAttribute("role");
+  }
+  validateName(newValue) {
+    //timing
+    let timingValue;
+    switch (this.activeTime) {
+      case "xxslow":
+        timingValue = "10";
+        break;
+      case "xslow":
+        timingValue = "09";
+        break;
+      case "slow":
+        timingValue = "08";
+        break;
+      case "regular":
+        timingValue = "07";
+        break;
+      case "fast":
+        timingValue = "06";
+        break;
+      case "xfast":
+        timingValue = "05";
+        break;
+      case "xxfast":
+        timingValue = "04";
+        break;
+      default:
+        timingValue = "04";
+    }
+    if (newValue === true) {
+      this.el.setAttribute("role", "alert");
+      setTimeout(() => {
+        this.setAlertInactive();
+      }, parseInt(getComputedStyle(document.documentElement).getPropertyValue("--timing-" + timingValue)));
+    }
+  }
+  defineWidth() {
+    if (this.fullWidth) {
+      const lateralSpacingComputedValue = getComputedStyle(document.documentElement).getPropertyValue("--spacing-lay-" + this.leftRight);
+      //remove "px" to multiply, since we want the spacing value from left, and from right.
+      const lateralSpacingComputedValueInt = parseInt(lateralSpacingComputedValue.replace("px", ""), 10) * 2;
+      return "calc(100% - " + lateralSpacingComputedValueInt + "px)";
+    }
+    else {
+      return this.width;
+    }
+  }
+  alertHidden() {
+    if (this.active) {
+      if (!this.silent) {
+        let audio;
+        if (this.type === "warning") {
+          audio = new Audio(getAssetPath("./alert-assets/warning.mp3"));
+        }
+        else if (this.type === "error") {
+          audio = new Audio(getAssetPath("./alert-assets/error.mp3"));
+        }
+        setTimeout(function () {
+          audio.play();
+        }, 100);
+      }
+      return "false";
+    }
+    else {
+      return "true";
+    }
+  }
+  transform(bottomSpacingValue) {
+    if (this.position === "center") {
+      if (this.rtl) {
+        return "translateY(-" + bottomSpacingValue + ") translateX(50%)";
+      }
+      else {
+        return "translateY(-" + bottomSpacingValue + ") translateX(-50%)";
+      }
+    }
+    else {
+      return "translateY(-" + bottomSpacingValue + ")";
+    }
+  }
+  render() {
+    let lateralSpacingValue;
+    if (this.leftRight === "no-space") {
+      lateralSpacingValue = "0";
+    }
+    else {
+      const bodyComputedStyles = getComputedStyle(document.body);
+      lateralSpacingValue = bodyComputedStyles
+        .getPropertyValue("--spacing-lay-" + this.leftRight)
+        .replace(/\s/g, "");
+    }
+    let bottomSpacingValue;
+    if (this.bottom === "no-space") {
+      bottomSpacingValue = "0";
+    }
+    else {
+      const bodyComputedStyles = getComputedStyle(document.body);
+      bottomSpacingValue = bodyComputedStyles
+        .getPropertyValue("--spacing-lay-" + this.bottom)
+        .replace(/\s/g, "");
+    }
+    return (h(Host, { role: "alert", "aria-hidden": this.alertHidden(), hidden: true, class: { rtl: this.rtl }, style: {
+        width: this.defineWidth(),
+        left: lateralSpacingValue,
+        right: lateralSpacingValue,
+        transform: this.transform(bottomSpacingValue),
+      } }, h("div", { class: {
+        "alert-message": true,
+        "alert-message--notice": this.type === "notice",
+        "alert-message--error": this.type === "error",
+        "alert-message--warning": this.type === "warning",
+        "alert-message--success": this.type === "success",
+      } }, h("div", { class: "alert-message--container" }, h("div", { class: "alert-message--icon" }, h("gxg-icon", { color: this.iconColor(), slot: "icon", type: "gemini-tools/" + this.type })), h("div", { class: "alert-message-title-description" }, this.printTitle(), h("p", { class: "alert-message--description" }, h("slot", null)))), h("div", { class: "alert-message-close" }, this.type === "notice" ? (h("gxg-button", { type: "tertiary", icon: "gemini-tools/close", onClick: this.setAlertInactive.bind(this), negative: true })) : (h("gxg-button", { type: "tertiary", icon: "gemini-tools/close", onClick: this.setAlertInactive.bind(this), "always-black": true }))))));
+  }
+  static get assetsDirs() { return ["alert-assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "active": ["validateName"]
+  }; }
+};
+GxgAlert.style = alertCss;
+
+export { GxgAlert as gxg_alert };

package/dist/esm/gxg-box.entry.js

@@ -0,0 +1,52 @@
+import { r as registerInstance, h, H as Host } from './index-4f0a5746.js';
+
+const boxCss = "/*! 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:block;background:var(--color-on-primary);padding:var(--spacing-comp-02);overflow:hidden;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;}:host::-webkit-scrollbar{width:6px;height:6px}:host::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host([background=white]){background:var(--color-background)}:host([background=gray-01]){background:var(--gray-01)}:host([background=gray-02]){background:var(--gray-02)}:host(.border){border-style:var(--border-style-regular);border-width:var(--border-width-sm);border-color:var(--gray-03)}:host([padding=\"0\"]){padding:0}:host([padding=xs]){padding:var(--spacing-comp-01)}:host([padding=s]){padding:var(--spacing-comp-02)}:host([padding=m]){padding:var(--spacing-comp-03)}:host([padding=l]){padding:var(--spacing-comp-04)}:host([padding=xl]){padding:var(--spacing-comp-05)}:host([padding=xxl]){padding:var(--spacing-comp-06)}:host([padding=xxxl]){padding:var(--spacing-comp-07)}";
+
+const GxgBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /*********************************
+    PROPERTIES & STATE
+    *********************************/
+    /**
+     * The background color
+     */
+    this.background = "white";
+    /**
+     * Wether the box has border or not
+     */
+    this.border = true;
+    /**
+     * The box padding
+     */
+    this.padding = "xs";
+    /**
+     * The component min. height
+     */
+    this.minHeight = "auto";
+    /**
+     * The component  height
+     */
+    this.height = "auto";
+    /**
+     * The component max. width
+     */
+    this.maxWidth = "100%";
+  }
+  /*********************************
+  METHODS
+  *********************************/
+  render() {
+    return (h(Host, { role: "article", class: {
+        card: true,
+        border: this.border,
+      }, style: {
+        maxWidth: this.maxWidth,
+        minHeight: this.minHeight,
+        height: this.height,
+      } }, h("slot", null)));
+  }
+};
+GxgBox.style = boxCss;
+
+export { GxgBox as gxg_box };

package/dist/esm/gxg-breadcrumb.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+
+const breadcrumbCss = ":host{display:inline-flex;align-items:center}:host .container{display:flex;font-family:var(--font-family-primary);font-size:var(--font-size-sm);background-color:var(--gray-01);height:var(--spacing-comp-05);border-radius:var(--border-radius-lg);color:var(--color-on-secondary);align-items:center;justify-content:center;padding-left:var(--spacing-comp-02);padding-right:var(--spacing-comp-02);cursor:pointer}:host .container:hover{background-color:var(--gray-02)}:host .container .custom-icon{margin-right:var(--spacing-comp-01)}:host(:last-child) .arrow-icon{display:none}";
+
+const GxgBreadcrumb = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.breadcrumbClicked = createEvent(this, "breadcrumbClicked", 7);
+  }
+  breadcrumbClickedFunc() {
+    parseInt(this.el.getAttribute("data-index"), 10);
+    this.breadcrumbClicked.emit({
+      id: this.id,
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: { container: true }, onClick: () => this.breadcrumbClickedFunc() }, this.icon !== undefined ? (h("gxg-icon", { class: { "custom-icon": true }, type: this.icon, size: "regular", color: "auto" })) : null, h("slot", null)), h("gxg-icon", { class: { "arrow-icon": true }, type: "navigation/chevron-right" })));
+  }
+  get el() { return getElement(this); }
+};
+GxgBreadcrumb.style = breadcrumbCss;
+
+export { GxgBreadcrumb as gxg_breadcrumb };

package/dist/esm/gxg-breadcrumbs.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4f0a5746.js';
+
+const breadcrumbsCss = ":host{display:flex}";
+
+const GxgBreadcrumbs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    this.setIndexToBreadcrumb();
+  }
+  setIndexToBreadcrumb() {
+    const breadcrumbs = this.el.querySelectorAll("gxg-breadcrumb");
+    breadcrumbs.forEach((breadcrumb, index) => {
+      breadcrumb.setAttribute("data-index", index.toString());
+    });
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+GxgBreadcrumbs.style = breadcrumbsCss;
+
+export { GxgBreadcrumbs as gxg_breadcrumbs };

package/dist/esm/gxg-button-group.entry.js

@@ -0,0 +1,149 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { s as state } from './store-75f5d491.js';
+
+const buttonGroupCss = "/*! 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(.button-group){display:inline-block;line-height:0;outline:none}:host(.button-group) .button-group-container{font-size:0;position:relative}:host(.button-group) ::slotted(button){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;background:var(--color-primary-enabled);border:0;box-shadow:inset 0px 0px 0px 1px transparent;border-radius:var(--border-radius-xs);display:inline-flex;align-items:center;justify-content:center;padding-top:2.5px;padding-right:var(--spacing-comp-03);padding-bottom:2.5px;padding-left:var(--spacing-comp-03);line-height:var(--line-height-regular);transition:background var(--ui-animaton-speed) ease, color var(--ui-animaton-speed) ease, box-shadow var(--ui-animaton-speed) ease;color:var(--color-on-primary);border-radius:0;background-color:var(--gray-01);color:var(--color-primary);border-right:1px solid var(--gray-02);padding-left:var(--spacing-comp-03);padding-right:var(--spacing-comp-03);height:20px}:host(.button-group) ::slotted(button:first-child){border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md)}:host(.button-group) ::slotted(button:last-child){border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md)}:host(.button-group) ::slotted(button:hover){cursor:pointer;color:var(--color-on-primary);background:var(--color-primary-hover)}:host(.button-group) ::slotted(button:focus){outline:none}:host(.button-group) ::slotted(button[data-active]){color:var(--color-on-primary);background-color:var(--color-primary-active);border-right-color:var(--color-primary-active)}:host(.button-group) .disabled-layer{position:absolute;width:100%;height:100%;cursor:not-allowed;z-index:10}:host(.button-group:not([disabled])) ::slotted(button:focus){outline:none;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.rtl) ::slotted(button:last-child){border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md);border-top-right-radius:0;border-bottom-right-radius:0}:host(.rtl) ::slotted(button:first-child){border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md);border-top-left-radius:0;border-bottom-left-radius:0}:host(.rtl) ::slotted(button){border-left:1px solid var(--gray-02);border-right:0}:host(.rtl) ::slotted(button:last-child){border-left:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([outlined]) ::slotted(button){background:transparent;border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-color:var(--color-primary-active)}:host([outlined]) ::slotted(button:not(:last-child)){border-right:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([outlined][disabled]) ::slotted(button){border-color:var(--color-primary-disabled);color:var(--color-primary-disabled);background-color:transparent}:host([title-alignment=center]){}:host([title-alignment=center]) .button-group-header-title{justify-content:center}:host([title-alignment=right]){}:host([title-alignment=right]) .button-group-header-title{justify-content:flex-end}:host([disabled]) ::slotted(button),:host([disabled]) ::slotted(button[data-active]){background-color:var(--color-primary-disabled);color:var(--color-on-disabled)}:host([disabled]) ::slotted(button){border-right-color:var(--color-on-disabled)}:host([full-width]){display:block;width:100%}:host([full-width]) .button-group-container{display:flex}:host([full-width]) .button-group-container ::slotted(*){flex:1 1 auto !important}:host(.button-group.large) .button-group-header-title{font-size:var(--font-size-lg)}:host(.button-group.large) ::slotted(button){height:var(--spacing-comp-05);font-size:var(--font-size-lg) !important}";
+
+const GxgButtonGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+    The button group title alignment
+    */
+    this.titleAlignment = "left";
+    /**
+    Wether the button group is disabled or not
+    */
+    this.disabled = false;
+    /**
+     * The presence of this attribute makes the component full-width
+     */
+    this.fullWidth = false;
+    /**
+     * The presence of this attribute makes the button group outlined
+     */
+    this.outlined = false;
+    /**
+    The value of the current selected button
+    */
+    this.value = "";
+    /**
+     * Reading direction
+     */
+    this.rtl = false;
+  }
+  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;
+    }
+  }
+  /*********************************
+  METHODS
+  *********************************/
+  componentWillLoad() {
+    if (!this.disabled) {
+      this.setInitialActiveValue();
+    }
+    if (this.disabled) {
+      this.value = null;
+    }
+    //if disabled, set buttons tabindex equal to "-1"
+    if (this.disabled) {
+      const buttonsHtmlCollection = this.el.children;
+      Array.from(buttonsHtmlCollection).forEach(function (button) {
+        button.setAttribute("tab-index", "-1");
+        button.style.pointerEvents = "none";
+      });
+    }
+  }
+  setActiveButton(event) {
+    const buttonsHtmlCollection = this.el.children;
+    Array.from(buttonsHtmlCollection).forEach(function (button) {
+      button.removeAttribute("data-active");
+      button.setAttribute("aria-pressed", "false");
+    });
+    event.target.setAttribute("data-active", "");
+    event.target.setAttribute("aria-pressed", "true");
+    this.value = event.target.value;
+  }
+  setInitialActiveValue() {
+    let buttonValue = "";
+    //get id of all buttons into array
+    const buttonsHtmlCollection = this.el.children;
+    const buttonsIdsArray = [];
+    Array.from(buttonsHtmlCollection).forEach((button) => {
+      const b = button;
+      b.setAttribute("tabindex", "0");
+      if (b.getAttribute("id") !== "") {
+        buttonsIdsArray.push(b.getAttribute("id"));
+      }
+    });
+    //if defaultSelectedBtnId is equal to any id of the array, set that button as active
+    if (this.defaultSelectedBtnId === undefined ||
+      this.defaultSelectedBtnId.replace(/\s/g, "") === "" ||
+      !buttonsIdsArray.includes(this.defaultSelectedBtnId)) {
+      // defaultSelectedBtnId is not part of any button id
+      //By default, set the first button as the active button
+      this.el.children[0].setAttribute("data-active", "");
+      buttonValue = this.el.children[0].getAttribute("value");
+      this.el.children[0].setAttribute("aria-pressed", "true");
+    }
+    else {
+      if (buttonsIdsArray.includes(this.defaultSelectedBtnId)) {
+        Array.from(buttonsHtmlCollection).forEach((button) => {
+          const b = button;
+          if (b.id == this.defaultSelectedBtnId) {
+            //set the value to the active button value
+            buttonValue = this.defaultSelectedBtnId = b.getAttribute("value");
+            b.setAttribute("data-active", "");
+            b.setAttribute("aria-pressed", "true");
+          }
+        });
+      }
+    }
+    this.value = buttonValue;
+  }
+  detectFocus(event) {
+    if (this.el === document.activeElement) {
+      const buttonsHtmlCollection = this.el.children;
+      const n = buttonsHtmlCollection.length;
+      if (event.keyCode === 9 && event.shiftKey) {
+        //set focus to the last button
+        buttonsHtmlCollection.item(n).focus();
+      }
+      else if (event.keyCode === 9) {
+        //set focus to the first button
+        buttonsHtmlCollection.item(0).focus();
+      }
+    }
+  }
+  tabIndex() {
+    if (this.disabled) {
+      return "-1";
+    }
+    else {
+      return "0";
+    }
+  }
+  render() {
+    let header = null;
+    if (this.buttonGroupTitle !== undefined) {
+      header = (h("header", { class: "button-group-header" }, h("gxg-label", { class: "button-group-header-label" }, this.buttonGroupTitle)));
+    }
+    return (h(Host, { tabindex: this.tabIndex(), role: "group", "aria-label": this.buttonGroupTitle, class: {
+        "button-group": true,
+        rtl: this.rtl,
+        large: state.large,
+      }, value: this.value, "title-alignment": this.titleAlignment, onKeyUp: this.detectFocus.bind(this) }, header, h("div", { class: "button-group-container", onClick: this.setActiveButton.bind(this) }, this.disabled ? h("div", { class: "disabled-layer" }) : null, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+GxgButtonGroup.style = buttonGroupCss;
+
+export { GxgButtonGroup as gxg_button_group };