@genexus/genexus-ide-ui 0.0.138 → 0.0.139

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 (29) hide show
  1. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  2. package/dist/cjs/gx-ide-bpm-import-gxpm.cjs.entry.js +43 -0
  3. package/dist/cjs/gx-ide-bpm-import-gxpm.cjs.entry.js.map +1 -0
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/collection/collection-manifest.json +1 -0
  6. package/dist/collection/components/bpm/import-gxpm/gx-ide-assets/bpm-import-gxpm/langs/bpm-import-gxpm.lang.en.json +10 -0
  7. package/dist/collection/components/bpm/import-gxpm/gx-ide-assets/bpm-import-gxpm/langs/bpm-import-gxpm.lang.ja.json +3 -0
  8. package/dist/collection/components/bpm/import-gxpm/gx-ide-assets/bpm-import-gxpm/langs/bpm-import-gxpm.lang.zh.json +3 -0
  9. package/dist/collection/components/bpm/import-gxpm/import-gxpm.css +562 -0
  10. package/dist/collection/components/bpm/import-gxpm/import-gxpm.js +88 -0
  11. package/dist/collection/components/bpm/import-gxpm/import-gxpm.js.map +1 -0
  12. package/dist/components/gx-ide-bpm-import-gxpm.d.ts +11 -0
  13. package/dist/components/gx-ide-bpm-import-gxpm.js +101 -0
  14. package/dist/components/gx-ide-bpm-import-gxpm.js.map +1 -0
  15. package/dist/esm/genexus-ide-ui.js +1 -1
  16. package/dist/esm/gx-ide-bpm-import-gxpm.entry.js +39 -0
  17. package/dist/esm/gx-ide-bpm-import-gxpm.entry.js.map +1 -0
  18. package/dist/esm/loader.js +1 -1
  19. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  20. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js.map +1 -1
  21. package/dist/genexus-ide-ui/gx-ide-assets/bpm-import-gxpm/langs/bpm-import-gxpm.lang.en.json +10 -0
  22. package/dist/genexus-ide-ui/gx-ide-assets/bpm-import-gxpm/langs/bpm-import-gxpm.lang.ja.json +3 -0
  23. package/dist/genexus-ide-ui/gx-ide-assets/bpm-import-gxpm/langs/bpm-import-gxpm.lang.zh.json +3 -0
  24. package/dist/genexus-ide-ui/p-049a370c.entry.js +78 -0
  25. package/dist/genexus-ide-ui/p-049a370c.entry.js.map +1 -0
  26. package/dist/types/components/bpm/files-selector/files-selector.d.ts +50 -0
  27. package/dist/types/components/bpm/import-gxpm/import-gxpm.d.ts +21 -0
  28. package/dist/types/components.d.ts +40 -0
  29. package/package.json +1 -1
