@genexus/genexus-ide-ui 0.0.70 → 0.0.72

package/dist/collection/components/kb-manager-import/kb-manager-import.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/new-environment/new-environment.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/new-kb/new-kb.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/new-object/new-object.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/object-selector/object-selector.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/object-selector/object-selector.js

@@ -220,7 +220,6 @@ export class GxIdeObjectSelector {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    console.log(this.selectedObjectsIds.length);
     return (h(Host, { class: "gx-ide-component", onKeyPress: this.hostKeyPressHandler }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, noContentPadding: true, noAboveFooterPadding: true, noHeadingPadding: true, headingPaddingTop: true, noHeadingBorder: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, this.renderFilter(), this.renderObjects(), h("div", { class: "objects-count", slot: "footer-above" }, h("gxg-text", { class: "align-end", part: "objects-selected", textAlign: "center" }, this.evaluateObjectsCount("selected")), h("gxg-text", { class: "align-end", part: "objects-matching", textAlign: "center" }, this.evaluateObjectsCount("matching"))), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandle, part: "gxg-button gxg-button--cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { type: "primary-text-only", onClick: this.openSelectionCallbackHandler, part: "gxg-button gxg-button--ok", slot: "footer-end" }, this._componentLocale.footer.btnConfirm), h("gxg-button", { type: "primary-text-icon", icon: "menus/new-object", onClick: this.newObjectCallbackHandle, part: "gxg-button gxg-button--new", slot: "footer-start" }, this._componentLocale.footer.btnNew), this.multiSelection ? (h("gxg-button", { type: "secondary-text-only", onClick: this.selectAll, part: "gxg-button gxg-button--select-all", slot: "footer-start" }, this._componentLocale.footer.btnSelectAll)) : null))));
   }
   static get is() { return "gx-ide-object-selector"; }

package/dist/collection/components/references/references.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/references/references.js

@@ -40,7 +40,6 @@ export class GxIdeReferences {
       });
     };
     this.openObjectCallbackHandler = async () => {
-      console.log("openObjectCallback");
       this.openObjectCallback(this.selectedObject.id);
       /* Returns an empty Promise*/
     };

package/dist/collection/components/share-kb/share-kb.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/team-dev/commit/commit.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/team-dev/select-recent-comment/select-recent-comment.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/team-dev/update/update.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/team-dev/update/update.js

