@genexus/genexus-ide-ui 0.0.9

package/dist/collection/pages/assets/common.js

@@ -0,0 +1,174 @@
+const toggleDarkBtn = document.getElementById("toggle-dark-btn");
+const toggleDirBtn = document.getElementById("toggle-dir-btn");
+const showPartsBtn = document.getElementById("show-parts-btn");
+const validateBtn = document.getElementById("validate-btn");
+const responsiveMobileBtn = document.getElementById("responsive-mobile-btn");
+const responsiveTabletBtn = document.getElementById("responsive-tablet-btn");
+const responsiveDesktopBtn = document.getElementById("responsive-desktop-btn");
+const containerComponent = document.getElementById("container-component");
+/* Toggle Dark */
+toggleDarkBtn.addEventListener("click", function () {
+  html.classList.toggle("dark");
+});
+
+/* Toggle Dir */
+toggleDirBtn.addEventListener("click", function () {
+  const dir = html.getAttribute("dir");
+  if (dir === "ltr") {
+    html.setAttribute("dir", "rtl");
+  } else {
+    html.setAttribute("dir", "ltr");
+  }
+});
+
+/* Show Parts */
+showPartsBtn.addEventListener("click", function () {
+  /* Parts that are discoverable (for example gxg-combo-item, is not visible until you open the gxg-combo)*/
+  const hiddenGxgComponents = [
+    "GXG-COMBO-BOX-ITEM",
+    "GXG-CONTEXTUAL-MENU",
+    "GXG-CONTEXTUAL-MENU-ITEM",
+    "GXG-FILTER-ITEM",
+    "GXG-LIST-BOX-ITEM",
+    "GXG-MODAL",
+    "GXG-TREE-ITEM"
+  ];
+  if (gxConsole) {
+    const parts = window.getElementSelectorParts(gxIdeComponent);
+    if (parts.length) {
+      /* Clear*/
+      gxConsole.innerHTML = "";
+      let currentSelectedPart = undefined;
+      parts.forEach(part => {
+        /* part div*/
+        const partSelector = document.createElement("div");
+        partSelector.classList.add("part-selector");
+        partSelector.innerText = part;
+        partSelector.setAttribute("tabindex", "1");
+        /* part span (circle for indicating additional information)*/
+        const partCircle = document.createElement("span");
+        partCircle.classList.add("circle");
+        partSelector.prepend(partCircle);
+        /* get part*/
+        currentSelectedPart = window.querySelectorPart(`${part}`);
+        if (!currentSelectedPart) {
+          /* This part is not currently rendered by the component, probably because some property is not present*/
+          partSelector.classList.add("part-selector--hidden");
+        } else {
+          currentSelectedPartNodeName = currentSelectedPart.nodeName;
+          /* add class to indicate if this part belongs to a component that is not visible at a glance*/
+          if (hiddenGxgComponents.includes(currentSelectedPartNodeName)) {
+            partSelector.classList.add("part-selector--discoverable");
+          }
+        }
+        partSelector.addEventListener("click", () => {
+          if (currentSelectedPart) {
+            /* Remove current selected part style*/
+            currentSelectedPart.style.outline = "none";
+          }
+          currentSelectedPart = window.querySelectorPart(`${part}`);
+          currentSelectedPart.style.outline = `3px solid var(--color-warning-dark)`;
+          currentSelectedPart.style.outlineOffset = "-2px";
+        });
+        /* append*/
+        gxConsole.appendChild(partSelector);
+      });
+    }
+  }
+});
+
+/* Test Validation */
+if (validateBtn) {
+  validateBtn.addEventListener("click", async function () {
+    await gxIdeComponent.validate();
+  });
+}
+
+/* Sidebar buttons */
+const sidebarButtons = document.querySelectorAll("gxg-button");
+if (sidebarButtons.length) {
+  /* make all buttons full width becayse it looks better */
+  sidebarButtons.forEach(gxgButton => {
+    gxgButton.setAttribute("fit", true);
+  });
+}
+
+/* Helpers */
+window.getElementSelectorParts = element => {
+  const queries = [];
+  const elementParts = element.shadowRoot?.querySelectorAll(`[part]`);
+  const elementExportParts =
+    element.shadowRoot?.querySelectorAll(`[exportparts]`);
+
+  elementParts?.forEach(el => {
+    queries.push(
+      `${element.tagName.toLowerCase()}::part(${el.getAttribute("part")})`
+    );
+  });
+  elementExportParts?.forEach(el => {
+    queries.push(
+      ...[
+        ...el.getAttribute("exportparts").matchAll(/(?:[\w-]+:)?([\w-]+)/g)
+      ].map(item => `${element.tagName.toLowerCase()}::part(${item[1]})`)
+    );
+  });
+
+  return queries.sort();
+};
+
+window.querySelectorPart = selector => {
+  const querySelectorDeep = (element, parts) => {
+    const shadow = element.shadowRoot;
+    const partList = parts.split(" ");
+
+    const partElement = shadow.querySelector(
+      partList.map(partName => `[part~="${partName}"]`).join("")
+    );
+    if (partElement) {
+      return partElement;
+    }
+
+    const exportPartElement = shadow.querySelector(
+      partList.map(partName => `[exportparts*="${partName}"]`).join("")
+    );
+    if (exportPartElement) {
+      const exportPartList = [];
+      const exportparts = exportPartElement.getAttribute("exportparts");
+
+      partList.forEach(partItem => {
+        const exportPartName = exportparts.match(
+          `(?:([\\w-]+):)?(${partItem})`
+        )[1];
+        if (exportPartName) {
+          exportPartList.push(exportPartName);
+        }
+      });
+
+      if (partList.length === exportPartList.length) {
+        return querySelectorDeep(exportPartElement, exportPartList.join(" "));
+      }
+    }
+
+    return null;
+  };
+
+  const selectorItems = selector.match("(.*)::part\\(([^)]+)\\)");
+  const entity = selectorItems[1];
+  const partName = selectorItems[2];
+
+  return querySelectorDeep(document.querySelector(entity), partName);
+};
+
+/* Responsive Buttons */
+responsiveMobileBtn.addEventListener("click", () => {
+  containerComponent.classList.remove("desktop");
+  containerComponent.classList.add("mobile");
+});
+responsiveTabletBtn.addEventListener("click", () => {
+  containerComponent.classList.remove("desktop");
+  containerComponent.classList.remove("mobile");
+});
+responsiveDesktopBtn.addEventListener("click", () => {
+  containerComponent.classList.remove("mobile");
+  containerComponent.classList.add("desktop");
+});

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return ((first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : ""));
+}