@@ -0,0 +1,562 @@
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
+ /*Gx Ide*/
317
+ /*@container queries*/
318
+ /* hiChar styles
319
+ 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.
320
+ */
321
+ /* Helper Classes */
322
+ .gxi-hidden {
323
+ display: none !important;
324
+ }
325
+
326
+ .gxi-full-height {
327
+ height: 100%;
328
+ }
329
+
330
+ .gxi-overflow-auto {
331
+ overflow: auto;
332
+ }
333
+
334
+ .gxi-display-flex {
335
+ display: flex;
336
+ }
337
+
338
+ .align-start {
339
+ display: flex;
340
+ align-items: start;
341
+ }
342
+
343
+ .align-center {
344
+ display: flex;
345
+ align-items: center;
346
+ }
347
+
348
+ .align-end {
349
+ display: flex;
350
+ align-items: end;
351
+ }
352
+
353
+ .overflow-auto {
354
+ overflow: auto;
355
+ }
356
+
357
+ .justify-start {
358
+ display: flex;
359
+ justify-content: start;
360
+ }
361
+
362
+ .justify-center {
363
+ display: flex;
364
+ justify-content: center;
365
+ }
366
+
367
+ .justify-end {
368
+ display: flex;
369
+ justify-content: end;
370
+ }
371
+
372
+ /* Grids */
373
+ .grid {
374
+ display: grid;
375
+ grid-row-gap: var(--gx-ide-grid-row-gap);
376
+ grid-column-gap: var(--gx-ide-grid-column-gap);
377
+ grid-template-rows: auto;
378
+ }
379
+
380
+ ch-grid-cell {
381
+ display: flex;
382
+ }
383
+
384
+ ch-grid {
385
+ overflow: auto;
386
+ height: 100%;
387
+ }
388
+
389
+ ch-grid-column {
390
+ /*to be removed when this works inside a component with shadow: true*/
391
+ z-index: 99;
392
+ border-bottom: 1px solid var(--mer-color__neutral-gray--800);
393
+ }
394
+
395
+ ch-grid-column:first-child {
396
+ padding-inline-start: var(--gx-ide-container__padding) !important;
397
+ }
398
+
399
+ ch-grid-column:last-child {
400
+ padding-inline-end: var(--gx-ide-container__padding) !important;
401
+ }
402
+
403
+ ch-grid-cell {
404
+ --mer-spacing--xs: var(--gx-ide-container__padding);
405
+ }
406
+
407
+ /*--- Layout ---*/
408
+ .layout {
409
+ display: grid;
410
+ gap: var(--mer-spacing--lg);
411
+ box-sizing: border-box;
412
+ }
413
+ .layout--two-cols {
414
+ grid-template-columns: 1fr 1fr;
415
+ }
416
+ .layout--space-above {
417
+ padding-block-start: var(--mer-spacing--lg);
418
+ }
419
+
420
+ /*Gxg Tabs*/
421
+ gxg-tabs {
422
+ box-shadow: none;
423
+ }
424
+
425
+ /*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*/
426
+ :host(.gx-ide-component) {
427
+ height: 100% !important;
428
+ display: flex !important;
429
+ flex-direction: column !important;
430
+ }
431
+
432
+ /*stylize the top bar*/
433
+ :host(:focus-within) gx-ide-top-bar::part(wrapper) {
434
+ background-color: var(--color-secondary-enabled);
435
+ }
436
+
437
+ /* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
438
+ .gx-ide-main-wrapper {
439
+ color: var(--gx-ide-component-text-color);
440
+ font-weight: var(--mer-font__weight--regular);
441
+ font-size: var(--mer-font__size--xs);
442
+ font-family: var(--mer-font-family--primary);
443
+ height: 100%;
444
+ background-color: var(--gx-ide-component-background-color);
445
+ display: flex;
446
+ flex-direction: column;
447
+ flex-grow: 1;
448
+ box-sizing: border-box;
449
+ }
450
+
451
+ /*This is the main element. This is the one that take the remaining vertical space*/
452
+ .gx-ide-main {
453
+ flex-grow: 1;
454
+ overflow-y: auto;
455
+ /* Track */
456
+ /* Handle */
457
+ /* Handle on hover */
458
+ }
459
+ .gx-ide-main::-webkit-scrollbar {
460
+ width: var(--gxg-scrollbar-width);
461
+ height: var(--gxg-scrollbar-width);
462
+ }
463
+ .gx-ide-main::-webkit-scrollbar-track {
464
+ background-color: var(--gxg-scrollbar-track-background);
465
+ border-radius: var(--gxg-scrollbar-track-border-radius);
466
+ }
467
+ .gx-ide-main::-webkit-scrollbar-thumb {
468
+ background-color: var(--gxg-scrollbar-track-thumb-background);
469
+ border-radius: var(--gxg-scrollbar-track-thumb-radius);
470
+ }
471
+ .gx-ide-main::-webkit-scrollbar-thumb:hover {
472
+ background-color: var(--gxg-scrollbar-track-thumb-hover-background);
473
+ }
474
+ .gx-ide-main::-webkit-scrollbar-corner {
475
+ background: rgba(0, 0, 0, 0);
476
+ }
477
+
478
+ .gx-ide-overflow {
479
+ overflow-y: auto;
480
+ /* Track */
481
+ /* Handle */
482
+ /* Handle on hover */
483
+ }
484
+ .gx-ide-overflow::-webkit-scrollbar {
485
+ width: var(--gxg-scrollbar-width);
486
+ height: var(--gxg-scrollbar-width);
487
+ }
488
+ .gx-ide-overflow::-webkit-scrollbar-track {
489
+ background-color: var(--gxg-scrollbar-track-background);
490
+ border-radius: var(--gxg-scrollbar-track-border-radius);
491
+ }
492
+ .gx-ide-overflow::-webkit-scrollbar-thumb {
493
+ background-color: var(--gxg-scrollbar-track-thumb-background);
494
+ border-radius: var(--gxg-scrollbar-track-thumb-radius);
495
+ }
496
+ .gx-ide-overflow::-webkit-scrollbar-thumb:hover {
497
+ background-color: var(--gxg-scrollbar-track-thumb-hover-background);
498
+ }
499
+ .gx-ide-overflow::-webkit-scrollbar-corner {
500
+ background: rgba(0, 0, 0, 0);
501
+ }
502
+
503
+ /*gxg-tree-view*/
504
+ .tree-container {
505
+ display: flex;
506
+ height: 100%;
507
+ width: 100%;
508
+ box-sizing: border-box;
509
+ }
510
+
511
+ p {
512
+ margin: 0;
513
+ font-size: var(--mer-font__size--xxs);
514
+ }
515
+
516
+ /*Gx Ide*/
517
+ /*@container queries*/
518
+ /* hiChar styles
519
+ 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.
520
+ */
521
+ .control-wrapper {
522
+ display: flex;
523
+ gap: var(--mer-spacing--xs);
524
+ align-items: center;
525
+ }
526
+ .control-wrapper--vertical {
527
+ flex-direction: column;
528
+ align-items: start;
529
+ }
530
+
531
+ .controls-wrapper {
532
+ display: flex;
533
+ gap: var(--mer-spacing--xs);
534
+ }
535
+ .controls-wrapper--vertical {
536
+ flex-direction: column;
537
+ align-items: start;
538
+ }
539
+
540
+ .input-text {
541
+ box-sizing: border-box;
542
+ background-color: transparent;
543
+ border: var(--mer-border__width--sm) solid var(--mer-border-color__dim);
544
+ border-radius: var(--mer-border__width--lg);
545
+ height: 26px;
546
+ color: var(--mer-text__bright);
547
+ font-size: var(--mer-font__size--xxs);
548
+ }
549
+ .input-text--full-width {
550
+ align-self: stretch;
551
+ }
552
+
553
+ :host {
554
+ display: block;
555
+ }
556
+
557
+ .header {
558
+ display: grid;
559
+ align-items: center;
560
+ grid-template-columns: max-content 1fr min-content;
561
+ gap: var(--mer-spacing--sm);
562
+ }
@@ -0,0 +1,88 @@
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
+ // 7.LISTENERS //
11
+ // 8.PUBLIC METHODS API //
12
+ // 9.LOCAL METHODS //
13
+ this.automaticBackupHandler = () => { };
14
+ this.displayTitle = false;
15
+ }
16
+ // 6.COMPONENT LIFECYCLE METHODS //
17
+ async componentWillLoad() {
18
+ this._componentLocale = await Locale.getComponentStrings(this.el);
19
+ }
20
+ componentDidRender() {
21
+ if (!this.renderedFirstTime) {
22
+ this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
23
+ this.renderedFirstTime = true;
24
+ }
25
+ }
26
+ // 10.RENDER() FUNCTION //
27
+ render() {
28
+ 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("div", { class: "header" }, h("label", { htmlFor: "project-path" }, "Project Path"), h("input", { type: "text", class: "input-text", id: "project-path" }), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal" })), h("div", { class: "control-wrapper" }, h("label", { htmlFor: "automatic-backup" }, "Automatic Backup"), h("ch-checkbox", { id: "automatic-backup", accessibleName: "el mismo que el label", checkedValue: "true", unCheckedValue: "false", value: "checked", onInput: this.automaticBackupHandler })), h("button", { slot: "footer-end" }, "Cancel"), h("button", { slot: "footer-end" }, "Ok")))));
29
+ }
30
+ static get is() { return "gx-ide-bpm-import-gxpm"; }
31
+ static get encapsulation() { return "shadow"; }
32
+ static get originalStyleUrls() {
33
+ return {
34
+ "$": ["import-gxpm.scss"]
35
+ };
36
+ }
37
+ static get styleUrls() {
38
+ return {
39
+ "$": ["import-gxpm.css"]
40
+ };
41
+ }
42
+ static get assetsDirs() { return ["gx-ide-assets/bpm-import-gxpm"]; }
43
+ static get properties() {
44
+ return {
45
+ "displayTitle": {
46
+ "type": "boolean",
47
+ "mutable": false,
48
+ "complexType": {
49
+ "original": "false",
50
+ "resolved": "boolean",
51
+ "references": {}
52
+ },
53
+ "required": false,
54
+ "optional": false,
55
+ "docs": {
56
+ "tags": [],
57
+ "text": "If true it displays the component title on the header"
58
+ },
59
+ "attribute": "display-title",
60
+ "reflect": false,
61
+ "defaultValue": "false"
62
+ }
63
+ };
64
+ }
65
+ static get events() {
66
+ return [{
67
+ "method": "componentDidRenderFirstTime",
68
+ "name": "componentDidRenderFirstTime",
69
+ "bubbles": true,
70
+ "cancelable": true,
71
+ "composed": true,
72
+ "docs": {
73
+ "tags": [{
74
+ "name": "description",
75
+ "text": "Gets fired when the component has rendered for the first time."
76
+ }],
77
+ "text": ""
78
+ },
79
+ "complexType": {
80
+ "original": "string",
81
+ "resolved": "string",
82
+ "references": {}
83
+ }
84
+ }];
85
+ }
86
+ static get elementRef() { return "el"; }
87
+ }
88
+ //# sourceMappingURL=import-gxpm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"import-gxpm.js","sourceRoot":"","sources":["../../../../src/components/bpm/import-gxpm/import-gxpm.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,wBAAwB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAQhD,MAAM,OAAO,aAAa;;QAOhB,sBAAiB,GAAG,KAAK,CAAC;QAqClC,iBAAiB;QAEjB,0BAA0B;QAE1B,qBAAqB;QAEb,2BAAsB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;4BA9BV,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;IAUD,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,WAAK,KAAK,EAAC,QAAQ;wBACjB,aAAO,OAAO,EAAC,cAAc,mBAAqB;wBAClD,aAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,EAAC,EAAE,EAAC,cAAc,GAAG;wBAC1D,kBACE,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAC,mCAAmC,GAC5B,CACV;oBAEN,WAAK,KAAK,EAAC,iBAAiB;wBAC1B,aAAO,OAAO,EAAC,kBAAkB,uBAAyB;wBAC1D,mBACE,EAAE,EAAC,kBAAkB,EACrB,cAAc,EAAC,uBAAuB,EACtC,YAAY,EAAC,MAAM,EACnB,cAAc,EAAC,OAAO,EACtB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,IAAI,CAAC,sBAAsB,GACvB,CACX;oBACN,cAAQ,IAAI,EAAC,YAAY,aAAgB;oBACzC,cAAQ,IAAI,EAAC,YAAY,SAAY,CACpB,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-bpm-import-gxpm\",\n styleUrl: \"import-gxpm.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/bpm-import-gxpm\"]\n})\nexport class GxIdeTemplate {\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: HTMLGxIdeBpmImportGxpmElement;\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 private automaticBackupHandler = () => {};\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 <div class=\"header\">\n <label htmlFor=\"project-path\">Project Path</label>\n <input type=\"text\" class=\"input-text\" id=\"project-path\" />\n <gxg-button\n type=\"secondary-icon-only\"\n icon=\"gemini-tools/show-more-horizontal\"\n ></gxg-button>\n </div>\n\n <div class=\"control-wrapper\">\n <label htmlFor=\"automatic-backup\">Automatic Backup</label>\n <ch-checkbox\n id=\"automatic-backup\"\n accessibleName=\"el mismo que el label\"\n checkedValue=\"true\"\n unCheckedValue=\"false\"\n value=\"checked\"\n onInput={this.automaticBackupHandler}\n ></ch-checkbox>\n </div>\n <button slot=\"footer-end\">Cancel</button>\n <button slot=\"footer-end\">Ok</button>\n </gx-ide-container>\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface GxIdeBpmImportGxpm extends Components.GxIdeBpmImportGxpm, HTMLElement {}
4
+ export const GxIdeBpmImportGxpm: {
5
+ prototype: GxIdeBpmImportGxpm;
6
+ new (): GxIdeBpmImportGxpm;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;