@genexus/genexus-ide-ui 0.0.47 → 0.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/cjs/ch-icon.cjs.entry.js +116 -0
  2. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  3. package/dist/cjs/gx-ide-share-kb.cjs.entry.js +61 -0
  4. package/dist/cjs/{gxg-button.cjs.entry.js → gxg-button_2.cjs.entry.js} +61 -0
  5. package/dist/cjs/gxg-form-text.cjs.entry.js +51 -4
  6. package/dist/cjs/gxg-ide-loader.cjs.entry.js +79 -0
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/collection-manifest.json +2 -0
  9. package/dist/collection/components/share-kb/gx-ide-assets/share-kb/langs/share-kb.lang.en.json +12 -0
  10. package/dist/collection/components/share-kb/gx-ide-assets/share-kb/langs/share-kb.lang.ja.json +3 -0
  11. package/dist/collection/components/share-kb/gx-ide-assets/share-kb/langs/share-kb.lang.zh.json +3 -0
  12. package/dist/collection/components/share-kb/share-kb.css +183 -0
  13. package/dist/collection/components/share-kb/share-kb.js +157 -0
  14. package/dist/components/form-text.js +55 -4
  15. package/dist/components/gx-ide-share-kb.d.ts +11 -0
  16. package/dist/components/gx-ide-share-kb.js +152 -0
  17. package/dist/components/gxg-ide-loader.js +117 -0
  18. package/dist/components/index.d.ts +1 -0
  19. package/dist/components/index.js +2 -0
  20. package/dist/esm/ch-icon.entry.js +112 -0
  21. package/dist/esm/genexus-ide-ui.js +1 -1
  22. package/dist/esm/gx-ide-share-kb.entry.js +57 -0
  23. package/dist/esm/{gxg-button.entry.js → gxg-button_2.entry.js} +62 -2
  24. package/dist/esm/gxg-form-text.entry.js +51 -4
  25. package/dist/esm/gxg-ide-loader.entry.js +75 -0
  26. package/dist/esm/loader.js +1 -1
  27. package/dist/genexus-ide-ui/genexus-ide-ui.css +1 -1
  28. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  29. package/dist/genexus-ide-ui/gx-ide-assets/share-kb/langs/share-kb.lang.en.json +12 -0
  30. package/dist/genexus-ide-ui/gx-ide-assets/share-kb/langs/share-kb.lang.ja.json +3 -0
  31. package/dist/genexus-ide-ui/gx-ide-assets/share-kb/langs/share-kb.lang.zh.json +3 -0
  32. package/dist/genexus-ide-ui/p-510330c9.entry.js +1 -0
  33. package/dist/genexus-ide-ui/p-5ad757f4.entry.js +1 -0
  34. package/dist/genexus-ide-ui/p-6e232a6f.entry.js +1 -0
  35. package/dist/genexus-ide-ui/p-9943e7db.entry.js +1 -0
  36. package/dist/genexus-ide-ui/p-d8d00971.entry.js +1 -0
  37. package/dist/node_modules/@genexus/gemini/dist/collection/components/form-text/form-text.css +8 -0
  38. package/dist/node_modules/@genexus/gemini/dist/collection/components/ide-loader/ide-loader.css +89 -0
  39. package/dist/types/common/types.d.ts +1 -0
  40. package/dist/types/components/create-kb-from-server/create-kb-from-server.d.ts +2 -3
  41. package/dist/types/components/share-kb/share-kb.d.ts +46 -0
  42. package/dist/types/components.d.ts +54 -0
  43. package/package.json +3 -3
  44. package/dist/cjs/ch-icon_2.cjs.entry.js +0 -177
  45. package/dist/esm/ch-icon_2.entry.js +0 -172
  46. package/dist/genexus-ide-ui/p-54d15f4d.entry.js +0 -1
  47. package/dist/genexus-ide-ui/p-98c6b820.entry.js +0 -1
  48. package/dist/genexus-ide-ui/p-a708db45.entry.js +0 -1
