@genexus/genexus-ide-ui 1.1.30 → 1.1.31

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 (77) hide show
  1. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  2. package/dist/cjs/gx-ide-details-acknowledgements.cjs.entry.js +132 -0
  3. package/dist/cjs/gx-ide-details-acknowledgements.cjs.entry.js.map +1 -0
  4. package/dist/cjs/gx-ide-starting-template.cjs.entry.js +103 -0
  5. package/dist/cjs/gx-ide-starting-template.cjs.entry.js.map +1 -0
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/collection/collection-manifest.json +2 -1
  8. package/dist/collection/components/_starting-template/gx-ide-assets/starting-template/langs/starting-template.lang.en.json +11 -0
  9. package/dist/collection/components/_starting-template/gx-ide-assets/starting-template/langs/starting-template.lang.ja.json +11 -0
  10. package/dist/collection/components/_starting-template/gx-ide-assets/starting-template/langs/starting-template.lang.zh.json +11 -0
  11. package/dist/collection/components/_starting-template/starting-template.css +17 -0
  12. package/dist/collection/components/_starting-template/starting-template.js +199 -0
  13. package/dist/collection/components/_starting-template/starting-template.js.map +1 -0
  14. package/dist/collection/components/details-acknowledgements/details-acknowledgements.css +162 -0
  15. package/dist/collection/components/details-acknowledgements/details-acknowledgements.js +220 -0
  16. package/dist/collection/components/details-acknowledgements/details-acknowledgements.js.map +1 -0
  17. package/dist/collection/components/details-acknowledgements/gx-ide-assets/details-acknowledgements/images/bottom-end.svg +46 -0
  18. package/dist/collection/components/details-acknowledgements/gx-ide-assets/details-acknowledgements/images/bottom-start.svg +24 -0
  19. package/dist/collection/components/details-acknowledgements/gx-ide-assets/details-acknowledgements/images/genexus-next-logo.svg +3 -0
  20. package/dist/collection/components/details-acknowledgements/gx-ide-assets/details-acknowledgements/images/top-start.svg +36 -0
  21. package/dist/collection/components/details-acknowledgements/gx-ide-assets/details-acknowledgements/langs/details-acknowledgements.lang.en.json +14 -0
  22. package/dist/collection/components/details-acknowledgements/gx-ide-assets/details-acknowledgements/langs/details-acknowledgements.lang.ja.json +14 -0
  23. package/dist/collection/components/details-acknowledgements/gx-ide-assets/details-acknowledgements/langs/details-acknowledgements.lang.zh.json +14 -0
  24. package/dist/collection/testing/locale.e2e.js +2 -1
  25. package/dist/collection/testing/locale.e2e.js.map +1 -1
  26. package/dist/components/gx-ide-details-acknowledgements.d.ts +11 -0
  27. package/dist/components/gx-ide-details-acknowledgements.js +152 -0
  28. package/dist/components/gx-ide-details-acknowledgements.js.map +1 -0
  29. package/dist/components/gx-ide-starting-template.d.ts +11 -0
  30. package/dist/components/gx-ide-starting-template.js +125 -0
  31. package/dist/components/gx-ide-starting-template.js.map +1 -0
  32. package/dist/esm/genexus-ide-ui.js +1 -1
  33. package/dist/esm/gx-ide-details-acknowledgements.entry.js +128 -0
  34. package/dist/esm/gx-ide-details-acknowledgements.entry.js.map +1 -0
  35. package/dist/esm/gx-ide-starting-template.entry.js +99 -0
  36. package/dist/esm/gx-ide-starting-template.entry.js.map +1 -0
  37. package/dist/esm/loader.js +1 -1
  38. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  39. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js.map +1 -1
  40. package/dist/genexus-ide-ui/gx-ide-assets/details-acknowledgements/images/bottom-end.svg +46 -0
  41. package/dist/genexus-ide-ui/gx-ide-assets/details-acknowledgements/images/bottom-start.svg +24 -0
  42. package/dist/genexus-ide-ui/gx-ide-assets/details-acknowledgements/images/genexus-next-logo.svg +3 -0
  43. package/dist/genexus-ide-ui/gx-ide-assets/details-acknowledgements/images/top-start.svg +36 -0
  44. package/dist/genexus-ide-ui/gx-ide-assets/details-acknowledgements/langs/details-acknowledgements.lang.en.json +14 -0
  45. package/dist/genexus-ide-ui/gx-ide-assets/details-acknowledgements/langs/details-acknowledgements.lang.ja.json +14 -0
  46. package/dist/genexus-ide-ui/gx-ide-assets/details-acknowledgements/langs/details-acknowledgements.lang.zh.json +14 -0
  47. package/dist/genexus-ide-ui/gx-ide-assets/starting-template/langs/starting-template.lang.en.json +11 -0
  48. package/dist/genexus-ide-ui/gx-ide-assets/starting-template/langs/starting-template.lang.ja.json +11 -0
  49. package/dist/genexus-ide-ui/gx-ide-assets/starting-template/langs/starting-template.lang.zh.json +11 -0
  50. package/dist/genexus-ide-ui/p-5e2f9545.entry.js +187 -0
  51. package/dist/genexus-ide-ui/p-5e2f9545.entry.js.map +1 -0
  52. package/dist/genexus-ide-ui/p-7b986243.entry.js +132 -0
  53. package/dist/genexus-ide-ui/p-7b986243.entry.js.map +1 -0
  54. package/dist/types/components/_starting-template/starting-template.d.ts +31 -0
  55. package/dist/types/components/details-acknowledgements/details-acknowledgements.d.ts +30 -0
  56. package/dist/types/components/details-acknowledgements/types.d.ts +19 -0
  57. package/dist/types/components.d.ts +94 -44
  58. package/package.json +1 -1
  59. package/dist/cjs/gx-ide-template.cjs.entry.js +0 -42
  60. package/dist/cjs/gx-ide-template.cjs.entry.js.map +0 -1
  61. package/dist/collection/components/_starting-template/gx-ide-assets/template/langs/template.lang.en.json +0 -10
  62. package/dist/collection/components/_starting-template/gx-ide-assets/template/langs/template.lang.ja.json +0 -10
  63. package/dist/collection/components/_starting-template/gx-ide-assets/template/langs/template.lang.zh.json +0 -10
  64. package/dist/collection/components/_starting-template/template.css +0 -594
  65. package/dist/collection/components/_starting-template/template.js +0 -87
  66. package/dist/collection/components/_starting-template/template.js.map +0 -1
  67. package/dist/components/gx-ide-template.d.ts +0 -11
  68. package/dist/components/gx-ide-template.js +0 -70
  69. package/dist/components/gx-ide-template.js.map +0 -1
  70. package/dist/esm/gx-ide-template.entry.js +0 -38
  71. package/dist/esm/gx-ide-template.entry.js.map +0 -1
  72. package/dist/genexus-ide-ui/gx-ide-assets/template/langs/template.lang.en.json +0 -10
  73. package/dist/genexus-ide-ui/gx-ide-assets/template/langs/template.lang.ja.json +0 -10
  74. package/dist/genexus-ide-ui/gx-ide-assets/template/langs/template.lang.zh.json +0 -10
  75. package/dist/genexus-ide-ui/p-70526bf3.entry.js +0 -62
  76. package/dist/genexus-ide-ui/p-70526bf3.entry.js.map +0 -1
  77. package/dist/types/components/_starting-template/template.d.ts +0 -20