@@ -138,7 +138,6 @@ export class GxIdeTeamDevUpdate {
       return h("gxg-icon", { type: type, color: color });
     };
     this.loadData = async () => {
-      console.log("load");
       const filters = {
         pattern: this.showFilter ? this.filterPatternEl.value : null,
         type: this.showFilter ? this.filterTypeEl.value : null

package/dist/collection/components/team-dev/update-partial-selection/update-partial-selection.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/team-dev/update-to-revision/update-to-revision.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/

package/dist/collection/components/ww-images/ww-images.css

@@ -105,6 +105,7 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  box-sizing: border-box;
 }
 
 /*This is the main element. This is the one that take the remaining vertical space*/
@@ -249,39 +250,38 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   padding-top: var(--gxg-container--padding);
   overflow: hidden;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-  grid-template-rows: repeat(4, min-content);
-  grid-template-areas: "search-contents search-contents category category options options" "date-time date-time after-date-time after-date-time user user" "style style language language density density" "layer layer . . . .";
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(3, 1fr);
 }
 .filters-inner-wrapper .search-contents {
-  grid-area: search-contents;
+  grid-area: 1/1/2/5;
 }
 .filters-inner-wrapper .category {
-  grid-area: category;
+  grid-area: 1/5/2/9;
 }
 .filters-inner-wrapper .options {
-  grid-area: options;
+  grid-area: 1/9/2/13;
 }
 .filters-inner-wrapper .date-time {
-  grid-area: date-time;
+  grid-area: 2/1/3/5;
 }
 .filters-inner-wrapper .after-date-time {
-  grid-area: after-date-time;
+  grid-area: 2/5/3/9;
 }
 .filters-inner-wrapper .user {
-  grid-area: user;
+  grid-area: 2/9/3/13;
 }
 .filters-inner-wrapper .style {
-  grid-area: style;
+  grid-area: 3/1/4/4;
 }
 .filters-inner-wrapper .language {
-  grid-area: language;
+  grid-area: 3/4/4/7;
 }
 .filters-inner-wrapper .density {
-  grid-area: density;
+  grid-area: 3/7/4/10;
 }
 .filters-inner-wrapper .layer {
-  grid-area: layer;
+  grid-area: 3/10/4/13;
 }
 
 .master-wrapper {

package/dist/collection/components/ww-images/ww-images.js

@@ -87,7 +87,7 @@ export class GxIdeWWImages {
     this.renderImagesData = () => {
       return (
       /* images information*/
-      h("gx-ide-container", { contentBorderEnd: true, noContentPadding: true, titleType: "secondary", containerTitle: !this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, class: { "images-information": true, "overflow-auto": true }, part: "grid-container" }, this.secondaryFilter ? (h("header", { class: "images-information__header", slot: "header" }, h("gx-ide-title", { type: "secondary", class: "images-information__header-title" }, this._componentLocale.imagesDataTitle), h("gxg-form-text", { icon: "gemini-tools/search", "icon-position": "start", placeholder: "Search by any field", onInput: this.filterInputHandler }))) : null, h("gxg-grid", { part: "images-table", "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-images" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.module, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto })), this.filteredImages.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }), h("gxg-icon", { type: obj.icon, color: "auto" })), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.name, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.module, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.description, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(`${formatDate(obj.modifiedDate)}`, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.lastUser, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(`${formatDate(obj.importDate)}`, this.filterImagesInputValue))))))))));
+      h("gx-ide-container", { contentBorderEnd: true, noContentPadding: true, titleType: "secondary", containerTitle: !this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, class: { "images-information": true, "overflow-auto": true }, part: "grid-container" }, this.secondaryFilter ? (h("header", { class: "images-information__header", slot: "header" }, h("gx-ide-title", { type: "secondary", class: "images-information__header-title" }, this._componentLocale.imagesDataTitle), h("gxg-form-text", { icon: "gemini-tools/search", "icon-position": "start", placeholder: "Search by any field", onInput: this.filterInputHandler }))) : null, h("gxg-grid", { part: "images-table", "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-images", rowSelectionMode: "single" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.module, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto })), this.filteredImages.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }), h("gxg-icon", { type: obj.icon, color: "auto" })), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.name, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.module, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.description, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(`${formatDate(obj.modifiedDate)}`, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.lastUser, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(`${formatDate(obj.importDate)}`, this.filterImagesInputValue))))))))));
     };
     this.renderImages = () => {
       return (
@@ -204,8 +204,7 @@ export class GxIdeWWImages {
         this.getImages();
       });
       // for grid selection
-      this.chGridEl.addEventListener("rowClicked", (ev) => {
-        ev.detail.rowId;
+      this.chGridEl.addEventListener("selectionChanged", (ev) => {
         this.loadImageItemsCallback(ev.detail.rowId).then((items) => {
           this.imagesSelectedItems = items;
         });

package/dist/components/ch-shortcuts.js

@@ -0,0 +1,217 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { f as focusComposedPath } from './helpers.js';
+import { d as defineCustomElement$3 } from './ch-window2.js';
+import { d as defineCustomElement$2 } from './ch-window-close2.js';
+
+const CH_SHORTCUTS = new Map();
+function loadShortcuts(name, root, shortcuts) {
+  shortcuts.forEach(shortcut => {
+    const keyShortcuts = parseKeyShortcuts(shortcut.keyShortcuts);
+    keyShortcuts.forEach(keyShortcut => {
+      CH_SHORTCUTS.set(normalize(keyShortcut.ctrl, keyShortcut.alt, keyShortcut.shift, keyShortcut.meta, keyShortcut.key), {
+        name,
+        root,
+        shortcut
+      });
+    });
+  });
+  addListener();
+}
+function unloadShortcuts(name) {
+  const removeKeyShortcuts = [];
+  CH_SHORTCUTS.forEach((shortcutMap, key) => {
+    if (shortcutMap.name === name) {
+      removeKeyShortcuts.push(key);
+    }
+  });
+  removeKeyShortcuts.forEach(key => CH_SHORTCUTS.delete(key));
+  removeListener();
+}
+function getShortcuts() {
+  return Array.from(CH_SHORTCUTS.values())
+    .filter(shortcutMap => {
+    var _a;
+    return !((_a = shortcutMap.shortcut.conditions) === null || _a === void 0 ? void 0 : _a.focusInclude);
+  })
+    .map(shortcutMap => ({
+    element: querySelectorPlus(shortcutMap.shortcut.selector, shortcutMap.root),
+    keyShortcuts: shortcutMap.shortcut.keyShortcuts,
+    legendPosition: shortcutMap.shortcut.legendPosition
+  }));
+}
+function addListener() {
+  if (CH_SHORTCUTS.size > 0) {
+    window.addEventListener("keydown", keydownHandler, { capture: true });
+  }
+}
+function removeListener() {
+  if (CH_SHORTCUTS.size === 0) {
+    window.removeEventListener("keydown", keydownHandler, { capture: true });
+  }
+}
+function keydownHandler(eventInfo) {
+  const shortcutMap = CH_SHORTCUTS.get(normalize(eventInfo.ctrlKey, eventInfo.altKey, eventInfo.shiftKey, eventInfo.metaKey, eventInfo.key));
+  if (shortcutMap && conditions(shortcutMap)) {
+    const element = querySelectorPlus(shortcutMap.shortcut.selector, shortcutMap.root);
+    if (element) {
+      switch (shortcutMap.shortcut.action) {
+        case "click":
+          element.dispatchEvent(new Event("click"));
+          break;
+        default:
+          element.focus();
+      }
+      if (shortcutMap.shortcut.preventDefault !== false) {
+        eventInfo.preventDefault();
+      }
+    }
+  }
+}
+function parseKeyShortcuts(value = "") {
+  return value.split(" ").map(item => {
+    const match = item.match(/(?:(?<ctrl>Ctrl)?(?<alt>Alt)?(?<shift>Shift)?(?<meta>Meta)?\+?)*(?<key>.*)?/i);
+    if (match.groups.key !== "") {
+      return {
+        ctrl: match.groups.ctrl !== undefined,
+        alt: match.groups.alt !== undefined,
+        shift: match.groups.shift !== undefined,
+        meta: match.groups.meta !== undefined,
+        key: match.groups.key
+      };
+    }
+  });
+}
+function normalize(ctrl, alt, shift, meta, key) {
+  return [
+    ctrl ? "Ctrl" : null,
+    alt ? "Alt" : null,
+    shift ? "Shift" : null,
+    meta ? "Meta" : null,
+    key ? key.charAt(0).toUpperCase() + key.slice(1) : null
+  ]
+    .filter(element => {
+    return element !== null;
+  })
+    .join("+");
+}
+function conditions(shortcutMap) {
+  var _a, _b, _c, _d;
+  const focus = focusComposedPath();
+  if ((_a = shortcutMap.shortcut.conditions) === null || _a === void 0 ? void 0 : _a.focusInclude) {
+    return Array.from(shortcutMap.root.querySelectorAll((_b = shortcutMap.shortcut.conditions) === null || _b === void 0 ? void 0 : _b.focusInclude)).some((el) => focus.includes(el));
+  }
+  if ((_c = shortcutMap.shortcut.conditions) === null || _c === void 0 ? void 0 : _c.focusExclude) {
+    return !Array.from(shortcutMap.root.querySelectorAll((_d = shortcutMap.shortcut.conditions) === null || _d === void 0 ? void 0 : _d.focusExclude)).some((el) => focus.includes(el));
+  }
+  return true;
+}
+function querySelectorPlus(selector, root) {
+  const querySelectorDeep = (element, parts) => {
+    const shadow = element.shadowRoot;
+    const partList = parts.split(" ");
+    const partElement = shadow.querySelector(partList.map(partName => `[part~="${partName}"]`).join(""));
+    if (partElement) {
+      return partElement;
+    }
+    const exportPartElement = shadow.querySelector(partList.map(partName => `[exportparts*="${partName}"]`).join(""));
+    if (exportPartElement) {
+      const exportPartList = [];
+      const exportparts = exportPartElement.getAttribute("exportparts");
+      partList.forEach(partItem => {
+        const exportPartName = exportparts.match(`(?:([\\w-]+):)?(${partItem})`)[1];
+        if (exportPartName) {
+          exportPartList.push(exportPartName);
+        }
+      });
+      if (partList.length === exportPartList.length) {
+        return querySelectorDeep(exportPartElement, exportPartList.join(" "));
+      }
+    }
+    return null;
+  };
+  if (selector.includes("::part")) {
+    const selectorItems = selector.match("(.*)::part\\(([^)]+)\\)");
+    const entity = selectorItems[1];
+    const partName = selectorItems[2];
+    return querySelectorDeep(root.querySelector(entity), partName);
+  }
+  else {
+    return root.querySelector(selector);
+  }
+}
+
+const chShortcutsCss = ":host{display:contents}";
+
+const ChShortcuts$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.showShortcuts = false;
+    this.showKey = "F10";
+    this.windowClosedHandler = () => {
+      this.showShortcuts = false;
+    };
+  }
+  componentDidLoad() {
+    if (this.src) {
+      fetch(this.src).then(response => {
+        if (response.ok) {
+          response.json().then(json => {
+            const root = this.el.getRootNode();
+            loadShortcuts(this.src, root, json);
+          });
+        }
+      });
+    }
+  }
+  disconnectedCallback() {
+    unloadShortcuts(this.src);
+  }
+  windowKeyDownHandler(eventInfo) {
+    if (eventInfo.key === this.showKey) {
+      this.showShortcuts = !this.showShortcuts;
+      eventInfo.preventDefault();
+    }
+  }
+  renderShortcuts() {
+    return getShortcuts().map(shortcut => (h("ch-window", { container: shortcut.element, modal: false, hidden: false, closeOnEscape: true, closeOnOutsideClick: true, xAlign: "outside-end", yAlign: "inside-start", onWindowClosed: this.windowClosedHandler, exportparts: "mask:element" }, h("span", { part: "tooltip" }, shortcut.keyShortcuts))));
+  }
+  render() {
+    return h(Host, null, this.showShortcuts && this.renderShortcuts());
+  }
+  get el() { return this; }
+  static get style() { return chShortcutsCss; }
+}, [1, "ch-shortcuts", {
+    "src": [1],
+    "showKey": [1, "show-key"],
+    "showShortcuts": [32]
+  }, [[10, "keydown", "windowKeyDownHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-shortcuts", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-shortcuts":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChShortcuts$1);
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChShortcuts = ChShortcuts$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChShortcuts, defineCustomElement };

package/dist/components/form-textarea.js

@@ -6,7 +6,7 @@ import { e as exportParts } from './export-parts.js';
 import { d as defineCustomElement$2 } from './gxg-label2.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const formTextareaCss = "/*! 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 .form-element-wrapper{position:relative;width:100%}: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-left:2px}:host textarea{transition:height 200ms;width:100%;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 .textarea-wrapper{display:flex;gap:var(--spacing-comp-01);flex:1}:host textarea{resize:none;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)}:host textarea::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}:host textarea::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}:host textarea::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}:host textarea::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host textarea:focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host textarea--resize{resize:both}:host textarea[disabled]{background-color:var(--gray-01);color:var(--color-on-disabled)}:host textarea.textarea--error{border-color:var(--color-error-dark);background-color:var(--color-error-light);margin-bottom:0}:host textarea.textarea--error:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host textarea.textarea--warning{border-color:var(--color-warning-dark);background-color:var(--color-warning-light);margin-bottom:0}:host textarea.textarea--warning:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.shrink[single-line]) .textarea{box-sizing:border-box;height:24px !important;overflow:hidden}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large) label,:host(.large) textarea{font-size:var(--font-size-lg)}:host(.large) textarea{padding:var(--spacing-comp-01) var(--spacing-comp-02)}";
+const formTextareaCss = "/*! 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 .form-element-wrapper{position:relative;width:100%}: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-left:2px}:host textarea{transition:height 200ms;width:100%;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 .textarea-wrapper{display:flex;gap:var(--spacing-comp-01);flex:1}:host textarea{resize:none;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)}:host textarea::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}:host textarea::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}:host textarea::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}:host textarea::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host textarea:focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host textarea--resize{resize:both}:host textarea[disabled]{background-color:var(--gray-01);color:var(--color-on-disabled)}:host textarea.textarea--error{border-color:var(--color-error-dark);background-color:var(--color-error-light);margin-bottom:0}:host textarea.textarea--error:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host textarea.textarea--warning{border-color:var(--color-warning-dark);background-color:var(--color-warning-light);margin-bottom:0}:host textarea.textarea--warning:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.shrink[single-line]) .textarea{box-sizing:border-box;height:24px !important;overflow:hidden}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large) label,:host(.large) textarea{font-size:var(--font-size-lg);padding:var(--spacing-comp-01) var(--spacing-comp-02)}:host(.mercury){font-size:var(--mc-font-size-xs)}:host(.mercury) .textarea-wrapper{font-family:var(--font-family-primary);font-size:var(--mc-font-size-xs);color:var(--gray-03);line-height:var(--line-height-default);font-weight:var(--font-weight-regular);box-sizing:border-box;font-size:inherit;border:var(--border-width-sm) solid var(--gray-05);border-radius:var(--border-radius-sm);padding:var(--spacing-comp-02) var(--spacing-comp-03)}:host(.mercury) .textarea-wrapper:focus-within{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host(.mercury) textarea{border:none;padding:0;font-size:inherit;font-family:inherit;line-height:inherit;padding-inline-end:var(--spacing-comp-02);background-color:transparent}:host(.mercury) textarea:focus{outline:none}:host([grow].mercury) textarea{box-sizing:border-box;resize:none}";
 
 const GxgFormTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -15,6 +15,7 @@ const GxgFormTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.__attachShadow();
     this.input = createEvent(this, "input", 7);
     this.change = createEvent(this, "change", 7);
+    this.enter = createEvent(this, "enter", 7);
     this.parts = {
       textarea: "textarea",
     };
@@ -25,6 +26,10 @@ const GxgFormTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
      * The presence of this attribute forces the textarea to be as tall as an input text. When the textarea gets focus, it grows as tall as the "height: property.
      */
     this.singleLine = false;
+    /**
+     * It will show the textarea with a single line, and grow in height as the text overflows, or the user hits shift + enter. This property will be ignored if "shrink" is true
+     */
+    this.grow = false;
     /**
      * The presence of this attribute displays a tooltip message, instead of a block message below the control
      */
@@ -92,6 +97,17 @@ const GxgFormTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       const exportPartsResult = exportParts(part, this.parts);
       exportPartsResult.length && (this.exportparts = exportPartsResult);
     };
+    this.handleInput = (e) => {
+      e.stopPropagation();
+      const target = e.target;
+      this.value = target.value;
+      this.input.emit(this.value);
+      if (state.mercury && this.grow) {
+        const offset = this.textArea.offsetHeight - this.textArea.clientHeight;
+        this.textArea.style.height = "auto";
+        this.textArea.style.height = this.textArea.scrollHeight + offset + "px";
+      }
+    };
     this.focusHandler = () => {
       if (this.singleLine) {
         this.shrink = false;
@@ -102,6 +118,14 @@ const GxgFormTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         this.shrink = true;
       }
     };
+    this.keyDownHandler = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        this.enter.emit(this.textArea.value);
+        this.textArea.style.height = "auto";
+        this.value = "";
+      }
+    };
   }
   /*********************************
   METHODS
@@ -115,12 +139,6 @@ const GxgFormTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   updateTextareaValue() {
     this.value = this.textArea.value;
   }
-  handleInput(e) {
-    //formHandleValidation(this, e.target);
-    const target = e.target;
-    this.value = target.value;
-    this.input.emit(this.value);
-  }
   handleChange() {
     //formHandleValidation(this, e.target);
     this.change.emit(this.value);
@@ -129,22 +147,24 @@ const GxgFormTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return (h(Host, { role: "textbox", "aria-label": this.label, style: { maxWidth: this.maxWidth }, class: {
         textarea: true,
         large: state.large,
+        mercury: state.mercury,
         shrink: this.singleLine && this.shrink,
         [formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
         [formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
         [formClasses["VALIDATION_ERROR_CLASS"]]: this.validationStatus === "error",
         [formClasses["VALIDATION_SUCCESS_CLASS"]]: this.validationStatus === "success",
         [commonClassesNames["DISABLED_CLASS"]]: this.disabled,
-      }, exportParts: this.exportparts ? this.exportparts : null }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label, requiredLabel(this))) : null, h("div", { class: "textarea-wrapper" }, h("textarea", { ref: (el) => (this.textArea = el), class: {
+      }, exportParts: this.exportparts ? this.exportparts : null }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label, requiredLabel(this))) : null, h("div", { class: "textarea-wrapper", part: "textarea-wrapper" }, h("textarea", { ref: (el) => (this.textArea = el), class: {
         "form-element": true,
         textarea: true,
         "textarea--resize": this.resize,
-      }, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput.bind(this), onChange: this.handleChange.bind(this), value: this.value, rows: this.rows, required: this.required, style: { height: this.height }, part: this.parts.textarea, onFocus: this.focusHandler, onBlur: this.blurHandler }), this.toolTip ? formTooltipLogic(this, true) : null), !this.toolTip ? formMessageLogic(this) : null));
+      }, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onChange: this.handleChange.bind(this), value: this.value, rows: state.mercury && this.grow ? 1 : this.rows, required: this.required, style: { height: this.height, maxHeight: this.maxHeight }, part: "textarea", onFocus: this.focusHandler, onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }), this.toolTip ? formTooltipLogic(this, true) : null), !this.toolTip ? formMessageLogic(this) : null));
   }
   get el() { return this; }
   static get style() { return formTextareaCss; }
 }, [1, "gxg-form-textarea", {
     "singleLine": [516, "single-line"],
+    "grow": [516],
     "toolTip": [4, "tool-tip"],
     "error": [1028],
     "label": [513],
@@ -152,6 +172,7 @@ const GxgFormTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "labelWidth": [8, "label-width"],
     "centerLabel": [4, "center-label"],
     "maxWidth": [1, "max-width"],
+    "maxHeight": [1, "max-height"],
     "height": [1],
     "placeholder": [1],
     "value": [513],

package/dist/components/gx-ide-ai-assistant.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GxIdeAiAssistant extends Components.GxIdeAiAssistant, HTMLElement {}
+export const GxIdeAiAssistant: {
+  prototype: GxIdeAiAssistant;
+  new (): GxIdeAiAssistant;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;