@@ -0,0 +1,12 @@
1
+ {
2
+ "componentName": "Component Title",
3
+ "main": {
4
+ "kbName": "Knowledge Base:",
5
+ "serverUrl": "GXServer URL:",
6
+ "userName": "Username:",
7
+ "password": "Password:"
8
+ },
9
+ "footer": {
10
+ "shareBtn": "Share KB"
11
+ }
12
+ }
@@ -0,0 +1,3 @@
1
+ {
2
+ "presentation": "「こんにちは、私の名前は {0} です。オレゴンに住んでいます。」"
3
+ }
@@ -0,0 +1,3 @@
1
+ {
2
+ "presentation": "你好,我的名字是 {0},我住在俄勒冈州。"
3
+ }
@@ -0,0 +1,183 @@
1
+ /*Gemini*/
2
+ /*Gx Ide*/
3
+ /* Helper Classes */
4
+ .gxi-hidden {
5
+ display: none !important;
6
+ }
7
+
8
+ .gxi-full-height {
9
+ height: 100%;
10
+ }
11
+
12
+ .gxi-overflow-auto {
13
+ overflow: auto;
14
+ }
15
+
16
+ .gxi-display-flex {
17
+ display: flex;
18
+ }
19
+
20
+ .align-start {
21
+ display: flex;
22
+ align-items: start;
23
+ }
24
+
25
+ .align-center {
26
+ display: flex;
27
+ align-items: center;
28
+ }
29
+
30
+ .align-end {
31
+ display: flex;
32
+ align-items: end;
33
+ }
34
+
35
+ /* Grids */
36
+ .grid {
37
+ display: grid;
38
+ grid-row-gap: var(--gx-ide-grid-row-gap);
39
+ grid-column-gap: var(--gx-ide-grid-column-gap);
40
+ grid-template-rows: auto;
41
+ }
42
+
43
+ ch-grid-cell {
44
+ display: flex;
45
+ }
46
+
47
+ ch-grid {
48
+ overflow: auto;
49
+ height: 100%;
50
+ }
51
+
52
+ ch-grid-column {
53
+ /*to be removed when this works inside a component with shadow: true*/
54
+ z-index: 999;
55
+ border-bottom: 1px solid var(--gray-01);
56
+ }
57
+
58
+ /*Gxg Tabs*/
59
+ gxg-tabs {
60
+ box-shadow: none;
61
+ }
62
+
63
+ /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
64
+ :host(.gx-ide-component) {
65
+ box-shadow: var(--box-shadow-01) !important;
66
+ height: 100% !important;
67
+ display: flex !important;
68
+ flex-direction: column !important;
69
+ }
70
+
71
+ /*stylize the top bar*/
72
+ :host(:focus-within) gx-ide-top-bar::part(wrapper) {
73
+ background-color: var(--color-secondary-enabled);
74
+ }
75
+
76
+ /* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
77
+ .gx-ide-main-wrapper {
78
+ color: var(--gx-ide-component-text-color);
79
+ font-weight: var(--font-weight-regular);
80
+ font-size: var(--font-size-lg);
81
+ line-height: 1.6em;
82
+ height: 100%;
83
+ background-color: var(--gx-ide-component-background-color);
84
+ display: flex;
85
+ flex-direction: column;
86
+ flex-grow: 1;
87
+ }
88
+
89
+ /*This is the main element. This is the one that take the remaining vertical space*/
90
+ .gx-ide-main {
91
+ flex-grow: 1;
92
+ overflow-y: auto;
93
+ /* Track */
94
+ /* Handle */
95
+ /* Handle on hover */
96
+ }
97
+ .gx-ide-main::-webkit-scrollbar {
98
+ width: 6px;
99
+ height: 6px;
100
+ }
101
+ .gx-ide-main::-webkit-scrollbar-track {
102
+ background-color: var(--gray-02);
103
+ border-radius: 10px;
104
+ }
105
+ .gx-ide-main::-webkit-scrollbar-thumb {
106
+ background: var(--gray-05);
107
+ border-radius: 10px;
108
+ }
109
+ .gx-ide-main::-webkit-scrollbar-thumb:hover {
110
+ background: var(--gray-04);
111
+ cursor: pointer;
112
+ }
113
+ .gx-ide-main .gxg-scroll {
114
+ display: block;
115
+ overflow-y: auto;
116
+ padding-inline-end: 2px;
117
+ }
118
+
119
+ .gx-ide-overflow {
120
+ overflow-y: auto;
121
+ /* Track */
122
+ /* Handle */
123
+ /* Handle on hover */
124
+ }
125
+ .gx-ide-overflow::-webkit-scrollbar {
126
+ width: 6px;
127
+ height: 6px;
128
+ }
129
+ .gx-ide-overflow::-webkit-scrollbar-track {
130
+ background-color: var(--gray-02);
131
+ border-radius: 10px;
132
+ }
133
+ .gx-ide-overflow::-webkit-scrollbar-thumb {
134
+ background: var(--gray-05);
135
+ border-radius: 10px;
136
+ }
137
+ .gx-ide-overflow::-webkit-scrollbar-thumb:hover {
138
+ background: var(--gray-04);
139
+ cursor: pointer;
140
+ }
141
+ .gx-ide-overflow .gxg-scroll {
142
+ display: block;
143
+ overflow-y: auto;
144
+ padding-inline-end: 2px;
145
+ }
146
+
147
+ /*Gemini*/
148
+ /*Gx Ide*/
149
+ :host {
150
+ display: block;
151
+ }
152
+
153
+ .main {
154
+ grid-template-columns: auto 1fr;
155
+ 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";
156
+ }
157
+ .main .kb-input {
158
+ grid-area: kb-input;
159
+ }
160
+ .main .kb-name-label {
161
+ grid-area: kb-label;
162
+ }
163
+ .main .server-url-input {
164
+ grid-area: server-input;
165
+ }
166
+ .main .server-url-label {
167
+ grid-area: server-label;
168
+ }
169
+ .main .auth-type-input {
170
+ grid-area: auth-type-input;
171
+ }
172
+ .main .user-name-input {
173
+ grid-area: user-name-input;
174
+ }
175
+ .main .user-name-label {
176
+ grid-area: user-name-label;
177
+ }
178
+ .main .password-input {
179
+ grid-area: password-input;
180
+ }
181
+ .main .password-label {
182
+ grid-area: password-label;
183
+ }
@@ -0,0 +1,157 @@
1
+ // Define your constants
2
+ const AUTHENTICATION_TYPE = ["GeneXus Account", "Local"];
3
+ /* STENCIL IMPORTS */
4
+ import { Host, h } from "@stencil/core";
5
+ /* OTHER LIBRARIES IMPORTS */
6
+ /* CUSTOM IMPORTS */
7
+ import { Locale } from "../../common/locale";
8
+ import { formSubmitValidation } from "../../common/form-validation";
9
+ import { renderFormItems } from "../../common/common";
10
+ export class GxIdeShareKb {
11
+ constructor() {
12
+ // 7.LISTENERS //
13
+ // 8.PUBLIC METHODS API //
14
+ this.createKBCallbackHandler = async () => {
15
+ const kbData = {
16
+ name: this.kbNameEl.value,
17
+ serverUrl: this.serverUrlEl.value,
18
+ authenticationType: this.authTypeEl.value,
19
+ user: this.userNameEl.value,
20
+ password: this.passwordEl.value
21
+ };
22
+ const createCallbackPromise = this.createKBCallback(kbData);
23
+ createCallbackPromise.then(formSubmitResult => {
24
+ formSubmitValidation(formSubmitResult, this);
25
+ });
26
+ };
27
+ this.kbName = undefined;
28
+ this.serverUrls = undefined;
29
+ this.enableCustomServer = undefined;
30
+ this.createKBCallback = undefined;
31
+ }
32
+ // 6.COMPONENT LIFECYCLE METHODS //
33
+ async componentWillLoad() {
34
+ this._componentLocale = await Locale.getComponentStrings(this.el);
35
+ }
36
+ componentDidRender() {
37
+ this.componentDidRenderEvent.emit(this._componentLocale.componentName);
38
+ }
39
+ // 9.LOCAL METHODS //
40
+ // 10.RENDER() FUNCTION //
41
+ render() {
42
+ 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) => ({
43
+ id: item,
44
+ label: item
45
+ })), "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) => ({
46
+ id: item,
47
+ label: item
48
+ })), "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)))));
49
+ }
50
+ static get is() { return "gx-ide-share-kb"; }
51
+ static get encapsulation() { return "shadow"; }
52
+ static get originalStyleUrls() {
53
+ return {
54
+ "$": ["share-kb.scss"]
55
+ };
56
+ }
57
+ static get styleUrls() {
58
+ return {
59
+ "$": ["share-kb.css"]
60
+ };
61
+ }
62
+ static get assetsDirs() { return ["gx-ide-assets/share-kb"]; }
63
+ static get properties() {
64
+ return {
65
+ "kbName": {
66
+ "type": "string",
67
+ "mutable": false,
68
+ "complexType": {
69
+ "original": "string",
70
+ "resolved": "string",
71
+ "references": {}
72
+ },
73
+ "required": true,
74
+ "optional": false,
75
+ "docs": {
76
+ "tags": [],
77
+ "text": "The name of the kb"
78
+ },
79
+ "attribute": "kb-name",
80
+ "reflect": false
81
+ },
82
+ "serverUrls": {
83
+ "type": "unknown",
84
+ "mutable": false,
85
+ "complexType": {
86
+ "original": "string[]",
87
+ "resolved": "string[]",
88
+ "references": {}
89
+ },
90
+ "required": true,
91
+ "optional": false,
92
+ "docs": {
93
+ "tags": [],
94
+ "text": "Urls array of cataloged servers to be shown on combo"
95
+ }
96
+ },
97
+ "enableCustomServer": {
98
+ "type": "boolean",
99
+ "mutable": false,
100
+ "complexType": {
101
+ "original": "boolean",
102
+ "resolved": "boolean",
103
+ "references": {}
104
+ },
105
+ "required": false,
106
+ "optional": false,
107
+ "docs": {
108
+ "tags": [],
109
+ "text": "True if user can introduce server url manually"
110
+ },
111
+ "attribute": "enable-custom-server",
112
+ "reflect": false
113
+ },
114
+ "createKBCallback": {
115
+ "type": "unknown",
116
+ "mutable": false,
117
+ "complexType": {
118
+ "original": "CreateKBCallback",
119
+ "resolved": "(data: ShareKBData) => Promise<FormSubmitResult>",
120
+ "references": {
121
+ "CreateKBCallback": {
122
+ "location": "local"
123
+ }
124
+ }
125
+ },
126
+ "required": true,
127
+ "optional": false,
128
+ "docs": {
129
+ "tags": [],
130
+ "text": "Callback invoked when Share button is pressed"
131
+ }
132
+ }
133
+ };
134
+ }
135
+ static get events() {
136
+ return [{
137
+ "method": "componentDidRenderEvent",
138
+ "name": "componentDidRenderEvent",
139
+ "bubbles": true,
140
+ "cancelable": true,
141
+ "composed": true,
142
+ "docs": {
143
+ "tags": [{
144
+ "name": "description",
145
+ "text": "Gets fired when the component has rendered for the first time."
146
+ }],
147
+ "text": ""
148
+ },
149
+ "complexType": {
150
+ "original": "string",
151
+ "resolved": "string",
152
+ "references": {}
153
+ }
154
+ }];
155
+ }
156
+ static get elementRef() { return "el"; }
157
+ }
@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './icon2.js';
8
8
  import { d as defineCustomElement$2 } from './gxg-label2.js';
