@genexus/genexus-ide-ui 0.0.73 → 0.0.74

package/dist/cjs/gx-ide-container_4.cjs.entry.js

@@ -1,668 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f9bb1815.js');
-const form = require('./form-437d6a38.js');
-const classesNames = require('./classesNames-5b7c6ad4.js');
-const store = require('./store-5fad773e.js');
-const exportParts = require('./export-parts-931a23ad.js');
-
-const containerCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block;height:100%;box-sizing:border-box}.container{display:grid;height:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box}.heading,.content,.footer,.footer-above{padding:var(--gxg-container--padding)}.container--padding-s{--gxg-container--padding:var(--spacing-comp-02)}.container--padding-m{--gxg-container--padding:var(--spacing-comp-03)}.container--padding-l{--gxg-container--padding:var(--spacing-comp-04)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.container--overflow-hidden-y{overflow-y:hidden}.heading{display:flex;flex-direction:column;gap:var(--gxg-container--padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.heading--inactive{color:var(--gxg-color--disabled)}.heading--padding-top{padding:var(--gxg-container--padding) 0 0 0}.heading--slimmer{padding-top:var(--spacing-comp-02);padding-bottom:var(--spacing-comp-02)}.heading--form-text-height .heading__title{min-height:var(--gxg-form-text-height);justify-content:center}.heading--flex-row{flex-direction:row;align-items:center;justify-content:center}.content{overflow-x:auto;display:flex;flex-direction:column;gap:var(--gx-ide-form-items-gap);box-sizing:border-box;}.content::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.content::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.content::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}.content--no-padding{padding:0}.content--no-border-top{border-top:none}.content--flex{display:flex}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.content--border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--only-content{grid-template-rows:1fr}.container--no-header:not(.container--only-content){grid-template-rows:1fr auto}.container--no-footer:not(.container--only-content){grid-template-rows:auto 1fr}.footer-above{border-top:1px solid var(--gx-ide-container-border-color)}.footer-above--no-border-top{border-top:0}.footer-above--slimmer{padding-top:var(--spacing-comp-02);padding-bottom:var(--spacing-comp-02)}.footer-above--no-padding{padding:0}.footer{display:flex;gap:var(--gxg-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gxg-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}.footer--slimmer{padding-top:var(--spacing-comp-02);padding-bottom:var(--spacing-comp-02)}.footer--subtle-shadow{box-shadow:rgba(var(--color-shadow--rgb), 0.1) 0px 4px 16px, rgba(var(--color-shadow--rgb), 0.05) 0px 8px 32px}";
-
-const GxIdeContainer = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.headingClasses = () => {
-      var _a;
-      return {
-        "heading": true,
-        "heading--inactive": this.inactiveTitle,
-        "heading--slimmer": this.titleType === "secondary",
-        "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
-        [`heading--justify-${this.headingJustify}`]: true,
-        "heading--no-padding": this.noHeadingPadding,
-        "heading--padding-top": this.headingPaddingTop && ((_a = this.containerTitle) === null || _a === void 0 ? void 0 : _a.length) > 0,
-        "heading--form-text-height": this.titleHeightAsInput,
-        "heading--flex-row": this.flexRow
-      };
-    };
-    this.contentClasses = () => {
-      return {
-        "content": true,
-        "content--flex": this.flexContent,
-        "content--no-padding": this.noContentPadding,
-        "content--no-gap": this.noContentGap,
-        "content--no-border-top": this.noContentBorderTop,
-        "content--border-end": this.contentBorderEnd,
-        [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
-        [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
-      };
-    };
-    this.aboveFooter = () => {
-      return this.hasAboveFooterSlot ? (index.h("footer", { class: {
-          "footer-above": true,
-          "footer-above--no-border-top": this.noBorderAboveFooter,
-          "footer-above--no-padding": this.noAboveFooterPadding,
-          "footer-above--slimmer": this.slimmerFooter
-        } }, index.h("slot", { name: "footer-above" }))) : null;
-    };
-    this.footer = () => {
-      return this.hasFooterSlot ? (index.h("footer", { class: {
-          "footer": true,
-          "footer--no-border": this.hasOnlyFooter ||
-            !this.hasSlottedContent ||
-            this.noBorderFooter,
-          [`footer--justify-${this.footerJustify}`]: true,
-          [`footer--justify-${this.footerJustify}`]: true,
-          "footer--no-padding": this.noFooterPadding,
-          "footer--slimmer": this.slimmerFooter,
-          "footer--subtle-shadow": this.footerSubtleShadow
-        } }, index.h("div", { class: "footer__start" }, index.h("slot", { name: "footer-start" })), index.h("div", { class: "footer__end" }, index.h("slot", { name: "footer-end" })))) : null;
-    };
-    this.inactiveTitle = false;
-    this.containerTitle = undefined;
-    this.titleType = "primary";
-    this.displayBorder = false;
-    this.displayBorderTop = false;
-    this.displayBorderEnd = false;
-    this.displayBorderBottom = false;
-    this.displayBorderStart = false;
-    this.sectionsPadding = "m";
-    this.titleAlignment = "center";
-    this.noHeadingBorder = false;
-    this.noHeadingPadding = false;
-    this.headingPaddingTop = false;
-    this.headingJustify = "center";
-    this.titleHeightAsInput = false;
-    this.flexRow = false;
-    this.flexContent = false;
-    this.noContentBorderTop = false;
-    this.noContentPadding = false;
-    this.noContentGap = false;
-    this.alignItems = undefined;
-    this.justifyContent = undefined;
-    this.contentBorderEnd = false;
-    this.slimmerAboveFooter = false;
-    this.noAboveFooterPadding = false;
-    this.noBorderAboveFooter = false;
-    this.slimmerFooter = false;
-    this.noFooterPadding = false;
-    this.footerJustify = "end";
-    this.noBorderFooter = false;
-    this.footerSubtleShadow = false;
-    this.hasHeaderSlot = false;
-    this.hasSlottedContent = false;
-    this.hasFooterSlot = false;
-    this.hasAboveFooterSlot = false;
-    this.hasOnlyHeading = false;
-    this.hasOnlyContent = false;
-    this.hasOnlyFooter = false;
-  }
-  // 4.PUBLIC PROPERTY API //
-  // 5.EVENTS (EMIT) //
-  // 6.COMPONENT LIFECYCLE EVENTS //
-  componentWillLoad() {
-    this.evaluateSlots();
-  }
-  // 7.LISTENERS //
-  // 8.PUBLIC METHODS API //
-  // 9.LOCAL METHODS //
-  evaluateSlots() {
-    // header
-    const headerSlot = this.el.querySelectorAll(':scope > [slot="header"]');
-    if (headerSlot.length) {
-      this.hasHeaderSlot = true;
-    }
-    // content
-    const slottedContent = this.el.querySelectorAll(":scope >  :not([slot])");
-    if (slottedContent.length) {
-      this.hasSlottedContent = true;
-    }
-    // footer
-    const footerAboveSlot = this.el.querySelectorAll(':scope >  [slot="footer-above"]');
-    const footerStartSlot = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
-    const footerEndSlot = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
-    if (footerStartSlot.length || footerEndSlot.length) {
-      this.hasFooterSlot = true;
-    }
-    if (footerAboveSlot.length) {
-      this.hasAboveFooterSlot = true;
-    }
-  }
-  evaluateSections() {
-    // has only heading
-    if (!this.hasSlottedContent &&
-      !this.hasFooterSlot &&
-      !this.hasAboveFooterSlot) {
-      this.hasOnlyHeading = true;
-    }
-    // has only content
-    if (this.hasSlottedContent &&
-      !this.containerTitle &&
-      !this.hasHeaderSlot &&
-      !this.hasAboveFooterSlot &&
-      !this.hasFooterSlot) {
-      this.hasOnlyContent = true;
-    }
-    // has only footer
-    if (!this.hasSlottedContent &&
-      !this.containerTitle &&
-      !this.hasAboveFooterSlot) {
-      this.hasOnlyFooter = true;
-    }
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    this.evaluateSections();
-    const result = [
-      this.containerTitle || this.hasHeaderSlot ? (index.h("header", { class: this.headingClasses() }, this.containerTitle ? (index.h("gx-ide-title", { class: "heading__title", type: this.titleType, alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (index.h("div", { class: "heading__inner-wrapper" }, index.h("slot", { name: "header" }))) : null)) : null,
-      this.hasSlottedContent ? (index.h("div", { class: this.contentClasses(), part: "content" }, index.h("slot", null))) : null,
-      this.aboveFooter(),
-      this.footer()
-    ];
-    return (index.h(index.Host, null, index.h("div", { class: {
-        "container": true,
-        [`container--padding-${this.sectionsPadding}`]: true,
-        "container--display-border": this.displayBorder,
-        "container--display-border-top": this.displayBorderTop,
-        "container--display-border-end": this.displayBorderEnd,
-        "container--display-border-bottom": this.displayBorderBottom,
-        "container--display-border-start": this.displayBorderStart,
-        "container--overflow-hidden-y": this.footerSubtleShadow,
-        "container--only-content": this.hasOnlyContent,
-        "container--no-header": !this.hasHeaderSlot && !this.containerTitle,
-        "container--no-footer": !this.hasFooterSlot
-      } }, result)));
-  }
-  get el() { return index.getElement(this); }
-};
-GxIdeContainer.style = containerCss;
-
-const titleCss$1 = ":host{--gx-ide-title-padding:var(--gx-ide-container--padding, --spacing-comp-03);display:flex;flex-direction:column;color:var(--gx-ide-component-text-color);font-family:var(--font-family-primary);line-height:1.6em;background-color:transparent;padding:0}:host(.alignment--start){align-items:start}:host(.alignment--center){align-items:center}:host(.alignment--start){text-align:start}:host([padding]){padding:var(--gx-ide-title-padding)}:host([no-padding-bottom]){padding-bottom:0}:host([border]){border-bottom:1px solid var(--gx-ide-container-border-color)}:host(.title-type--secondary){color:var(--gray-06)}";
-
-const GxIdeTitle = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.titleCaption = undefined;
-    this.type = "primary";
-    this.alignment = "start";
-    this.padding = false;
-    this.noPaddingBottom = false;
-    this.border = false;
-  }
-  componentWillLoad() {
-    if (this.type === "primary") {
-      this.geminiType = "title-04";
-    }
-    else if (this.type === "secondary") {
-      this.geminiType = "title-05";
-    }
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        [`alignment--${this.alignment}`]: true,
-        [`title-type--${this.type}`]: true
-      } }, index.h("gxg-title", { type: this.geminiType }, index.h("slot", null))));
-  }
-};
-GxIdeTitle.style = titleCss$1;
-
-const formTextCss = "/*! 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}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}.tooltip-outer-wrapper{display:grid;grid-template-columns:0fr;transition:grid-template-columns var(--timing-02)}:host(.tooltip--visible) .tooltip-outer-wrapper{grid-template-columns:1fr}.tooltip-inner-wrapper{overflow:hidden;transition:150ms width;width:0}.tooltip-inner-wrapper gxg-icon{display:flex;position:relative !important;top:0 !important;transform:none !important;margin-inline-start:var(--spacing-comp-01)}.tooltip-inner-wrapper--visible{width:24px}.tooltip-inner-wrapper--hidden{display:none}:host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--gxg-background-color--disabled) !important;color:var(--gxg-color--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:flex;flex-direction:column;width:100%}:host .outer-wrapper{position:relative;width:100%}:host .inner-wrapper{display:flex;flex-direction:column;position:relative;flex:1}:host .inner-wrapper gxg-icon{position:absolute}:host(.tooltip) .inner-wrapper{flex-direction:row;align-items:center;justify-content:center}:host(.tooltip) .tooltip-container{width:0;overflow:hidden;transition:width --timing-01}:host(.tooltip--visible) .tooltip-container{width:20px}:host label{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;align-items:center;cursor:default}:host label .required{padding-inline-start:2px}:host input{position:relative;width:100%}:host([label-position=start]) .outer-wrapper{display:flex;flex-direction:row}:host input[type=text],:host input[type=password]{border-width:var(--border-width-sm);border-color:var(--gray-02);border-style:var(--border-style-regular);border-radius:var(--border-radius-sm);padding-left:var(--spacing-comp-01);padding-right:var(--spacing-comp-01);color:var(--color-on-background);background-color:var(--color-background);height:var(--gxg-form-text-height);box-sizing:border-box}:host input[type=text]:focus,:host input[type=password]:focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host input[disabled]{background-color:var(--gray-01);color:var(--color-on-disabled)}:host input[disabled]::-webkit-input-placeholder{color:var(--gray-04)}:host .input--borderless{border-color:transparent !important}:host input[readonly]{cursor:default}:host([minimal]) input[type=text]:not(:focus),:host([minimal]) input[type=password]:not(:focus){border-color:transparent;background-color:transparent}:host([minimal]) input.cursor-inside{border-color:var(--gray-02) !important;background-color:var(--color-background)}:host([minimal]) input[type=text]:focus,:host([minimal]) input[type=password]:focus{border-color:transparent}:host([minimal]:not([icon-position=start])) input[type=text],:host([minimal]:not([icon-position=start])) input[type=password]{padding-inline-start:0}:host([minimal]:not([icon-position=start])) input.cursor-inside{padding-inline-start:var(--spacing-comp-01)}:host([minimal]:not([icon-position=start])) input[type=text]:focus,:host([minimal]:not([icon-position=start])) input[type=password]:focus{padding-inline-start:var(--spacing-comp-01)}:host([minimal][over-dark-background]) input[type=text]:not(:focus),:host([minimal][over-dark-background]) input[type=password]:not(:focus){color:var(--color-on-primary)}:host gxg-icon{top:50%;transform:translateY(-50%)}:host([icon-position=end]) .clear-button gxg-icon:not(.clear-button){right:16px}:host(.has-icon[icon-position=start]) input{padding-inline-start:20px}:host([icon-position=end]) input{padding-inline-end:20px}:host([icon-position=end]) .inner-wrapper{flex-direction:row-reverse}:host gxg-icon.clear-button{left:auto;opacity:0.5;cursor:pointer}:host gxg-icon.clear-button:hover{opacity:1}:host([clear-button][icon-position=end]) gxg-icon:not(.clear-button){right:16px}:host([clear-button][icon-position=end]) input{padding-inline-end:36px}.custom-icon:has(+.clear-button){}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host([text-style=regular]) input{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([text-style=quote]) input{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}:host([text-style=title-01]) input{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}:host([text-style=title-02]) input{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}:host([text-style=title-03]) input{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}:host([text-style=title-04]) input{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}:host([text-style=title-05]) input{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}:host(.file) .input{user-select:none;cursor:pointer}:host(.rtl[icon-position=start]) gxg-icon{right:0;left:auto}:host(.rtl[icon-position=end]) gxg-icon{right:auto;left:0}:host(.large) label{font-size:var(--font-size-lg)}:host(.large) input{font-size:var(--font-size-lg)}:host(.large) input[type=text],:host(.large) input[type=password]{padding-left:7px;padding-right:7px}:host(.large.has-icon[icon-position=start]) input{padding-inline-start:var(--spacing-comp-05)}:host(.large.has-icon[icon-position=start]) input .inner-wrapper gxg-icon{left:2px}:host(.large[icon-position=end]) input{padding-inline-end:var(--spacing-comp-05)}:host(.large[icon-position=start]) .inner-wrapper gxg-icon{left:2px}:host(.large[icon-position=end]) .inner-wrapper gxg-icon{right:4px;left:auto}:host(.large) gxg-icon.clear-button{right:5px !important;left:auto !important}:host(.large[icon-position=end][clear-button]) .inner-wrapper gxg-icon{right:26px}:host(.large.has-icon[icon-position=start][clear-button]) input{padding-inline-end:26px}:host(.large[icon-position=end][clear-button]) input{padding-inline-end:48px}";
-
-const GxgFormText = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.input = index.createEvent(this, "input", 7);
-    this.change = index.createEvent(this, "change", 7);
-    this.clearButtonClicked = index.createEvent(this, "clearButtonClicked", 7);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.fileSelected = index.createEvent(this, "fileSelected", 7);
-    this.parts = {
-      input: "input",
-    };
-    /**
-     * The presence of this attribute disables the tooltip. Useful for the combo-box.
-     */
-    this.hideTooltip = false;
-    /**
-     * The presence of this attribute displays a tooltip message, instead of a block message below the control
-     */
-    this.toolTip = false;
-    /**
-     * The presence of this attribute displays a clear (cross) button-icon on the right side
-     */
-    this.clearButton = false;
-    /**
-     * The presence of this attribute activates a debounce for the valueChanged event. This will cause the event to be emitted after 'debounceDelay' time.
-     */
-    this.debounce = false;
-    /**
-     * The debounce delay value. Only applies if 'debounce' is true.
-     */
-    this.debounceDelay = 800;
-    /**
-     * The presence of this attribute makes the input disabled
-     */
-    this.disabled = false;
-    /**
-     * The presence of this attribute makes the input readonly
-     */
-    this.readonly = false;
-    /**
-     * The input icon (optional)
-     */
-    this.icon = null;
-    /**
-     * If true, it will position the cursor at the end when the input is focused.
-     */
-    this.cursorEnd = false;
-    /**
-     * The input icon side
-     */
-    this.iconPosition = null;
-    /**
-     * The label position
-     */
-    this.labelPosition = "start";
-    /**
-     * The presence of this attribute hides the border.
-     */
-    this.borderless = false;
-    /**
-     * The presence of this attribute hides the border, and sets the background to transparent when the element has no focus
-     */
-    this.minimal = false;
-    /**
-     * The presence of this attribute sets the text color to white. Usefull when "minimal" attribute is applied and the background behind the input is dark
-     */
-    this.overDarkBackground = false;
-    /**
-     * The presence of this attribute makes this input required
-     */
-    this.required = false;
-    /**
-     * Centers the label
-     */
-    this.centerLabel = false;
-    /**
-     * The type of input
-     */
-    this.type = "text";
-    /**
-     * Allows multiple files if type is "file"
-     */
-    this.multiple = false;
-    /**
-     * Prevent "valueChanged" event from being emitted (helpful for cases where the event causes a conflict )
-     */
-    this.preventValueChangedEmit = false;
-    /* VALIDATION */
-    /**
-     * The validation status
-     *
-     */
-    this.validationStatus = "indeterminate";
-    /**
-     * The input max. width
-     */
-    this.maxWidth = "100%";
-    /**
-     * The input width
-     */
-    this.width = "100%";
-    /**
-     * The text style
-     */
-    this.textStyle = "regular";
-    /**
-     * The presence of this attribute sets the input type as password
-     */
-    this.password = false;
-    /**
-     * The input max. length
-     */
-    this.maxLength = undefined;
-    /**
-     * The input min. length
-     */
-    this.minLength = undefined;
-    this.cursorInside = false;
-    this.inputSize = "auto";
-    this.mouseCoordinates = {
-      x: null,
-      y: null,
-    };
-    /**
-     * Reading direction
-     */
-    this.rtl = false;
-    this.attachExportParts = () => {
-      const part = this.el.getAttribute("part");
-      const exportPartsResult = exportParts.exportParts(part, this.parts);
-      exportPartsResult.length && (this.exportparts = exportPartsResult);
-    };
-    this.evaluateIcon = () => {
-      if (this.type === "file") {
-        this.icon = "controls/file-upload";
-        this.iconPosition = "start";
-        this.placeholder = this.placeholder || "Select a file";
-      }
-    };
-    this.evaluateLabelAlignment = () => {
-      if (this.labelPosition === "start") {
-        this.centerLabel = true;
-      }
-    };
-    this.handleClick = () => {
-      this.openFile();
-    };
-    this.handleKeyDown = (e) => {
-      if (e.key === "Enter" && this.type === "file") {
-        this.textInput.click();
-      }
-    };
-    this.inputFileChangedHandler = (e) => {
-      const selectedFiles = e.target.files;
-      this.fileList = selectedFiles;
-      this.fileSelected.emit(selectedFiles);
-      if (selectedFiles.length > 1) {
-        this.value = `${selectedFiles.length} files chosen`;
-      }
-      else {
-        this.value = selectedFiles[0].name;
-      }
-    };
-    this.renderInputFile = () => {
-      if (this.type === "file") {
-        return (index.h("input", { class: "input-file", type: "file", multiple: this.multiple, accept: this.acceptFile, ref: (el) => (this.fileInputEl = el), onChange: this.inputFileChangedHandler, style: { display: "none" } }));
-      }
-    };
-  }
-  watchHandler(newValue) {
-    if (!this.preventValueChangedEmit && this.debounce) {
-      clearTimeout(this.timeoutReference);
-      this.timeoutReference = setTimeout(() => {
-        this.valueChanged.emit(newValue);
-      }, this.debounceDelay);
-    }
-    else if (!this.preventValueChangedEmit && !this.debounce) {
-      this.valueChanged.emit(newValue);
-    }
-    if (this.minimal) {
-      this.updateGhostSpan();
-    }
-    if (this.minimal) {
-      this.updateGhostSpan();
-    }
-  }
-  async selectInputText() {
-    this.textInput.focus();
-    this.textInput.select();
-  }
-  async openFile() {
-    if (this.type === "file") {
-      this.fileInputEl.click();
-    }
-  }
-  async clearInput() {
-    this.clearButtonFunc();
-  }
-  componentWillLoad() {
-    this.evaluateIcon();
-    this.attachExportParts();
-    this.evaluateLabelAlignment();
-  }
-  /*********************************
-  METHODS
-  *********************************/
-  iconPositionFunc() {
-    if (this.iconPosition !== null && this.icon !== null) {
-      return this.iconPosition;
-    }
-  }
-  inputIcon() {
-    const iconSize = this.iconSize();
-    if (this.iconPosition !== null && this.icon !== null) {
-      if (this.validationStatus === "warning") {
-        return (index.h("gxg-icon", { class: "custom-icon", type: this.icon, size: iconSize, color: "warning" }));
-      }
-      if (this.validationStatus === "error") {
-        return (index.h("gxg-icon", { class: "custom-icon", type: this.icon, size: iconSize, color: "error" }));
-      }
-      return (index.h("gxg-icon", { class: "custom-icon", type: this.icon, size: iconSize, color: this.disabled ? "disabled" : "auto" }));
-    }
-  }
-  handleInput(e) {
-    e.stopPropagation();
-    const target = e.target;
-    this.value = target.value;
-    this.input.emit(target.value);
-  }
-  handleChange(e) {
-    e.stopPropagation();
-    const target = e.target;
-    this.value = target.value;
-    this.change.emit(target.value);
-  }
-  onFocusHandler() {
-    if (this.cursorEnd) {
-      this.textInput.setSelectionRange(this.textInput.value.length, this.textInput.value.length);
-    }
-  }
-  clearButtonFunc() {
-    this.clearButtonClicked.emit({ prevValue: this.value });
-    this.value = "";
-    if (this.type === "file") {
-      this.fileList = null;
-      this.fileInputEl.value = "";
-    }
-  }
-  updateGhostSpan() {
-    if (this.minimal) {
-      //Update ghost span content, and then get and apply the width from the ghost span
-      const ghostSpan = this.el.shadowRoot.querySelector(".ghost-span");
-      ghostSpan.innerHTML = this.value;
-      //Then get the ghost span width
-      const ghostSpanWidth = ghostSpan.offsetWidth + 5;
-      const input = this.el.shadowRoot.querySelector(".input");
-      //Finally set that width to the input!
-      input.style.width = ghostSpanWidth + "px";
-    }
-  }
-  mouseEnterHandler() {
-    setTimeout(function () {
-      const inputText = this.el.shadowRoot.querySelector(".input");
-      //Contextual menu coordinates
-      const inputTextArea = inputText.getBoundingClientRect();
-      if (this.mouseCoordinates.x > inputTextArea.left &&
-        this.mouseCoordinates.x < inputTextArea.right &&
-        this.mouseCoordinates.y > inputTextArea.top &&
-        this.mouseCoordinates.y < inputTextArea.bottom) {
-        //Mouse pointer is inside the input text
-        this.cursorInside = true;
-      }
-    }.bind(this), 500);
-  }
-  mouseOutHandler() {
-    this.cursorInside = false;
-  }
-  mouseMoveHandler(e) {
-    this.mouseCoordinates["x"] = e.clientX;
-    this.mouseCoordinates["y"] = e.clientY;
-  }
-  componentDidLoad() {
-    if (this.minimal) {
-      document.addEventListener("mousemove", this.mouseMoveHandler.bind(this));
-      /**************
-      GHOST SPAN
-      Ghost span for the "minimal" type input, in order to make the input width fit the content
-      **************/
-      const intersectionObserver = new IntersectionObserver(function (entries) {
-        // If intersectionRatio is 0, the target is out of view
-        // and we do not need to do anything.
-        if (entries[0].intersectionRatio <= 0)
-          return;
-        const input = this.el.shadowRoot.querySelector(".input");
-        const inputComputedStyles = window.getComputedStyle(input);
-        const ghostSpan = this.el.shadowRoot.querySelector(".ghost-span");
-        //Set ghostSpan outside of the visible area
-        ghostSpan.style.position = "fixed";
-        ghostSpan.style.left = "-1000px";
-        ghostSpan.style.top = "-1000px";
-        ghostSpan.style.zIndex = "-1000";
-        ghostSpan.style.opacity = "0";
-        //Set input styles that affect the width to the ghost span
-        ghostSpan.style.fontSize = inputComputedStyles.fontSize;
-        ghostSpan.style.fontFamily = inputComputedStyles.fontFamily;
-        ghostSpan.style.textTransform = inputComputedStyles.textTransform;
-        ghostSpan.style.display = "inline-block";
-        ghostSpan.style.paddingLeft = inputComputedStyles.paddingRight;
-        ghostSpan.style.paddingRight = inputComputedStyles.paddingRight;
-        ghostSpan.style.letterSpacing = inputComputedStyles.letterSpacing;
-        ghostSpan.style.fontWeight = inputComputedStyles.fontWeight;
-        //Then get the ghost span width
-        const ghostSpanWidth = ghostSpan.offsetWidth + 5;
-        input.style.width = "0px";
-        //get inner-wrapper width
-        const innerWrapperWidth = this.el.shadowRoot.querySelector(".inner-wrapper")
-          .offsetWidth - 5;
-        //Finally set that width to the input!
-        input.style.width = ghostSpanWidth + "px";
-        input.style.maxWidth = innerWrapperWidth + "px";
-        //Listen to resizeObserver to set the new max-width value on the on the input
-        const resizeObserver = new ResizeObserver(() => {
-          input.style.width = "0px";
-          const innerWrapperWidth = this.el.shadowRoot.querySelector(".inner-wrapper").offsetWidth - 5;
-          input.style.maxWidth = innerWrapperWidth + "px";
-          input.style.width = ghostSpanWidth + "px";
-        });
-        const innerWrapper = this.el.shadowRoot.querySelector(".inner-wrapper");
-        resizeObserver.observe(innerWrapper);
-      }.bind(this));
-      // start observing
-      intersectionObserver.observe(this.el.shadowRoot.querySelector(".input"));
-    } // if (this.minimal)
-    //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;
-    }
-  }
-  componentDidUnload() {
-    if (this.minimal) {
-      document.removeEventListener("mousemove", this.mouseMoveHandler);
-    }
-  }
-  iconSize() {
-    if (store.state.large) {
-      return "regular";
-    }
-    else {
-      return "small";
-    }
-  }
-  evaluateType() {
-    if (this.password) {
-      return "password";
-    }
-    else {
-      return "text";
-    }
-  }
-  render() {
-    return (index.h(index.Host, { role: "textbox", "aria-label": this.label, "icon-position": this.iconPositionFunc(), style: {
-        width: this.width,
-        maxWidth: this.maxWidth,
-      }, class: {
-        rtl: this.rtl,
-        large: store.state.large,
-        mercury: store.state.mercury,
-        borderless: this.borderless,
-        file: this.type === "file",
-        tooltip: this.toolTip,
-        "has-icon": this.icon,
-        [classesNames.formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
-        [classesNames.formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
-        [classesNames.formClasses["VALIDATION_ERROR_CLASS"]]: this.validationStatus === "error",
-        [classesNames.formClasses["VALIDATION_SUCCESS_CLASS"]]: this.validationStatus === "success",
-        [classesNames.commonClassesNames["DISABLED_CLASS"]]: this.disabled,
-      }, exportParts: this.exportparts ? this.exportparts : null }, this.minimal ? index.h("span", { class: "ghost-span" }, this.value) : null, index.h("div", { class: {
-        "outer-wrapper": true,
-      } }, this.label ? (index.h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label, form.requiredLabel(this))) : (""), index.h("div", { class: {
-        "inner-wrapper": true,
-        "clear-button": this.clearButton === true,
-      } }, index.h("input", { part: this.parts.input, type: this.evaluateType(), value: this.value, class: {
-        input: true,
-        "form-element": true,
-        "cursor-inside": this.cursorInside,
-        "clear-button": this.clearButton === true,
-        "custom-icon": this.icon,
-        "custom-icon--end": this.iconPosition === "end",
-        "input--borderless": this.borderless,
-      }, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly || this.type === "file" , onClick: this.handleClick, onInput: this.handleInput.bind(this), onKeyDown: this.handleKeyDown, onChange: this.handleChange.bind(this), onFocus: this.onFocusHandler.bind(this), required: this.required, onMouseEnter: this.mouseEnterHandler.bind(this), onMouseOut: this.mouseOutHandler.bind(this), ref: (el) => (this.textInput = el), maxLength: this.maxLength ? parseInt(this.maxLength) : null, minLength: this.minLength ? parseInt(this.minLength) : null }), this.inputIcon(), this.clearButton ? (index.h("gxg-icon", { class: "clear-button", type: "gemini-tools/close", size: this.iconSize(), color: "onbackground", onClick: this.clearButtonFunc.bind(this) })) : null, this.toolTip ? form.formTooltipLogic(this, this.hideTooltip) : null, this.labelPosition === "start" && !this.toolTip
-      ? form.formMessageLogic(this)
-      : null, this.renderInputFile())), this.labelPosition === "above" && !this.toolTip
-      ? form.formMessageLogic(this)
-      : null));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["watchHandler"]
-  }; }
-};
-GxgFormText.style = formTextCss;
-
-const titleCss = "/*! 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}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host h1,:host h2,:host h3,:host h4,:host h5{margin:0;color:inherit;background-color:transparent}:host([alignment=start]) h1,:host([alignment=start]) h2,:host([alignment=start]) h3,:host([alignment=start]) h4,:host([alignment=start]) h5{text-align:start}:host([alignment=center]) h1,:host([alignment=center]) h2,:host([alignment=center]) h3,:host([alignment=center]) h4,:host([alignment=center]) h5{text-align:center}:host([alignment=end]) h1,:host([alignment=end]) h2,:host([alignment=end]) h3,:host([alignment=end]) h4,:host([alignment=end]) h5{text-align:end}:host(.large) .gxg-title-01{font-size:var(--font-size-xl)}:host(.large) .gxg-title-02{font-size:var(--font-size-lg)}:host(.large) .gxg-title-03{font-size:var(--font-size-lg)}:host(.large) .gxg-title-04{font-size:var(--font-size-xl)}:host(.large) .gxg-title-05{font-size:var(--font-size-lg)}";
-
-const GxgTitle = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Title type
-     */
-    this.type = "title-01";
-    /**
-     * Title type
-     */
-    this.alignment = "start";
-  }
-  titleType() {
-    let title;
-    switch (this.type) {
-      case "title-01":
-        title = (index.h("h1", { class: "gxg-title-01", part: "title" }, index.h("slot", null)));
-        break;
-      case "title-02":
-        title = (index.h("h2", { class: "gxg-title-02", part: "title" }, index.h("slot", null)));
-        break;
-      case "title-03":
-        title = (index.h("h3", { class: "gxg-title-03", part: "title" }, index.h("slot", null)));
-        break;
-      case "title-04":
-        title = (index.h("h4", { class: "gxg-title-04", part: "title" }, index.h("slot", null)));
-        break;
-      case "title-05":
-        title = (index.h("h5", { class: "gxg-title-05", part: "title" }, index.h("slot", null)));
-        break;
-      default:
-        title = (index.h("h1", { class: "gxg-title-06", part: "title" }, index.h("slot", null)));
-    }
-    return title;
-  }
-  render() {
-    return index.h(index.Host, { class: { large: store.state.large } }, this.titleType(), " ");
-  }
-};
-GxgTitle.style = titleCss;
-
-exports.gx_ide_container = GxIdeContainer;
-exports.gx_ide_title = GxIdeTitle;
-exports.gxg_form_text = GxgFormText;
-exports.gxg_title = GxgTitle;