@genexus/genexus-ide-ui 0.0.46 → 0.0.48

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

@@ -0,0 +1,157 @@
+// Define your constants
+const AUTHENTICATION_TYPE = ["GeneXus Account", "Local"];
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+import { formSubmitValidation } from "../../common/form-validation";
+import { renderFormItems } from "../../common/common";
+export class GxIdeShareKb {
+  constructor() {
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    this.createKBCallbackHandler = async () => {
+      const kbData = {
+        name: this.kbNameEl.value,
+        serverUrl: this.serverUrlEl.value,
+        authenticationType: this.authTypeEl.value,
+        user: this.userNameEl.value,
+        password: this.passwordEl.value
+      };
+      const createCallbackPromise = this.createKBCallback(kbData);
+      createCallbackPromise.then(formSubmitResult => {
+        formSubmitValidation(formSubmitResult, this);
+      });
+    };
+    this.kbName = undefined;
+    this.serverUrls = undefined;
+    this.enableCustomServer = undefined;
+    this.createKBCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  // 9.LOCAL METHODS //
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", { footerJustify: "end" }, h("main", { class: "main grid" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.main.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "server-url-label", noMargin: true }, this._componentLocale.main.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, labelPosition: "start", placeholder: "https://myexampleserver.com", strict: true, "max-width": "100%", value: this.serverUrls[0], ref: (el) => (this.serverUrlEl = el), part: "server-url", class: "server-url-input" }, renderFormItems("gxg-combo-box-item", this.serverUrls.map((item) => ({
+      id: item,
+      label: item
+    })), "server-url")), h("gxg-combo-box", { labelPosition: "start", placeholder: "https://myexampleserver.com", "max-width": "100%", value: AUTHENTICATION_TYPE[0], ref: (el) => (this.authTypeEl = el), part: "auth-type", class: "auth-type-input" }, renderFormItems("gxg-combo-box-item", AUTHENTICATION_TYPE.map((item) => ({
+      id: item,
+      label: item
+    })), "auth-type")), h("gxg-label", { labelPosition: "start", class: "user-name-label", noMargin: true }, this._componentLocale.main.userName), h("gxg-form-text", { labelPosition: "start", placeholder: "My User", "max-width": "100%", ref: (el) => (this.userNameEl = el), part: "user-name", class: "user-name-input" }), h("gxg-label", { labelPosition: "start", class: "password-label", noMargin: true }, this._componentLocale.main.password), h("gxg-form-text", { labelPosition: "start", password: true, "max-width": "100%", ref: (el) => (this.passwordEl = el), part: "password", class: "password-input" })), h("gxg-button", { slot: "footer", type: "primary-text-only", onClick: this.createKBCallbackHandler }, this._componentLocale.footer.shareBtn)))));
+  }
+  static get is() { return "gx-ide-share-kb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["share-kb.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["share-kb.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/share-kb"]; }
+  static get properties() {
+    return {
+      "kbName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the kb"
+        },
+        "attribute": "kb-name",
+        "reflect": false
+      },
+      "serverUrls": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Urls array of cataloged servers to be shown on combo"
+        }
+      },
+      "enableCustomServer": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if user can introduce server url manually"
+        },
+        "attribute": "enable-custom-server",
+        "reflect": false
+      },
+      "createKBCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CreateKBCallback",
+          "resolved": "(data: ShareKBData) => Promise<FormSubmitResult>",
+          "references": {
+            "CreateKBCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when Share button is pressed"
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentDidRenderEvent",
+        "name": "componentDidRenderEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "description",
+              "text": "Gets fired when the component has rendered for the first time."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/components/combo-box.js

@@ -117,7 +117,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.inputTextValue = "";
     this.listIsOpen = false;
     this.inputTextIcon = undefined;
-    this.inputTextIconPosition = null;
     this.noMatch = false;
     this.lastAllowedValue = undefined;
     this.slottedContent = null;
@@ -337,6 +336,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         const item = this.getItemByValue(this.value);
         if (item) {
           this.text = item.innerText;
+          this.inputTextIcon = item.icon;
           item.selected = true;
         }
         else {
@@ -379,7 +379,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.clearIcon = () => {
       if (!this.disabled) {
         this.inputTextIcon = null;
-        this.inputTextIconPosition = null;
       }
     };
   }
@@ -388,16 +387,13 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.valueBeforeDisabled = this.value;
       this.textBeforeDisabled = this.text;
       this.iconBeforeDisabled = this.inputTextIcon;
-      this.iconPositionBeforeDisabled = this.inputTextIconPosition;
       this.value = null;
       this.inputTextIcon = null;
-      this.inputTextIconPosition = null;
     }
     else {
       this.value = this.valueBeforeDisabled;
       this.text = this.textBeforeDisabled;
       this.inputTextIcon = this.iconBeforeDisabled;
-      this.inputTextIconPosition = this.iconPositionBeforeDisabled;
     }
   }
   componentDidUpdate() {
@@ -534,11 +530,9 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   setIcon(icon) {
     if (icon) {
       this.inputTextIcon = icon;
-      this.inputTextIconPosition = "start";
     }
     else {
       this.inputTextIcon = null;
-      this.inputTextIconPosition = null;
     }
   }
   focus() {
@@ -608,7 +602,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         large: state.large,
       }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
         "main-container": true,
-      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: this.fixedIcon ? "start" : this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
+      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: "start", readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
         "items-container": true,
         "items-container--show": this.listIsOpen,
         "items-container--no-match": this.noMatch,
@@ -652,7 +646,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "inputTextValue": [32],
     "listIsOpen": [32],
     "inputTextIcon": [32],
-    "inputTextIconPosition": [32],
     "noMatch": [32],
     "lastAllowedValue": [32],
     "slottedContent": [32],

package/dist/components/form-text.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './icon2.js';
 import { d as defineCustomElement$2 } from './gxg-label2.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-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:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--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)}: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 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-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);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(.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 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:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--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)}: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 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-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -78,6 +78,14 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * 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 )
      */
@@ -131,6 +139,38 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const exportPartsResult = 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 = "Select a file";
+      }
+    };
+    this.handleClick = () => {
+      if (this.type === "file") {
+        this.fileInputEl.click();
+      }
+    };
+    this.handleKeyDown = (e) => {
+      if (e.key === "Enter" && this.type === "file") {
+        this.textInput.click();
+      }
+    };
+    this.inputFileChangedHandler = (e) => {
+      const selectedFiles = e.target.files;
+      this.fileList = selectedFiles;
+      if (selectedFiles.length > 1) {
+        this.value = `${selectedFiles.length} files chosen`;
+      }
+      else {
+        this.value = selectedFiles[0].name;
+      }
+    };
+    this.renderInputFile = () => {
+      if (this.type === "file") {
+        return (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) {
@@ -165,6 +205,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.textInput.select();
   }
   componentWillLoad() {
+    this.evaluateIcon();
     this.attachExportParts();
   }
   /*********************************
@@ -189,6 +230,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   handleInput(e) {
     e.stopPropagation();
+    console.log(e);
     const target = e.target;
     this.value = target.value;
     this.input.emit(target.value);
@@ -207,6 +249,10 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   clearButtonFunc() {
     this.clearButtonClicked.emit({ prevValue: this.value });
     this.value = "";
+    if (this.type === "file") {
+      this.fileList = null;
+      this.fileInputEl.value = "";
+    }
   }
   updateGhostSpan() {
     if (this.minimal) {
@@ -317,7 +363,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return "small";
     }
   }
-  type() {
+  evaluateType() {
     if (this.password) {
       return "password";
     }
@@ -333,6 +379,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         rtl: this.rtl,
         large: state.large,
         borderless: this.borderless,
+        file: this.type === "file",
         "has-icon": this.icon,
         [formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
         [formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
@@ -344,7 +391,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       } }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label, requiredLabel(this))) : (""), h("div", { class: {
         "inner-wrapper": true,
         "clear-button": this.clearButton === true,
-      } }, h("input", { part: this.parts.input, type: this.type(), value: this.value, class: {
+      } }, h("input", { part: this.parts.input, type: this.evaluateType(), value: this.value, class: {
         input: true,
         "form-element": true,
         "cursor-inside": this.cursorInside,
@@ -352,7 +399,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "custom-icon": this.icon,
         "custom-icon--end": this.iconPosition === "end",
         "input--borderless": this.borderless,
-      }, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly , onInput: this.handleInput.bind(this), 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 ? (h("gxg-icon", { class: "clear-button", type: "gemini-tools/close", size: this.iconSize(), color: "onbackground", onClick: this.clearButtonFunc.bind(this) })) : null, this.labelPosition === "start" ? formMessageLogic(this) : null)), this.labelPosition === "above" ? formMessageLogic(this) : null));
+      }, 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 ? (h("gxg-icon", { class: "clear-button", type: "gemini-tools/close", size: this.iconSize(), color: "onbackground", onClick: this.clearButtonFunc.bind(this) })) : null, this.labelPosition === "start" ? formMessageLogic(this) : null, this.renderInputFile())), this.labelPosition === "above" ? formMessageLogic(this) : null));
   }
   static get delegatesFocus() { return true; }
   get el() { return this; }
@@ -379,6 +426,10 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "required": [516],
     "centerLabel": [4, "center-label"],
     "labelWidth": [8, "label-width"],
+    "type": [1],
+    "multiple": [4],
+    "fileList": [1040],
+    "acceptFile": [1, "accept-file"],
     "preventValueChangedEmit": [4, "prevent-value-changed-emit"],
     "preventValueChangeOnDisabled": [4, "prevent-value-change-on-disabled"],
     "validationStatus": [1025, "validation-status"],

package/dist/components/gx-ide-share-kb.d.ts

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

package/dist/components/gx-ide-share-kb.js

@@ -0,0 +1,152 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { L as Locale } from './locale.js';
+import { f as formSubmitValidation } from './form-validation.js';
+import { r as renderFormItems } from './common.js';
+import { d as defineCustomElement$d } from './icon.js';
+import { d as defineCustomElement$c } from './button.js';
+import { d as defineCustomElement$b } from './combo-box.js';
+import { d as defineCustomElement$a } from './combo-box-item.js';
+import { d as defineCustomElement$9 } from './container2.js';
+import { d as defineCustomElement$8 } from './form-checkbox.js';
+import { d as defineCustomElement$7 } from './form-radio.js';
+import { d as defineCustomElement$6 } from './form-text.js';
+import { d as defineCustomElement$5 } from './icon2.js';
+import { d as defineCustomElement$4 } from './gxg-label2.js';
+import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const shareKbCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:999;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block}.main{grid-template-columns:auto 1fr;grid-template-areas:\"kb-label kb-input \" \"server-label server-input\" \"auth-type-input auth-type-input\" \"user-name-label user-name-input\" \"password-label password-input\"}.main .kb-input{grid-area:kb-input}.main .kb-name-label{grid-area:kb-label}.main .server-url-input{grid-area:server-input}.main .server-url-label{grid-area:server-label}.main .auth-type-input{grid-area:auth-type-input}.main .user-name-input{grid-area:user-name-input}.main .user-name-label{grid-area:user-name-label}.main .password-input{grid-area:password-input}.main .password-label{grid-area:password-label}";
+
+// Define your constants
+const AUTHENTICATION_TYPE = ["GeneXus Account", "Local"];
+const GxIdeShareKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    this.createKBCallbackHandler = async () => {
+      const kbData = {
+        name: this.kbNameEl.value,
+        serverUrl: this.serverUrlEl.value,
+        authenticationType: this.authTypeEl.value,
+        user: this.userNameEl.value,
+        password: this.passwordEl.value
+      };
+      const createCallbackPromise = this.createKBCallback(kbData);
+      createCallbackPromise.then(formSubmitResult => {
+        formSubmitValidation(formSubmitResult, this);
+      });
+    };
+    this.kbName = undefined;
+    this.serverUrls = undefined;
+    this.enableCustomServer = undefined;
+    this.createKBCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  // 9.LOCAL METHODS //
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", { footerJustify: "end" }, h("main", { class: "main grid" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.main.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "server-url-label", noMargin: true }, this._componentLocale.main.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, labelPosition: "start", placeholder: "https://myexampleserver.com", strict: true, "max-width": "100%", value: this.serverUrls[0], ref: (el) => (this.serverUrlEl = el), part: "server-url", class: "server-url-input" }, renderFormItems("gxg-combo-box-item", this.serverUrls.map((item) => ({
+      id: item,
+      label: item
+    })), "server-url")), h("gxg-combo-box", { labelPosition: "start", placeholder: "https://myexampleserver.com", "max-width": "100%", value: AUTHENTICATION_TYPE[0], ref: (el) => (this.authTypeEl = el), part: "auth-type", class: "auth-type-input" }, renderFormItems("gxg-combo-box-item", AUTHENTICATION_TYPE.map((item) => ({
+      id: item,
+      label: item
+    })), "auth-type")), h("gxg-label", { labelPosition: "start", class: "user-name-label", noMargin: true }, this._componentLocale.main.userName), h("gxg-form-text", { labelPosition: "start", placeholder: "My User", "max-width": "100%", ref: (el) => (this.userNameEl = el), part: "user-name", class: "user-name-input" }), h("gxg-label", { labelPosition: "start", class: "password-label", noMargin: true }, this._componentLocale.main.password), h("gxg-form-text", { labelPosition: "start", password: true, "max-width": "100%", ref: (el) => (this.passwordEl = el), part: "password", class: "password-input" })), h("gxg-button", { slot: "footer", type: "primary-text-only", onClick: this.createKBCallbackHandler }, this._componentLocale.footer.shareBtn)))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/share-kb"]; }
+  get el() { return this; }
+  static get style() { return shareKbCss; }
+}, [1, "gx-ide-share-kb", {
+    "kbName": [1, "kb-name"],
+    "serverUrls": [16],
+    "enableCustomServer": [4, "enable-custom-server"],
+    "createKBCallback": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-share-kb", "ch-icon", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-container", "gxg-form-checkbox", "gxg-form-radio", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-title", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-share-kb":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeShareKb$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "gxg-combo-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "gxg-combo-box-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "gxg-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "gxg-form-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-form-radio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "gxg-form-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxIdeShareKb = GxIdeShareKb$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeShareKb, defineCustomElement };