9
9
  import { d as defineCustomElement$1 } from './tooltip.js';
10
10
 
11
- 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}";
11
+ 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}";
12
12
 
13
13
  const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
14
14
  constructor() {
@@ -78,6 +78,14 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
78
78
  * Centers the label
79
79
  */
80
80
  this.centerLabel = false;
81
+ /**
82
+ * The type of input
83
+ */
84
+ this.type = "text";
85
+ /**
86
+ * Allows multiple files if type is "file"
87
+ */
88
+ this.multiple = false;
81
89
  /**
82
90
  * Prevent "valueChanged" event from being emitted (helpful for cases where the event causes a conflict )
83
91
  */
@@ -131,6 +139,38 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
131
139
  const exportPartsResult = exportParts(part, this.parts);
132
140
  exportPartsResult.length && (this.exportparts = exportPartsResult);
133
141
  };
142
+ this.evaluateIcon = () => {
143
+ if (this.type === "file") {
144
+ this.icon = "controls/file-upload";
145
+ this.iconPosition = "start";
146
+ this.placeholder = "Select a file";
147
+ }
148
+ };
149
+ this.handleClick = () => {
150
+ if (this.type === "file") {
151
+ this.fileInputEl.click();
152
+ }
153
+ };
154
+ this.handleKeyDown = (e) => {
155
+ if (e.key === "Enter" && this.type === "file") {
156
+ this.textInput.click();
157
+ }
158
+ };
159
+ this.inputFileChangedHandler = (e) => {
160
+ const selectedFiles = e.target.files;
161
+ this.fileList = selectedFiles;
162
+ if (selectedFiles.length > 1) {
163
+ this.value = `${selectedFiles.length} files chosen`;
164
+ }
165
+ else {
166
+ this.value = selectedFiles[0].name;
167
+ }
168
+ };
169
+ this.renderInputFile = () => {
170
+ if (this.type === "file") {
171
+ 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" } }));
172
+ }
173
+ };
134
174
  }