package/dist/components/_commonjsHelpers.js

@@ -0,0 +1,19 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+export { createCommonjsModule as c, getDefaultExportFromCjs as g };

package/dist/components/accordion.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const accordionCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--chevron:url('data:image/svg+xml,<svg width=\"14\" height=\"8\" viewBox=\"0 0 14 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.645 0.5L7 4.83019L12.355 0.5L14 1.83962L7 7.5L0 1.83962L1.645 0.5Z\" fill=\"%23000\"/></svg>');display:grid;grid-template-rows:min-content min-content;width:100%;height:100%;text-align:start}.header{display:grid;grid-template-columns:1fr min-content;grid-template-rows:1fr;text-align:start;cursor:pointer}.chevron{align-self:center;width:14px;height:8px;-webkit-mask:var(--chevron);background-color:#000;transition:transform 250ms}.chevron--expanded{transform:rotate(180deg)}.expandable{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows 250ms}.expanded{visibility:visible;grid-template-rows:1fr}.expandable ::slotted(*){height:100%;overflow:hidden}";
+
+const EXPANDABLE = "expandable";
+const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.expandedChange = createEvent(this, "expandedChange", 7);
+    /**
+     * The description of the entity.
+     */
+    this.accessibleDescription = "";
+    /**
+     * The name of the entity.
+     */
+    this.accessibleName = "";
+    /**
+     * `true` if the accordion is expanded.
+     */
+    this.expanded = false;
+    this.toggleExpanded = () => {
+      const newExpandedValue = !this.expanded;
+      this.expanded = newExpandedValue;
+      this.expandedChange.emit(newExpandedValue);
+    };
+  }
+  render() {
+    return (h(Host, null, h("button", { "aria-controls": EXPANDABLE, "aria-expanded": this.expanded.toString(), "aria-label": this.accessibleName, "aria-description": this.accessibleDescription || undefined, class: "header", part: "accordion__header", type: "button", onClick: this.toggleExpanded }, h("slot", { name: "header" }), h("div", { "aria-hidden": "true", class: { chevron: true, "chevron--expanded": this.expanded }, part: "accordion__chevron" })), h("div", { id: EXPANDABLE, class: { expandable: true, expanded: this.expanded }, part: "accordion__expandable" }, h("slot", { name: "content" }))));
+  }
+  static get style() { return accordionCss; }
+}, [1, "ch-accordion", {
+    "accessibleDescription": [1, "accessible-description"],
+    "accessibleName": [1, "accessible-name"],
+    "expanded": [1028]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+  } });
+}
+
+export { Accordion as A, defineCustomElement as d };

package/dist/components/button-group.js

@@ -0,0 +1,185 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+import { d as defineCustomElement$2 } from './gxg-label2.js';
+import { d as defineCustomElement$1 } from './tooltip.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+    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 this; }
+  static get style() { return buttonGroupCss; }
+}, [1, "gxg-button-group", {
+    "buttonGroupTitle": [1, "button-group-title"],
+    "titleAlignment": [513, "title-alignment"],
+    "defaultSelectedBtnId": [1, "default-selected-btn-id"],
+    "disabled": [516],
+    "fullWidth": [516, "full-width"],
+    "outlined": [516],
+    "value": [32],
+    "rtl": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-button-group", "gxg-label", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-button-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgButtonGroup);
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GxgButtonGroup as G, defineCustomElement as d };