@@ -1,594 +0,0 @@
1
- :root {
2
- --ui-animaton-speed: 0.2s;
3
- }
4
-
5
- /*ALIGNMENT*/
6
- /*Ellipsis*/
7
- /*****************************************************
8
- TYPOGRAPHY
9
- *****************************************************/
10
- /*Title 01 (Positive)*/
11
- .gxg-title-01 {
12
- font-family: var(--ds-base-font-family-primary);
13
- font-weight: var(--ds-title-01-font-weight);
14
- font-size: var(--ds-title-01-font-size);
15
- letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
16
- color: var(--ds-base-font-color);
17
- text-align: start;
18
- line-height: var(--ds-base-font-line-height--comfortable);
19
- }
20
-
21
- /*Title 01 (Negative)*/
22
- .gxg-title-01--negative {
23
- font-family: var(--ds-base-font-family-primary);
24
- font-weight: var(--ds-title-01-font-weight);
25
- font-size: var(--ds-title-01-font-size);
26
- letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
27
- color: var(--ds-base-font-color);
28
- text-align: start;
29
- line-height: var(--ds-base-font-line-height--comfortable);
30
- color: var(--ds-base-font-color--negative);
31
- }
32
-
33
- /*Title 02 (Positive)*/
34
- .gxg-title-02 {
35
- font-family: var(--ds-base-font-family-primary);
36
- font-weight: var(--ds-title-02-font-weight);
37
- font-size: var(--ds-title-02-font-size);
38
- letter-spacing: var(--ds-base-font-letter-spacing--regular);
39
- color: var(--ds-base-font-color);
40
- text-align: start;
41
- text-transform: uppercase;
42
- line-height: var(--ds-base-font-line-height--comfortable);
43
- }
44
-
45
- .gxg-title-02--negative {
46
- font-family: var(--ds-base-font-family-primary);
47
- font-weight: var(--ds-title-02-font-weight);
48
- font-size: var(--ds-title-02-font-size);
49
- letter-spacing: var(--ds-base-font-letter-spacing--regular);
50
- color: var(--ds-base-font-color);
51
- text-align: start;
52
- text-transform: uppercase;
53
- line-height: var(--ds-base-font-line-height--comfortable);
54
- color: var(--color-on-primary);
55
- }
56
-
57
- /*Title 03*/
58
- .gxg-title-03 {
59
- font-family: var(--ds-base-font-family-primary);
60
- font-weight: var(--ds-title-03-font-weight);
61
- font-size: var(--ds-title-03-font-size);
62
- letter-spacing: var(--ds-base-font-letter-spacing--regular);
63
- color: var(--ds-base-font-color);
64
- text-align: start;
65
- text-transform: uppercase;
66
- line-height: var(--ds-base-font-line-height--comfortable);
67
- }
68
-
69
- .gxg-title-03--negative {
70
- font-family: var(--ds-base-font-family-primary);
71
- font-weight: var(--ds-title-03-font-weight);
72
- font-size: var(--ds-title-03-font-size);
73
- letter-spacing: var(--ds-base-font-letter-spacing--regular);
74
- color: var(--ds-base-font-color);
75
- text-align: start;
76
- text-transform: uppercase;
77
- line-height: var(--ds-base-font-line-height--comfortable);
78
- color: var(--ds-base-font-color--negative);
79
- }
80
-
81
- /*Title 04*/
82
- .gxg-title-04 {
83
- font-family: var(--ds-base-font-family-primary);
84
- font-weight: var(--ds-title-04-font-weight);
85
- font-size: var(--ds-title-04-font-size);
86
- letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
87
- color: var(--ds-base-font-color);
88
- text-align: start;
89
- line-height: var(--ds-base-font-line-height--comfortable);
90
- }
91
-
92
- .gxg-title-04--negative {
93
- font-family: var(--ds-base-font-family-primary);
94
- font-weight: var(--ds-title-04-font-weight);
95
- font-size: var(--ds-title-04-font-size);
96
- letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
97
- color: var(--ds-base-font-color);
98
- text-align: start;
99
- line-height: var(--ds-base-font-line-height--comfortable);
100
- color: var(--ds-base-font-color--negative);
101
- }
102
-
103
- /*Title 05*/
104
- .gxg-title-05 {
105
- font-family: var(--ds-base-font-family-primary);
106
- font-weight: var(--ds-title-05-font-weight);
107
- font-size: var(--ds-title-05-font-size);
108
- letter-spacing: var(--ds-base-font-letter-spacing--regular);
109
- color: var(--ds-base-font-color);
110
- text-align: start;
111
- line-height: var(--ds-base-font-line-height--comfortable);
112
- }
113
-
114
- .gxg-title-05--negative {
115
- font-family: var(--ds-base-font-family-primary);
116
- font-weight: var(--ds-title-05-font-weight);
117
- font-size: var(--ds-title-05-font-size);
118
- letter-spacing: var(--ds-base-font-letter-spacing--regular);
119
- color: var(--ds-base-font-color);
120
- text-align: start;
121
- line-height: var(--ds-base-font-line-height--comfortable);
122
- color: var(--ds-base-font-color--negative);
123
- }
124
-
125
- /*Text*/
126
- .gxg-text {
127
- font-family: var(--ds-base-font-family-primary);
128
- font-size: var(--ds-base-font-size);
129
- color: var(--ds-base-font-size-color);
130
- font-weight: var(--ds-base-font-size-weight);
131
- line-height: var(--ds-base-font-line-height--comfortable);
132
- }
133
-
134
- .gxg-text--negative {
135
- font-family: var(--ds-base-font-family-primary);
136
- font-size: var(--ds-base-font-size);
137
- color: var(--ds-base-font-size-color);
138
- font-weight: var(--ds-base-font-size-weight);
139
- line-height: var(--ds-base-font-line-height--comfortable);
140
- color: var(--ds-base-font-color--negative);
141
- }
142
-
143
- .gxg-text--gray {
144
- font-family: var(--ds-base-font-family-primary);
145
- font-size: var(--ds-base-font-size);
146
- color: var(--ds-base-font-size-color);
147
- font-weight: var(--ds-base-font-size-weight);
148
- line-height: var(--ds-base-font-line-height--comfortable);
149
- color: var(--ds-base-font-color--dimmed);
150
- }
151
-
152
- /*Quote*/
153
- .gxg-quote {
154
- font-family: var(--ds-base-font-family-primary);
155
- font-size: var(--ds-base-font-size);
156
- color: var(--ds-base-font-size-color);
157
- font-weight: var(--ds-base-font-size-weight);
158
- line-height: var(--ds-base-font-line-height--comfortable);
159
- font-style: italic;
160
- }
161
-
162
- .gxg-quote--negative {
163
- color: var(--ds-base-font-color--negative);
164
- }
165
-
166
- /*Link*/
167
- .gxg-link {
168
- line-height: unset;
169
- font-family: var(--ds-base-font-family-primary);
170
- font-size: var(--ds-base-font-size);
171
- color: var(--ds-base-font-size-color);
172
- font-weight: var(--ds-base-font-size-weight);
173
- line-height: var(--ds-base-font-line-height--comfortable);
174
- color: var(--ds-base-font-color--link);
175
- text-decoration: underline;
176
- cursor: pointer;
177
- display: inline-block;
178
- }
179
- .gxg-link:hover {
180
- color: var(--ds-base-font-color--link-hover);
181
- }
182
- .gxg-link:active {
183
- color: var(--ds-base-font-color--link-active);
184
- }
185
-
186
- .gxg-link-gray {
187
- line-height: unset;
188
- font-family: var(--ds-base-font-family-primary);
189
- font-size: var(--ds-base-font-size);
190
- color: var(--ds-base-font-size-color);
191
- font-weight: var(--ds-base-font-size-weight);
192
- line-height: var(--ds-base-font-line-height--comfortable);
193
- color: var(--ds-base-font-color--link);
194
- text-decoration: underline;
195
- cursor: pointer;
196
- display: inline-block;
197
- color: var(--ds-base-font-color--dimmed);
198
- }
199
- .gxg-link-gray:hover {
200
- line-height: unset;
201
- font-family: var(--ds-base-font-family-primary);
202
- font-size: var(--ds-base-font-size);
203
- color: var(--ds-base-font-size-color);
204
- font-weight: var(--ds-base-font-size-weight);
205
- line-height: var(--ds-base-font-line-height--comfortable);
206
- color: var(--ds-base-font-color--link);
207
- text-decoration: underline;
208
- cursor: pointer;
209
- display: inline-block;
210
- color: var(--ds-base-font-color--dimmed);
211
- filter: brightness(1.4);
212
- }
213
-
214
- /*Alerts*/
215
- .gxg-alert-error {
216
- font-family: var(--ds-base-font-family-primary);
217
- font-size: var(--ds-base-font-size);
218
- color: var(--ds-base-font-size-color);
219
- font-weight: var(--ds-base-font-size-weight);
220
- line-height: var(--ds-base-font-line-height--comfortable);
221
- color: var(--ds-base-font-color--error);
222
- display: inline-block;
223
- }
224
-
225
- .gxg-alert-warning {
226
- font-family: var(--ds-base-font-family-primary);
227
- font-size: var(--ds-base-font-size);
228
- color: var(--ds-base-font-size-color);
229
- font-weight: var(--ds-base-font-size-weight);
230
- line-height: var(--ds-base-font-line-height--comfortable);
231
- color: var(--ds-base-font-color--warning);
232
- display: inline-block;
233
- }
234
-
235
- .gxg-alert-success {
236
- font-family: var(--ds-base-font-family-primary);
237
- font-size: var(--ds-base-font-size);
238
- color: var(--ds-base-font-size-color);
239
- font-weight: var(--ds-base-font-size-weight);
240
- line-height: var(--ds-base-font-line-height--comfortable);
241
- color: var(--ds-base-font-color--success);
242
- display: inline-block;
243
- }
244
-
245
- /*Tab*/
246
- .gxg-tab--disabled {
247
- color: var(--color-primary-disabled);
248
- pointer-events: none;
249
- }
250
- .gxg-tab--disabled[disabled] {
251
- color: var(--color-primary-disabled);
252
- pointer-events: none;
253
- }
254
-
255
- /*Label*/
256
- .gxg-label {
257
- font-family: var(--ds-base-font-family-primary);
258
- font-weight: var(--gxg-label-font-weight);
259
- font-size: var(--gxg-label-font-size);
260
- color: var(--gxg-label-color);
261
- text-align: center;
262
- line-height: 1.455em;
263
- display: flex;
264
- align-items: center;
265
- }
266
- .gxg-label:hover {
267
- color: var(--color-primary-hover);
268
- }
269
- .gxg-label:focus {
270
- color: var(--color-primary-active);
271
- }
272
- .gxg-label:active {
273
- color: var(--color-primary-active);
274
- }
275
- .gxg-label[disabled] {
276
- color: var(--color-primary-disabled);
277
- }
278
-
279
- .gxg-label--negative {
280
- color: var(--color-on-primary);
281
- }
282
- .gxg-label--negative[disabled] {
283
- color: var(--color-on-disabled);
284
- }
285
-
286
- /*****************************************************
287
- GXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES
288
- *****************************************************/
289
- /*****************************************************
290
- FORM ELEMENTS
291
- *****************************************************/
292
- .gxg-scrollbar {
293
- /* Track */
294
- /* Handle */
295
- /* Handle on hover */
296
- }
297
- .gxg-scrollbar::-webkit-scrollbar {
298
- width: var(--gxg-scrollbar-width);
299
- height: var(--gxg-scrollbar-width);
300
- }
301
- .gxg-scrollbar::-webkit-scrollbar-track {
302
- background-color: var(--gxg-scrollbar-track-background);
303
- border-radius: var(--gxg-scrollbar-track-border-radius);
304
- }
305
- .gxg-scrollbar::-webkit-scrollbar-thumb {
306
- background-color: var(--gxg-scrollbar-track-thumb-background);
307
- border-radius: var(--gxg-scrollbar-track-thumb-radius);
308
- }
309
- .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
310
- background-color: var(--gxg-scrollbar-track-thumb-hover-background);
311
- }
312
- .gxg-scrollbar::-webkit-scrollbar-corner {
313
- background: rgba(0, 0, 0, 0);
314
- }
315
-
316
- /* - - - - - - - - - - - - - - - - -
317
- New classes for Chameleon + Mercury
318
- - - - - - - - - - - - - - - - - - */
319
- :host {
320
- display: grid;
321
- block-size: 100%;
322
- }
323
-
324
- .card-regular {
325
- background-color: var(--mer-surface__elevation--01);
326
- border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
327
- border-radius: var(--mer-border__radius--md);
328
- padding: var(--mer-spacing--md) var(--mer-spacing--md);
329
- display: grid;
330
- }
331
-
332
- .card-small {
333
- background-color: var(--mer-surface__elevation--02);
334
- border-radius: var(--mer-border__radius--sm);
335
- padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
336
- }
337
- .card-small--actionable:hover {
338
- background-color: var(--mer-color__neutral-gray--600);
339
- }
340
- .card-small--actionable:active {
341
- background-color: var(--mer-color__neutral-gray--650);
342
- }
343
- .card-small:focus-visible {
344
- outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
345
- outline-offset: var(--focus__outline-offset);
346
- }
347
-
348
- .empty-state {
349
- block-size: 100%;
350
- display: flex;
351
- align-items: center;
352
- justify-content: center;
353
- flex-direction: column;
354
- gap: var(--mer-spacing--sm);
355
- text-align: center;
356
- }
357
- .empty-state__title, .empty-state__button, .empty-state__link {
358
- max-inline-size: 300px;
359
- }
360
-
361
- .opacity-0 {
362
- opacity: 0;
363
- }
364
-
365
- .opacity-1 {
366
- opacity: 1;
367
- }
368
-
369
- .display-contents {
370
- display: contents;
371
- }
372
-
373
- .pill-tag {
374
- padding: 1px 4px;
375
- border-radius: 2px;
376
- min-inline-size: 40px;
377
- text-align: center;
378
- margin-inline-end: 10px;
379
- font-size: 11px;
380
- }
381
-
382
- /* - - - - - - - - - - - - - - - - - - -
383
- Old classes (Gemini) to be removed soon
384
- - - - - - - - - - - - - - - - - - - - */
385
- /* - - - - - - - - - - - - - - - - - - -
386
- Old classes (Gemini) to be removed soon
387
- - - - - - - - - - - - - - - - - - - - */
388
- /* Helper Classes */
389
- .gxi-hidden {
390
- display: none !important;
391
- }
392
-
393
- .gxi-full-height {
394
- height: 100%;
395
- }
396
-
397
- .gxi-overflow-auto {
398
- overflow: auto;
399
- }
400
-
401
- .gxi-display-flex {
402
- display: flex;
403
- }
404
-
405
- .align-start {
406
- display: flex;
407
- align-items: start;
408
- }
409
-
410
- .align-center {
411
- display: flex;
412
- align-items: center;
413
- }
414
-
415
- .align-end {
416
- display: flex;
417
- align-items: end;
418
- }
419
-
420
- .overflow-auto {
421
- overflow: auto;
422
- }
423
-
424
- .justify-start {
425
- display: flex;
426
- justify-content: start;
427
- }
428
-
429
- .justify-center {
430
- display: flex;
431
- justify-content: center;
432
- }
433
-
434
- .justify-end {
435
- display: flex;
436
- justify-content: end;
437
- }
438
-
439
- /* Grids */
440
- .grid {
441
- display: grid;
442
- grid-row-gap: var(--gx-ide-grid-row-gap);
443
- grid-column-gap: var(--gx-ide-grid-column-gap);
444
- grid-template-rows: auto;
445
- }
446
-
447
- ch-grid-cell {
448
- display: flex;
449
- }
450
-
451
- ch-grid {
452
- overflow: auto;
453
- height: 100%;
454
- }
455
-
456
- ch-grid-column {
457
- /*to be removed when this works inside a component with shadow: true*/
458
- z-index: 99;
459
- border-bottom: 1px solid var(--mer-color__neutral-gray--800);
460
- }
461
-
462
- ch-grid-column:first-child {
463
- padding-inline-start: var(--gx-ide-container__padding) !important;
464
- }
465
-
466
- ch-grid-column:last-child {
467
- padding-inline-end: var(--gx-ide-container__padding) !important;
468
- }
469
-
470
- ch-grid-cell {
471
- --mer-spacing--xs: var(--gx-ide-container__padding);
472
- }
473
-
474
- /*--- Layout ---*/
475
- .layout {
476
- display: grid;
477
- gap: var(--mer-spacing--lg);
478
- box-sizing: border-box;
479
- }
480
- .layout--two-cols {
481
- grid-template-columns: 1fr 1fr;
482
- }
483
- .layout--space-above {
484
- padding-block-start: var(--mer-spacing--lg);
485
- }
486
-
487
- /*Gxg Tabs*/
488
- gxg-tabs {
489
- box-shadow: none;
490
- }
491
-
492
- /*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*/
493
- :host(.gx-ide-component) {
494
- height: 100% !important;
495
- display: flex !important;
496
- flex-direction: column !important;
497
- }
498
-
499
- /*stylize the top bar*/
500
- :host(:focus-within) gx-ide-top-bar::part(wrapper) {
501
- background-color: var(--color-secondary-enabled);
502
- }
503
-
504
- /* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
505
- .gx-ide-main-wrapper {
506
- color: var(--gx-ide-component-text-color);
507
- font-weight: var(--mer-font__weight--regular);
508
- font-size: var(--mer-font__size--xs);
509
- font-family: var(--mer-font-family--primary);
510
- height: 100%;
511
- background-color: var(--gx-ide-component-background-color);
512
- display: flex;
513
- flex-direction: column;
514
- flex-grow: 1;
515
- box-sizing: border-box;
516
- }
517
-
518
- /*This is the main element. This is the one that take the remaining vertical space*/
519
- .gx-ide-main {
520
- flex-grow: 1;
521
- overflow-y: auto;
522
- /* Track */
523
- /* Handle */
524
- /* Handle on hover */
525
- }
526
- .gx-ide-main::-webkit-scrollbar {
527
- width: var(--gxg-scrollbar-width);
528
- height: var(--gxg-scrollbar-width);
529
- }
530
- .gx-ide-main::-webkit-scrollbar-track {
531
- background-color: var(--gxg-scrollbar-track-background);
532
- border-radius: var(--gxg-scrollbar-track-border-radius);
533
- }
534
- .gx-ide-main::-webkit-scrollbar-thumb {
535
- background-color: var(--gxg-scrollbar-track-thumb-background);
536
- border-radius: var(--gxg-scrollbar-track-thumb-radius);
537
- }
538
- .gx-ide-main::-webkit-scrollbar-thumb:hover {
539
- background-color: var(--gxg-scrollbar-track-thumb-hover-background);
540
- }
541
- .gx-ide-main::-webkit-scrollbar-corner {
542
- background: rgba(0, 0, 0, 0);
543
- }
544
-
545
- .gx-ide-overflow {
546
- overflow-y: auto;
547
- /* Track */
548
- /* Handle */
549
- /* Handle on hover */
550
- }
551
- .gx-ide-overflow::-webkit-scrollbar {
552
- width: var(--gxg-scrollbar-width);
553
- height: var(--gxg-scrollbar-width);
554
- }
555
- .gx-ide-overflow::-webkit-scrollbar-track {
556
- background-color: var(--gxg-scrollbar-track-background);
557
- border-radius: var(--gxg-scrollbar-track-border-radius);
558
- }
559
- .gx-ide-overflow::-webkit-scrollbar-thumb {
560
- background-color: var(--gxg-scrollbar-track-thumb-background);
561
- border-radius: var(--gxg-scrollbar-track-thumb-radius);
562
- }
563
- .gx-ide-overflow::-webkit-scrollbar-thumb:hover {
564
- background-color: var(--gxg-scrollbar-track-thumb-hover-background);
565
- }
566
- .gx-ide-overflow::-webkit-scrollbar-corner {
567
- background: rgba(0, 0, 0, 0);
568
- }
569
-
570
- .tree-view-primary {
571
- font-size: var(--mer-font__size--2xs);
572
- }
573
-
574
- p {
575
- margin: 0;
576
- font-size: var(--mer-font__size--xxs);
577
- }
578
-
579
- /* - - - - - - - - - - - - - - - - - -
580
- New : For Mercury
581
- - - - - - - - - - - - - - - - - - - */
582
- .buttons-container {
583
- display: flex;
584
- gap: var(--mer-spacing--xs);
585
- }
586
-
587
- /*Gx Ide*/
588
- /*@container queries*/
589
- /* hiChar styles
590
- Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
591
- */
592
- :host {
593
- display: block;
594
- }
@@ -1,87 +0,0 @@
1
- /* STENCIL IMPORTS */
2
- import { Host, h } from "@stencil/core";
3
- /* OTHER LIBRARIES IMPORTS */
4
- /* CUSTOM IMPORTS */
5
- import { config } from "../../common/config";
6
- import { Locale } from "../../common/locale";
7
- export class GxIdeTemplate {
8
- constructor() {
9
- this.renderedFirstTime = false;
10
- this.displayTitle = false;
11
- }
12
- // 6.COMPONENT LIFECYCLE METHODS //
13
- async componentWillLoad() {
14
- this._componentLocale = await Locale.getComponentStrings(this.el);
15
- }
16
- componentDidRender() {
17
- if (!this.renderedFirstTime) {
18
- this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
19
- this.renderedFirstTime = true;
20
- }
21
- }
22
- // 7.LISTENERS //
23
- // 8.PUBLIC METHODS API //
24
- // 9.LOCAL METHODS //
25
- // 10.RENDER() FUNCTION //
26
- render() {
27
- return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("p", { style: { marginTop: "0" } }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer-end" }, "Create")))));
28
- }
29
- static get is() { return "gx-ide-template"; }
30
- static get encapsulation() { return "shadow"; }
31
- static get originalStyleUrls() {
32
- return {
33
- "$": ["template.scss"]
34
- };
35
- }
36
- static get styleUrls() {
37
- return {
38
- "$": ["template.css"]
39
- };
40
- }
41
- static get assetsDirs() { return ["gx-ide-assets/template"]; }
42
- static get properties() {
43
- return {
44
- "displayTitle": {
45
- "type": "boolean",
46
- "mutable": false,
47
- "complexType": {
48
- "original": "false",
49
- "resolved": "boolean",
50
- "references": {}
51
- },
52
- "required": false,
53
- "optional": false,
54
- "docs": {
55
- "tags": [],
56
- "text": "If true it displays the component title on the header"
57
- },
58
- "attribute": "display-title",
59
- "reflect": false,
60
- "defaultValue": "false"
61
- }
62
- };
63
- }
64
- static get events() {
65
- return [{
66
- "method": "componentDidRenderFirstTime",
67
- "name": "componentDidRenderFirstTime",
68
- "bubbles": true,
69
- "cancelable": true,
70
- "composed": true,
71
- "docs": {
72
- "tags": [{
73
- "name": "description",
74
- "text": "Gets fired when the component has rendered for the first time."
75
- }],
76
- "text": ""
77
- },
78
- "complexType": {
79
- "original": "string",
80
- "resolved": "string",
81
- "references": {}
82
- }
83
- }];
84
- }
85
- static get elementRef() { return "el"; }
86
- }
87
- //# sourceMappingURL=template.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/components/_starting-template/template.tsx"],"names":[],"mappings":"AAAA,qBAAqB;AACrB,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEN,MAAM,eAAe,CAAC;AACvB,6BAA6B;AAC7B,oBAAoB;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAQ7C,MAAM,OAAO,aAAa;;QAqBhB,sBAAiB,GAAG,KAAK,CAAC;4BAaF,KAAK;;IASrC,mCAAmC;IAEnC,KAAK,CAAC,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACpE,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,IAAI,CAAC,2BAA2B,CAAC,IAAI,CACnC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CACpC,CAAC;YACF,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;SAC/B;IACH,CAAC;IAED,iBAAiB;IAEjB,0BAA0B;IAE1B,qBAAqB;IAErB,0BAA0B;IAE1B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB;YAC5B,WAAK,KAAK,EAAC,qBAAqB;gBAC9B,wBACE,cAAc,EACZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,EAEhE,aAAa,EAAE,MAAM,CAAC,cAAc,CAAC,aAAa;oBAElD,SAAG,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,+OAKxB;oBACJ,qBACE,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,WAAW,EACvB,aAAa,EAAC,OAAO,EACrB,WAAW,SACI;oBACjB,kBAAY,IAAI,EAAC,YAAY,aAAoB,CAChC,CACf,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { config } from \"../../common/config\";\nimport { Locale } from \"../../common/locale\";\n\n@Component({\n tag: \"gx-ide-template\",\n styleUrl: \"template.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/template\"]\n})\nexport class GxIdeTemplate {\n /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n // 1.OWN PROPERTIES //\n\n /**\n * The component hard-coded strings translations.\n */\n private _componentLocale: any;\n private renderedFirstTime = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeTemplateElement;\n\n // 3.STATE() VARIABLES //\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n /**\n * If true it displays the component title on the header\n */\n @Prop() readonly displayTitle = false;\n\n // 5.EVENTS (EMIT) //\n\n /**\n * @description Gets fired when the component has rendered for the first time.\n */\n @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host class=\"gx-ide-component\">\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n slimmerFooter={config.gxIdeContainer.slimmerFooter}\n >\n <p style={{ marginTop: \"0\" }}>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis\n natus nam, veritatis aspernatur consequatur omnis blanditiis!\n Praesentium, ex labore? Odit, officiis eius rerum pariatur ea\n dicta possimus perferendis molestiae sunt!q\n </p>\n <gxg-form-text\n label=\"Name\"\n placeholder=\"Elon Musk\"\n labelPosition=\"start\"\n centerLabel\n ></gxg-form-text>\n <gxg-button slot=\"footer-end\">Create</gxg-button>\n </gx-ide-container>\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -1,11 +0,0 @@
1
- import type { Components, JSX } from "../types/components";
2
-
3
- interface GxIdeTemplate extends Components.GxIdeTemplate, HTMLElement {}
4
- export const GxIdeTemplate: {
5
- prototype: GxIdeTemplate;
6
- new (): GxIdeTemplate;
7
- };
8
- /**
9
- * Used to define this component and all nested components recursively.
10
- */
11
- export const defineCustomElement: () => void;