135
175
  watchHandler(newValue) {
136
176
  if (!this.preventValueChangedEmit && this.debounce) {
@@ -165,6 +205,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
165
205
  this.textInput.select();
166
206
  }
167
207
  componentWillLoad() {
208
+ this.evaluateIcon();
168
209
  this.attachExportParts();
169
210
  }
170
211
  /*********************************
@@ -189,6 +230,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
189
230
  }
190
231
  handleInput(e) {
191
232
  e.stopPropagation();
233
+ console.log(e);
192
234
  const target = e.target;
193
235
  this.value = target.value;
194
236
  this.input.emit(target.value);
@@ -207,6 +249,10 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
207
249
  clearButtonFunc() {
208
250
  this.clearButtonClicked.emit({ prevValue: this.value });
209
251
  this.value = "";
252
+ if (this.type === "file") {
253
+ this.fileList = null;
254
+ this.fileInputEl.value = "";
255
+ }
210
256
  }
211
257
  updateGhostSpan() {
212
258
  if (this.minimal) {
@@ -317,7 +363,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
317
363
  return "small";
318
364
  }
319
365
  }
320
- type() {
366
+ evaluateType() {
321
367
  if (this.password) {
322
368
  return "password";
323
369
  }
@@ -333,6 +379,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
333
379
  rtl: this.rtl,
334
380
  large: state.large,
335
381
  borderless: this.borderless,
382
+ file: this.type === "file",
336
383
  "has-icon": this.icon,
337
384
  [formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
338
385
  [formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
@@ -344,7 +391,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
344
391
  } }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label, requiredLabel(this))) : (""), h("div", { class: {
345
392
  "inner-wrapper": true,
346
393
  "clear-button": this.clearButton === true,
347
- } }, h("input", { part: this.parts.input, type: this.type(), value: this.value, class: {
394
+ } }, h("input", { part: this.parts.input, type: this.evaluateType(), value: this.value, class: {
348
395
  input: true,
349
396
  "form-element": true,
350
397
  "cursor-inside": this.cursorInside,
@@ -352,7 +399,7 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
352
399
  "custom-icon": this.icon,
353
400
  "custom-icon--end": this.iconPosition === "end",
354
401
  "input--borderless": this.borderless,
355
- }, 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));
402
+ }, 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));
356
403
  }
357
404
  static get delegatesFocus() { return true; }
358
405
  get el() { return this; }
@@ -379,6 +426,10 @@ const GxgFormText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
379
426
  "required": [516],
380
427
  "centerLabel": [4, "center-label"],
381
428
  "labelWidth": [8, "label-width"],
429
+ "type": [1],
430
+ "multiple": [4],
431
+ "fileList": [1040],
432
+ "acceptFile": [1, "accept-file"],
382
433
  "preventValueChangedEmit": [4, "prevent-value-changed-emit"],
383
434
  "preventValueChangeOnDisabled": [4, "prevent-value-change-on-disabled"],
384
435
  "validationStatus": [1025, "validation-status"],
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface GxIdeShareKb extends Components.GxIdeShareKb, HTMLElement {}
4
+ export const GxIdeShareKb: {
5
+ prototype: GxIdeShareKb;
6
+ new (): GxIdeShareKb;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;