@genexus/genexus-ide-ui 0.0.9

package/dist/components/gxg-drop-down.js

@@ -0,0 +1,253 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './icon2.js';
+import { d as defineCustomElement$3 } from './gxg-label2.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const dropDownCss = "/*! 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}:host .main-container{position:relative}:host .label{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);margin-bottom:var(--spacing-comp-01);display:inline-block}:host .select-container{background-color:var(--color-background);border-radius:var(--border-radius-sm);border-width:var(--border-width-sm);border-style:solid;border-color:var(--gray-02);height:20px;font-family:var(--font-family-primary);font-size:var(--font-size-sm);display:flex;align-items:center;padding:0 0 0 var(--spacing-comp-01);position:relative;cursor:pointer;color:var(--color-on-background);overflow:hidden;box-sizing:border-box}:host .select-container .icon{margin-left:-4px}:host .select-container.nothing-selected{color:var(--gray-04)}:host .select-container:focus{outline-style:solid;outline-color:var(--color-primary-enabled);outline-width:var(--border-width-md);outline-offset:-2px}:host .content-container{border-width:var(--border-width-sm);border-style:solid;border-color:var(--gray-02);border-top-width:0;padding:var(--spacing-comp-01);font-family:var(--font-family-primary);font-size:var(--font-size-sm);border-bottom-left-radius:var(--border-radius-sm);border-bottom-right-radius:var(--border-radius-sm);color:var(--color-on-background);overflow-y:auto;position:fixed;width:inherit;box-sizing:border-box;z-index:999;background-color:var(--color-background);display:none;}:host .content-container::-webkit-scrollbar{width:6px;height:6px}:host .content-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .content-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .content-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .content-container .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host .content-container--show{display:block}:host .arrow-down-button{margin-left:auto}:host(.position-top) .content-container{transform:translateY(calc(-100% - 20px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-sm);border-top-right-radius:var(--border-radius-sm);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.large) label{font-size:var(--font-size-lg)}:host(.large) .select-container{font-size:var(--font-size-lg);height:var(--spacing-comp-05)}:host(.large) .select-container:before{top:2px}:host(.large) .select-container:after{top:14px}:host(.large) .content-container{font-size:var(--font-size-lg)}:host(.large.above) .content-container{transform:translateY(calc(-100% - 24px))}";
+
+const GxgDropDown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.opened = createEvent(this, "opened", 7);
+    this.closed = createEvent(this, "closed", 7);
+    /**
+     * The dropdown width
+     */
+    this.width = "240px";
+    /**
+     * The dropdown min-width
+     */
+    this.minWidth = "0";
+    /**
+     * The codropdownmbo max-width
+     */
+    this.maxWidth = "none";
+    /**
+     * the dropdown height
+     */
+    this.dropDownHeight = "auto";
+    /**
+     * the dropdown label (optional)
+     */
+    this.label = undefined;
+    /**
+     * the dropdown icon (optional)
+     */
+    this.icon = "";
+    /**
+     * Displays the dropdown content
+     */
+    this.showContent = false;
+    /**
+     * The container 'items container' position
+     */
+    this.position = "bottom";
+    this.initialButtonText = "";
+    this.detectClickOutsideDropDown = this.detectClickOutsideDropDownFunc.bind(this);
+    this.detectMouseScroll = this.detectMouseScrollFunc.bind(this);
+    this.myObserver = null;
+  }
+  componentDidUpdate() {
+    const contentContainerIsOverflowing = this.contentContainerOverflows();
+    if (contentContainerIsOverflowing) {
+      this.el.classList.add("position-top");
+      this.el.classList.remove("position-bottom");
+    }
+    else {
+      this.el.classList.add("position-bottom");
+      this.el.classList.remove("position-top");
+    }
+  }
+  componentWillLoad() {
+    const slotButton = this.el.querySelector("[slot=button]");
+    if (slotButton === null) {
+      this.initialButtonText = "Select item";
+    }
+  }
+  componentDidLoad() {
+    this.resizeObserver();
+  }
+  toggleContent() {
+    if (this.showContent === true) {
+      this.showContent = false;
+    }
+    else {
+      this.showContent = true;
+    }
+  }
+  detectClickOutsideDropDownFunc(event) {
+    const dropDownContentContainer = this.el.shadowRoot.querySelector(".select-container");
+    const contentContainer = this.el.shadowRoot.querySelector(".content-container");
+    const x = event.x;
+    const y = event.y;
+    //Contextual menu coordinates
+    const dropDownContentContainerArea = dropDownContentContainer.getBoundingClientRect();
+    const contentContainerArea = contentContainer.getBoundingClientRect();
+    if ((x > dropDownContentContainerArea.left &&
+      x < dropDownContentContainerArea.right &&
+      y > dropDownContentContainerArea.top &&
+      y < dropDownContentContainerArea.bottom) ||
+      (x > contentContainerArea.left &&
+        x < contentContainerArea.right &&
+        y > contentContainerArea.top &&
+        y < contentContainerArea.bottom)) ;
+    else {
+      this.showContent = false;
+      //Click happened outside the dropdown
+    }
+  }
+  detectMouseScrollFunc(e) {
+    if (e.target === document) {
+      this.showContent = false;
+    }
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.detectClickOutsideDropDown, true);
+    document.removeEventListener("scroll", this.detectMouseScroll, true);
+    this.myObserver.unobserve(document.body);
+  }
+  watchHandler(newValue) {
+    if (newValue === true) {
+      this.opened.emit(true);
+      document.addEventListener("click", this.detectClickOutsideDropDown, true);
+      document.addEventListener("scroll", this.detectMouseScroll, true);
+      //Reposition .content-container, since it has fixed position
+      this.repositionContentContainer();
+    }
+    else {
+      this.closed.emit(true);
+      document.removeEventListener("click", this.detectClickOutsideDropDown, true);
+      document.removeEventListener("scroll", this.detectMouseScroll, true);
+    }
+  }
+  onKeyDown(e) {
+    if (e.key === "ArrowDown") {
+      this.showContent = true;
+    }
+    else if (e.key === "Enter") {
+      this.toggleContent();
+    }
+    else if (e.key === "Escape") {
+      this.showContent = false;
+    }
+    else if (e.key === "Tab") {
+      this.showContent = false;
+    }
+  }
+  onKeyDownGxgButtonArrowDown(e) {
+    if (e.key === "Enter") {
+      this.toggleContent();
+    }
+  }
+  resizeObserver() {
+    this.myObserver = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        this.repositionContentContainer();
+      });
+    });
+    this.myObserver.observe(document.body);
+    this.myObserver.observe(this.el);
+  }
+  repositionContentContainer() {
+    //redefine .main-container width
+    const gxgDropDownWidth = this.el.clientWidth;
+    this.contentContainer.style.width = gxgDropDownWidth + "px";
+    //redefine .content-container "top" value
+    const gxgDropDownCoordinates = this.el.getBoundingClientRect();
+    const gxgDropDownY = gxgDropDownCoordinates.y;
+    const gxgDropDownHeight = gxgDropDownCoordinates.height;
+    this.contentContainer.style.top = gxgDropDownY + gxgDropDownHeight + "px";
+  }
+  contentContainerOverflows() {
+    const viewportHeight = window.innerHeight;
+    const dropdownBottom = this.el.getBoundingClientRect().bottom;
+    const contentContainerHeight = this.contentContainer.clientHeight;
+    const result = dropdownBottom + contentContainerHeight;
+    const itOverflows = result > viewportHeight ;
+    return itOverflows;
+  }
+  render() {
+    return (h(Host, { class: {
+        large: state.large,
+      }, style: {
+        width: this.width,
+        minWidth: this.minWidth,
+        maxWidth: this.maxWidth,
+      }, onClick: this.toggleContent.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { class: { "main-container": true }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { class: { label: true } }, this.label)) : null, h("div", { tabIndex: 0, class: {
+        "select-container": true,
+        "nothing-selected": this.initialButtonText === "Select item",
+      } }, this.icon !== "" ? (h("gxg-icon", { class: "icon", type: this.icon, color: "auto", size: "small" })) : null, this.initialButtonText !== "" ? this.initialButtonText : null, h("slot", { name: "button" }), h("gxg-button", { class: { "arrow-down-button": true }, icon: "navigation/arrow-down", type: "tertiary", onKeyDown: this.onKeyDownGxgButtonArrowDown.bind(this), tabindex: "-1" })), h("div", { class: {
+        "content-container": true,
+        "content-container--show": this.showContent,
+      }, style: {
+        height: this.dropDownHeight,
+      }, ref: (el) => (this.contentContainer = el) }, h("slot", null)))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return this; }
+  static get watchers() { return {
+    "showContent": ["watchHandler"]
+  }; }
+  static get style() { return dropDownCss; }
+}, [17, "gxg-drop-down", {
+    "width": [1],
+    "minWidth": [1, "min-width"],
+    "maxWidth": [1, "max-width"],
+    "dropDownHeight": [1, "drop-down-height"],
+    "label": [1],
+    "icon": [1],
+    "showContent": [4, "show-content"],
+    "position": [1],
+    "initialButtonText": [32],
+    "detectClickOutsideDropDown": [32],
+    "detectMouseScroll": [32],
+    "myObserver": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-drop-down", "ch-icon", "gxg-button", "gxg-icon", "gxg-label", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-drop-down":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgDropDown$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgDropDown = GxgDropDown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgDropDown, defineCustomElement };

package/dist/components/gxg-filter-item.js

@@ -0,0 +1,70 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon2.js';
+
+const gxgFilterItemCss = ":host{display:block;font-family:var(--font-family-primary);font-size:var(--font-size-sm);padding:0 var(--spacing-comp-01) 0 var(--spacing-comp-01);cursor:pointer;display:flex;align-items:center;height:var(--spacing-comp-05);opacity:1;transition:all 0.25s;overflow:hidden;color:var(--color-on-background)}:host gxg-icon{margin-inline-end:var(--spacing-comp-01)}:host .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 24px)}:host(:hover){background-color:var(--color-secondary-enabled)}:host(.opacity-zero){opacity:0}:host(.height-zero){height:0}:host(.exact-match){color:var(--color-success-dark)}:host(.exact-match:hover){color:var(--color-success-dark);background-color:var(--color-success-light)}:host(:focus){outline:none;outline-color:var(--color-primary-active);box-shadow:var(--box-shadow-values) var(--color-primary-active)}";
+
+const GxgFilterItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.itemClickedEvent = createEvent(this, "itemClickedEvent", 7);
+    /**
+     * The item-id (required if you want to know that this item was clicked)
+     */
+    this.itemId = undefined;
+    /**
+     * The type (optional)
+     */
+    this.type = undefined;
+    /**
+     * Any icon that belongs to Gemini icon library: https://gx-gemini.netlify.app/?path=/story/icons
+     */
+    this.icon = undefined;
+  }
+  itemClicked() {
+    this.itemClickedEvent.emit({
+      "item-id": this.itemId,
+      "item-text": this.el.innerHTML,
+      "item-type": this.type,
+    });
+  }
+  render() {
+    return (h(Host, { onClick: this.itemClicked.bind(this), tabindex: "0" }, this.icon !== undefined ? (h("gxg-icon", { color: "auto", size: "small", type: this.icon })) : null, h("div", { class: "text" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return gxgFilterItemCss; }
+}, [1, "gxg-filter-item", {
+    "itemId": [8, "item-id"],
+    "type": [8],
+    "icon": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-filter-item", "ch-icon", "gxg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-filter-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgFilterItem$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgFilterItem = GxgFilterItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgFilterItem, defineCustomElement };

package/dist/components/gxg-filter.js

@@ -0,0 +1,147 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { e as exportParts } from './export-parts.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './button.js';
+import { d as defineCustomElement$5 } from './form-text.js';
+import { d as defineCustomElement$4 } from './icon2.js';
+import { d as defineCustomElement$3 } from './gxg-label2.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const gxgFilterCss = "/*! 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;box-shadow:var(--box-shadow-01);width:200px;opacity:0;margin-top:var(--spacing-lay-s);animation:in 0.5s forwards;border-radius:var(--border-radius-md);z-index:10;background-color:var(--color-background)}:host #header{display:flex;justify-content:flex-end;padding:var(--spacing-comp-01)}:host #header .search-container{width:calc(100% - 24px)}:host #header .close-icon{margin-inline-start:var(--spacing-comp-01);transform:scale(0.85);transition-property:transform;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host #header .close-icon:active{transform:scale(1)}:host #main{max-height:144px;overflow-y:auto;}:host #main::-webkit-scrollbar{width:6px;height:6px}:host #main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host #main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host #main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host #main .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host #main #no-match{transition:all 0.25s;display:block;overflow:hidden;font-family:var(--font-family-primary);font-size:var(--font-size-sm);padding:0 var(--spacing-comp-01) 0 7px;align-items:center;position:relative;top:-2px;color:var(--color-on-background)}:host #main #no-match .hint{font-size:var(--font-size-xs);color:var(--color-on-disabled)}:host #main #no-match.opacity-zero{opacity:0}:host #main #no-match.height-zero{height:0}:host(.hide){animation:out 0.25s forwards}@keyframes in{from{opacity:0;margin-top:var(--spacing-lay-s)}to{opacity:1;margin-top:0}}@keyframes out{from{opacity:1;margin-top:0}to{opacity:0;margin-top:var(--spacing-lay-s)}}";
+
+const GxgFilter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.parts = {
+      input: "input",
+      buttonClose: "button-close",
+    };
+    /**
+     * The top position of the filter, relative to the closest parent with relative position. (optional)
+     */
+    this.top = undefined;
+    /**
+     * The left position of the filter, relative to the closest parent with relative position. (optional)
+     */
+    this.left = undefined;
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+  }
+  componentWillLoad() {
+    this.itemsNodeList = this.el.querySelectorAll("gxg-filter-item");
+    //Set position
+    if (this.top !== undefined && this.left !== undefined) {
+      this.el.style.top = this.top;
+      this.el.style.left = this.left;
+      this.el.style.position = "absolute";
+    }
+    this.attachExportParts();
+  }
+  onInputGxgformText(e) {
+    const noMatchSpan = this.el.shadowRoot.getElementById("no-match");
+    const filterValue = e.detail.toLowerCase();
+    this.itemsNodeList.forEach((item) => {
+      const itemHtmlElement = item;
+      const itemContent = itemHtmlElement.innerText.toLowerCase();
+      if (!itemContent.includes(filterValue)) {
+        itemHtmlElement.classList.add("opacity-zero");
+        itemHtmlElement.classList.add("height-zero");
+      }
+      else {
+        itemHtmlElement.classList.remove("height-zero");
+        itemHtmlElement.classList.remove("opacity-zero");
+      }
+      if (itemContent === filterValue) {
+        itemHtmlElement.classList.add("exact-match");
+      }
+      else {
+        itemHtmlElement.classList.remove("exact-match");
+      }
+    });
+    const numberOfHiddenItems = this.el.getElementsByClassName("opacity-zero")
+      .length;
+    if (this.itemsNodeList.length === numberOfHiddenItems) {
+      noMatchSpan.classList.remove("height-zero");
+      noMatchSpan.classList.remove("opacity-zero");
+    }
+    else {
+      noMatchSpan.classList.add("opacity-zero");
+      noMatchSpan.classList.add("height-zero");
+    }
+  }
+  closeFilter() {
+    this.el.addEventListener("animationend", () => {
+      this.el.remove();
+    });
+    this.el.classList.add("hide");
+  }
+  handleItemClickedEvent() {
+    //When an item has been clicked, hide the filter
+    this.el.addEventListener("animationend", () => {
+      this.el.remove();
+    });
+    this.el.classList.add("hide");
+  }
+  render() {
+    return (h(Host, { exportParts: this.exportparts ? this.exportparts : null }, h("header", { id: "header" }, h("div", { class: "search-container" }, h("gxg-form-text", { icon: "gemini-tools/search", "icon-position": "start", onInput: this.onInputGxgformText.bind(this), part: this.parts.input })), h("gxg-button", { class: "close-icon", icon: "gemini-tools/close", type: "tertiary", onClick: this.closeFilter.bind(this), part: this.parts.buttonClose })), h("main", { id: "main" }, h("slot", null), h("span", { id: "no-match", class: "opacity-zero height-zero" }, "No ocurrences found ", h("br", null), h("span", { class: "hint" }, "ctrl + backspace to erase")))));
+  }
+  get el() { return this; }
+  static get style() { return gxgFilterCss; }
+}, [1, "gxg-filter", {
+    "top": [8],
+    "left": [8],
+    "itemsNodeList": [32]
+  }, [[0, "itemClickedEvent", "handleItemClickedEvent"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-filter", "ch-icon", "gxg-button", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-filter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgFilter$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-form-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgFilter = GxgFilter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgFilter, defineCustomElement };

package/dist/components/gxg-form-checkbox.js

@@ -0,0 +1,6 @@
+import { G as GxgFormCheckbox$1, d as defineCustomElement$1 } from './form-checkbox.js';
+
+const GxgFormCheckbox = GxgFormCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgFormCheckbox, defineCustomElement };

package/dist/components/gxg-form-message.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon2.js';
+
+const formMessageCss = "/*! 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:flex;align-items:center;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 gxg-icon{height:10px;width:15px;margin-right:var(--spacing-comp-01)}:host([type=error]){color:var(--color-error-dark)}:host([type=warning]){color:var(--color-warning-dark)}@keyframes errorMessage{from{top:-5px;opacity:0}to{top:0;opacity:1}}:host(.large){font-size:var(--font-size-sm)}";
+
+const GxgFormMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The type of message
+     */
+    this.type = "indeterminate";
+    this.iconColor = () => {
+      if (this.type === "warning" ||
+        this.type === "error" ||
+        this.type === "success") {
+        return this.type;
+      }
+      else {
+        return "auto";
+      }
+    };
+  }
+  iconType() {
+    if (this.type === "error") {
+      return "gemini-tools/error";
+    }
+    else if (this.type === "warning") {
+      return "gemini-tools/warning";
+    }
+    else if (this.type === "success") {
+      return "gemini-tools/success";
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        large: state.large,
+      } }, this.type !== "indeterminate" ? (h("gxg-icon", { style: { "--icon-size": "15px" }, slot: "icon", size: "small", type: this.iconType(), color: this.iconColor() })) : null, h("slot", null)));
+  }
+  static get style() { return formMessageCss; }
+}, [1, "gxg-form-message", {
+    "type": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-form-message", "ch-icon", "gxg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-form-message":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgFormMessage$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgFormMessage = GxgFormMessage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgFormMessage, defineCustomElement };